p:inputText Wid100 Ronin v2.1.2

Post Reply
peve
Posts: 3
Joined: 21 May 2015, 22:01

24 Nov 2016, 15:53

p:inputText Wid100 Ronin v2.1.2

I'm having trouble making my inputText width 100%
The inputText component is wider than the page (footer)

Below is my html

Code: Select all

<ui:define....
	<div id="index">
		<h:form id="indexForm">
			<div class="ContainerIndent">
			<div class="Container">
			<div class="Container100">
				<p:inputText id="companyCorporateIdentity" styleClass="Wid100" maxlength="11" value="" />
			</div>
			</div>
			</div>
		</h:form>
	</div>
</ui:define>
In the attached image below, to the right (arrow) you can see the inputText is wider than the page.
This hapens for both phone, iPad and desktop

Image

Image url:
https://www.vedin.pp.se:443/photo/share ... 332e504e47

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

25 Nov 2016, 10:00

You can try box-sizing:border-box with Wid100;

Code: Select all

<p:inputText id="companyCorporateIdentity" styleClass="Wid100" style="box-sizing:border-box" maxlength="11" value="" />
If you want to do width 100% of components, please use ui-fluid in parent html tag;

Code: Select all

<ui:define....
   <div id="index" class="ui-fluid">
      <h:form id="indexForm">
         <div class="ContainerIndent">
         <div class="Container">
         <div class="Container100">
            <p:inputText id="companyCorporateIdentity" maxlength="11" value="" />
         </div>
         </div>
         </div>
      </h:form>
   </div>
</ui:define>

peve
Posts: 3
Joined: 21 May 2015, 22:01

25 Nov 2016, 16:31

Thank you!

Both suggested solutions are working! :)

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

25 Nov 2016, 16:36

Glad to hear, thanks for the update!

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest