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
Combining inputText and button
Now I'm doing this...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
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>
Primefaces 12.0
Jakarta Faces 4.0
Oracle JDK 17
Payara 6.2023.6
Jakarta EE 10.0
Jakarta Faces 4.0
Oracle JDK 17
Payara 6.2023.6
Jakarta EE 10.0
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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>
Github Profile: https://github.com/mertsincan
Hi aragorn,
Almosts, I had to make some tweaking to your solution maybe because I forogt to post the code surrounding those components.
Now it looks like this:
But when I reduce browser window size:
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>
But when I reduce browser window size:
Primefaces 12.0
Jakarta Faces 4.0
Oracle JDK 17
Payara 6.2023.6
Jakarta EE 10.0
Jakarta Faces 4.0
Oracle JDK 17
Payara 6.2023.6
Jakarta EE 10.0
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi Pfroy,
Thanks for the screenshots and information. Can you please try the following example?
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>
Github Profile: https://github.com/mertsincan
Now I'm getting thisaragorn 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>
Primefaces 12.0
Jakarta Faces 4.0
Oracle JDK 17
Payara 6.2023.6
Jakarta EE 10.0
Jakarta Faces 4.0
Oracle JDK 17
Payara 6.2023.6
Jakarta EE 10.0
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Interesting!! Can you please attach full sample page for me?
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 2 guests