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:
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:
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>
Re: Combining inputText and button
Posted: 05 Feb 2016, 13:29
by mert.sincan
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>
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:
But when I reduce browser window size:
Re: Combining inputText and button
Posted: 08 Feb 2016, 11:36
by mert.sincan
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
Re: Combining inputText and button
Posted: 11 Feb 2016, 10:07
by mert.sincan
Interesting!! Can you please attach full sample page for me?