Combining inputText and button

Post Reply
pfroy
Posts: 28
Joined: 09 Sep 2015, 18:20

04 Feb 2016, 20:35

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

pfroy
Posts: 28
Joined: 09 Sep 2015, 18:20

04 Feb 2016, 20:42

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

User avatar
aragorn
Posts: 3175
Joined: 29 Jun 2013, 12:38

05 Feb 2016, 13:29

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

pfroy
Posts: 28
Joined: 09 Sep 2015, 18:20

05 Feb 2016, 21:51

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

User avatar
aragorn
Posts: 3175
Joined: 29 Jun 2013, 12:38

08 Feb 2016, 11:36

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>

pfroy
Posts: 28
Joined: 09 Sep 2015, 18:20

08 Feb 2016, 19:07

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

User avatar
aragorn
Posts: 3175
Joined: 29 Jun 2013, 12:38

11 Feb 2016, 10:07

Interesting!! Can you please attach full sample page for me?

Post Reply

Return to “Volt”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests