Page 1 of 1

Combining inputText and button

Posted: 04 Feb 2016, 20:35
by pfroy
Hi,

I'm trying to figure out a way to combine cleanly and properly an action button at the right of an inputText. There are ways to do it easily in the Twitter Bootstrap universe and its useful in many use cases. I'm trying to do the same with Primefaces components using Volt template with no success.

When digging into the Volt template I saw this in the Calendar section:

Image

This is exactly the look I'm looking for but it should be applied to inputText instead of calendar. I guess if it can be done with calendar, it can but done with inputText?

Any help is welcome.
Thanks,
Pierre Francis

Re: Combining inputText and button

Posted: 04 Feb 2016, 20:42
by pfroy
pfroy wrote:Hi,

I'm trying to figure out a way to combine cleanly and properly an action button at the right of an inputText. There are ways to do it easily in the Twitter Bootstrap universe and its useful in many use cases. I'm trying to do the same with Primefaces components using Volt template with no success.

When digging into the Volt template I saw this in the Calendar section:

Image

This is exactly the look I'm looking for but it should be applied to inputText instead of calendar. I guess if it can be done with calendar, it can but done with inputText?

Any help is welcome.
Thanks,
Pierre Francis
Now I'm doing this...

Code: Select all

<h:panelGroup layout="block" style="white-space:nowrap;">
	<p:inputText id="asset" value="Équipement" disabled="true" styleClass="Wid80 BoxSizeBorder"/>
	<p:button icon="#{icon.DisplayAction}"/>
</h:panelGroup>
Image

Re: Combining inputText and button

Posted: 05 Feb 2016, 13:29
by aragorn
Thanks for your update and good solution. Maybe, you can try the following css (If you use "ui-fluid" class);

Code: Select all

<h:panelGroup layout="block" style="white-space:nowrap; position: relative;">
   <p:inputText id="asset" value="Équipement" disabled="true" style="padding-right: 2.6em !important;"/>
   <p:button icon="fa fa-search" style="position: absolute; right: -2px;"/>
</h:panelGroup>
Image

Re: Combining inputText and button

Posted: 05 Feb 2016, 21:51
by pfroy
Hi aragorn,

Almosts, I had to make some tweaking to your solution maybe because I forogt to post the code surrounding those components.

Code: Select all

<p:panelGrid>
	<div class="Container100 Responsive100" style="padding-top: 0px;">
		<h2 class="BigTopic Opac80">#{bundle.GeneralInformation}</h2>
		<div class="Container100">
			<p:panelGrid columns="4" rendered="#{faultController.selected != null}"  layout="grid"
						 columnClasses="ui-grid-col-2,ui-grid-col-4,ui-grid-col-2,ui-grid-col-4" 
						 style="margin: 5px;" styleClass="ui-panelgrid-blank" >
				<p:outputLabel for="asset" value="#{bundle.ViewFaultLabel_equipement}"/>
				<h:panelGroup layout="block" style="white-space:nowrap; position: relative;">
					<p:inputText id="asset" value="#{faultController.selected.asset.displayName}" disabled="true" style="padding-right: 3.6em !important;" styleClass="Wid95 BoxSizeBorder"/>
					<p:commandButton update=":AssetQuickViewForm" oncomplete="PF('AssetQuickViewDialog').show()" icon="#{icon.DisplayAction}" title="#{bundle.ViewFaultAssetViewLink}" style="position: absolute; right: 20px;">
						<f:setPropertyActionListener target="#{assetQuickViewController.selected}" value="#{faultController.selected.asset}"/>
					</p:commandButton>
				</h:panelGroup>
			</p:panelGrid>
		</div>
	</div>
</p:panelGrid>
Now it looks like this:
Image

But when I reduce browser window size:
Image

Re: Combining inputText and button

Posted: 08 Feb 2016, 11:36
by aragorn
Hi Pfroy,
Thanks for the screenshots and information. Can you please try the following example?

Code: Select all

<p:tabView>
    <p:tab title="Yesterday">
        <p:panelGrid>
            <div class="Card">
                <div class="Container100 Responsive100" style="padding-top: 0px;">
                    <h2 class="BigTopic Opac80">Test</h2>
                    <div class=" Container100">
                        <p:panelGrid columns="2"  layout="grid"
                                     columnClasses="ui-grid-col-2,ui-grid-col-4,ui-grid-col-2,ui-grid-col-4" 
                                     style="margin: 5px;" styleClass="ui-panelgrid-blank ui-fluid" >
                            <p:outputLabel for="asset" value="Test"/>
                            <h:panelGroup layout="block" style="white-space:nowrap; position: relative;">
                                <p:inputText id="asset" value="Test" disabled="true" style="padding-right: 3.6em !important;" styleClass="BoxSizeBorder"/>
                                <p:commandButton icon="fa fa-search" title="Test" style="position: absolute; right: 0px;">
                                </p:commandButton>
                            </h:panelGroup>

                        </p:panelGrid>
                    </div>
                </div>
            </div>
        </p:panelGrid>
    </p:tab>
    <p:tab title="Today">Tab 2 Content</p:tab>
    <p:tab title="Tomorrow">Tab 3 Content</p:tab>
</p:tabView>

Re: Combining inputText and button

Posted: 08 Feb 2016, 19:07
by pfroy
aragorn wrote:Hi Pfroy,
Thanks for the screenshots and information. Can you please try the following example?

Code: Select all

<p:tabView>
    <p:tab title="Yesterday">
        <p:panelGrid>
            <div class="Card">
                <div class="Container100 Responsive100" style="padding-top: 0px;">
                    <h2 class="BigTopic Opac80">Test</h2>
                    <div class=" Container100">
                        <p:panelGrid columns="2"  layout="grid"
                                     columnClasses="ui-grid-col-2,ui-grid-col-4,ui-grid-col-2,ui-grid-col-4" 
                                     style="margin: 5px;" styleClass="ui-panelgrid-blank ui-fluid" >
                            <p:outputLabel for="asset" value="Test"/>
                            <h:panelGroup layout="block" style="white-space:nowrap; position: relative;">
                                <p:inputText id="asset" value="Test" disabled="true" style="padding-right: 3.6em !important;" styleClass="BoxSizeBorder"/>
                                <p:commandButton icon="fa fa-search" title="Test" style="position: absolute; right: 0px;">
                                </p:commandButton>
                            </h:panelGroup>

                        </p:panelGrid>
                    </div>
                </div>
            </div>
        </p:panelGrid>
    </p:tab>
    <p:tab title="Today">Tab 2 Content</p:tab>
    <p:tab title="Tomorrow">Tab 3 Content</p:tab>
</p:tabView>
Now I'm getting this :)

Image

Re: Combining inputText and button

Posted: 11 Feb 2016, 10:07
by aragorn
Interesting!! Can you please attach full sample page for me?