Search jQuery

jQuery Forum

How to set max visible width for text input ?

in jQuery Mobile • 7 years ago

I have an 4 input tags and it displays each on its own line, full width. I expect an short input - five or six characters maximum. I can set the maximum input, but visibly, the box is still drawn full width. Other than putting each input tag inside the column of a table, how else can I force the input box to appear short (50px for example).

I did try CSS of
input.Num4 { width: 50px; text-align: right; }

It limited the input, but the box that was drawn was full length.

All help... greatly appreciated :)

Replies(2)

Omar

Re: How to set max visible width for text input ?

7 years ago

Use data-wrapper-class to add a class to input with custom CSS. However, this option will be removed/deprecated in next major version of jQM.

<div class="ui-content">
<input type="text" data-wrapper-class="px50" placeholder="50px" />
<input type="text" data-wrapper-class="px80" placeholder="80px" />
<input type="text" data-wrapper-class="px100" placeholder="100px" />
</div>

.px50.ui-body-inherit {
width: 50px;
background-color: lightblue;
text-shadow: none;
}
.px80.ui-body-inherit {
width: 80px;
background-color: tomato;
text-shadow: none;
}
.px100.ui-body-inherit {
width: 100px;
background-color: orange;
text-shadow: none;
}

http://jsfiddle.net/Palestinian/jLvqxktb/

watusiware

Re: How to set max visible width for text input ?

7 years ago

When writing CSS overrides for jQuery Mobile, you need to be aware of the fact that it wraps some elements in a wrapper. <input> is one of those.

Always use your desktop-browser's inspection tools to examine the DOM and see what the actual HTML is, then you can device a plan to target the proper elements.

It's useful to examine the pages of the demo site. For example, this page about <input>:

http://demos.jquerymobile.com/1.4.5/textinput/

The input in that page is:

But jQuery Mobile enhances it as:

</div>

The "box that is drawn" is that < div> that wraps the <input> . You need to target both elements. data-wrapperclass gives you a way to add a CSS class to the wrapper element (the < div> ).

If you want to change the appearance of ALL of the inputs in your page, it is easy to do. Just style class ui-input-text . However, wrappers make it difficult to target a specific input. That's why data-wrapperclass exists.

----

But that's not the way JQM form elements are usually laid-out. Inputs conform to their container, so you just need to put your inputs in some sort of container, then you might apply CSS to the container. Certainly, tables aren't the only kind of container - Most HTML elements can be a container.

The fieldcontain widget was designed for exactly this purpose. Is there some reason you do not want to use fieldcontain ? I do find it old-fashioned and bloated. I like using CSS flex-box for laying-out form contents. But tables still work, and there is a trend toward CSS table properties (NOT HTML tables!) to do this sort of layout.

http://www.vanseodesign.com/css/tables/

Any of these 3 approaches work by putting a container around each input. So, they are agnostic about what is inside.

----

I believe the reason that data-wrapper-class is going away in the future is because JQM is continuing it's move toward simplification and eliminating "wrappers" of the HTML, and in the future will no longer wrap <input>. I think the alternative will be to apply some :before or :after CSS to create a node with CSS rather than altering the HTML in the DOM directly.

By putting each input in a wrapper, and then changing the size of the wrapper, it should work with current JQM or future versions.

Top Reply

Response title

Attachments

jQuery Forum

How to set max visible width for text input ?

Replies(2)

Re: How to set max visible width for text input ?

Re: How to set max visible width for text input ?

Statistics

Tags

Actions

Related Posts