0

I need to align vertically 2 elements inside an outputpanel. I did it with a margin-top: 3em but this way is not responsive as you can see:

image in web browser

and in movile view: Image in movile web browser

I need to align the right button with the text vertically in all devices.

I use this code:

<p:outputPanel class="ui-g">

                <p:outputPanel class="ui-g-8">
                    <h:outputText value="My text will be here" styleClass="enunciadoProtocolo" /><br />
                    <h:outputText value="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
                                  styleClass="subEnunciadoProtocolo" />
                </p:outputPanel>
                <p:outputPanel class="ui-g-4" style="text-align: center; margin-top: 3em;">
                    <p:commandButton update="mensajes" icon="fa fa-file-text" value="Ver pdf" />
                </p:outputPanel>

Luis Manrique
  • 162
  • 1
  • 12
  • Does it work if you replace the `p:outputPanel`s with `div`'s? – Kukeltje Sep 11 '18 at 07:58
  • And look at the **generated** client-side html and check if something prevents it there. – Kukeltje Sep 11 '18 at 08:18
  • If you need the button below the text read my answer. If you want to have it next to the text but at a lower or hight position, then my answer is wrong. Please comment – Kukeltje Sep 11 '18 at 08:41
  • @Kukeltje I need the button next to the text just right and in the middle – Luis Manrique Sep 11 '18 at 08:56
  • Ok, but what does that have to do with responsiveness? It is a "simple" 'vertical align' https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div – Kukeltje Sep 11 '18 at 08:59

1 Answers1

0

if button has fixed height you can simple use this

position:relative;top:50%;margin-top:half of button height;

<p:outputPanel class="ui-g-4" style="position:relative; top:50%; margin-top:-half of button height;">
Renato Hoxha
  • 134
  • 5
  • Why does this help? Care to elaborate? – Kukeltje Sep 11 '18 at 08:08
  • But the thing is that all elements should be responsive, so doesn't have fixed height any element in the page – Luis Manrique Sep 11 '18 at 09:02
  • buttons usual are, it is short way if you don't want to use in this way you can remove margin-top and add transform: translateY(-50%); it will be responsive – Renato Hoxha Sep 11 '18 at 09:33
  • @RenatoHoxha is right, buttons usually are sort of fixed (your button on the 'smaller screen' does not look 'nice'...). You can fix this e.g. by reducing font-size when used on smaller screens etc... Full (= good) responsiveness is something that requires work by you too. The framework cannot (and should not) solve every responsive requirement you have. And his answer is the 'third' bullit in the duplicate I referred too. – Kukeltje Sep 11 '18 at 10:03
  • And personally I would not want to 'waste' screen real-estate on phones by having the button of the 'pdf' version next to the text and a lot of unused whitespace. Maybe you better have it 'float above' or after/below the text'. Then my removed answer might help in some way. – Kukeltje Sep 11 '18 at 10:04
  • It is still css if you can reduce size on mobile you can reduce even margin – Renato Hoxha Sep 11 '18 at 10:49
  • @Kukeltje change the button from right to above was other option but the client decided to put it there... – Luis Manrique Sep 11 '18 at 15:43
  • Floating is the third (and imo best) option. – Kukeltje Sep 11 '18 at 15:55