Inline/sameline image and button

Post Reply
synaptic
Posts: 11
Joined: 30 Jan 2019, 16:59

17 Nov 2020, 03:12

how do I put p:graphicImage and p:link into same line while image aligned left and link aligned right on the same layout-topbar-grid ?
Any working solution will do, not have to use p:panelGrid

Code: Select all

        
 <div class="layout-container layout-menu-#{guestPreferences.menuTheme} layout-topbar-#{guestPreferences.topBar} #{guestPreferences.horizontal ? 'layout-menu-horizontal' : ''} layout-top-#{guestPreferences.topBarSize}">
    <div class="layout-top">
       	<div class="layout-topbar">
	    <div class="layout-topbar-grid">
	    <p:panelGrid layout="flex" columns="2" columnClasses="p-col-12,p-col-3" styleClass="ui-panelgrid-blank" contentStyleClass="ui-fluid">
       		<p:graphicImage name="images/myimage01.png"/>
       		<p:link id="btnLogin" value="Login" icon="ui-icon-verified-user" type="button" outcome="/login"/>
	    </p:panelGrid>
	    </div>
            <div class="layout-topbar-separator"></div>
        </div>
    </div>
</div>    
Expected result:
------------------------------------------------------------------------
| *********************************************|
| myimagehere ***************** mylink here |
| *********************************************|
------------------------------------------------------------------------

Appreciate the help

mert.sincan
Posts: 4637
Joined: 29 Jun 2013, 12:38

17 Nov 2020, 16:39

Hi,

Please try;

Code: Select all

<div class="layout-topbar-grid">
<div style="display:flex; justify-content: space-between; align-items: center">
       		<p:graphicImage name="images/myimage01.png" />
       		<p:link id="btnLogin" value="Login" icon="ui-icon-verified-user" type="button" outcome="/login" style="color: #fff"/>
</div>
</div>

synaptic
Posts: 11
Joined: 30 Jan 2019, 16:59

17 Nov 2020, 20:01

Hello,
thanks for your help!

I've used the code as is and now image and button indeed aligned in one line, but there is no spaces between image and button.
My requirement is to put login button to the most right, while image - adjusted left.
Again, would appreciate the help,
Thanks.

synaptic
Posts: 11
Joined: 30 Jan 2019, 16:59

17 Nov 2020, 22:04

ok, I've figured it out: simply remove class="layout-topbar-grid" and style="display:flex;" will work.

mert.sincan
Posts: 4637
Joined: 29 Jun 2013, 12:38

18 Nov 2020, 07:53

Glad to hear, thanks a lot for the update!

Best Regards,

Post Reply

Return to “Sapphire - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests