Prime Community Forum

Posted: **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

Posted: **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>

Posted: **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.

Posted: **17 Nov 2020, 22:04**

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

Posted: **18 Nov 2020, 07:53**

Glad to hear, thanks a lot for the update!

Best Regards,

Prime Community Forum

Inline/sameline image and button

Inline/sameline image and button

Re: Inline/sameline image and button

Re: Inline/sameline image and button

Re: Inline/sameline image and button

Re: Inline/sameline image and button