How to change size of text input but not textarea in jquery mobile


Tags: jquery,html,css,jquery-mobile

Problem :

There are many answers here about how to change various properties of jQuery text input fields, but none of them that I found address the difference, if any, between regular text input and textarea

I figured out how to change CSS properties of a text input field, with the class

.ui-input-text{
    height:42px !important;
    background: #AB63CC !important;
}

That's what the answers on this site have told me. And it works flawlessly, all text input fields are now 42px high and a lovely lilac color.

Unfortunately, all text input variants get a 42px override, this includes textareas. So when I add that CSS, while all text input fields line up perfectly with menu widgets, my textareas can no longer be resized, and I can't override that because of the !important tag.

Even custom classes don't work. so if I make, for example:

.textinput-foo .ui-input-text{
    height:42px !important;
}

in my CSS, then

<label for="example" id="my-fancy-textinput" class="ui-hidden-accessible">LoremIpsum</label>
  <input name="example" id="example" value="" placeholder="LoremIpsum" type="text" class="textinput-foo">

in my HTML, in an attempt to allow only certain fields to be resized while others (like textareas) retain their default properties, nothing happens. So I tried:

.ui-input-text .textinput-foo{
    height:42px !important;
}

in case it might be affixing the default class instead of appending it. Still no luck. Custom classes for the textarea don't work any better.
Textarea CSS:

.ui-input-text .textarea-foo{
    height:100px !important;
}

Textarea HTML:

<label for="example-2" id="my-fancy-textarea" class="ui-hidden-accessible">More</label>
<textarea cols="40" rows="8" name="example-2" id="example-2" placeholder="Type stuff plox" class="textarea-foo"></textarea>

I figured that if I couldn't make the textarea resizable, then maybe I could at least make it 4 lines so it shouldn't need to be resized. Alas, still nothing.

Is there a separate text input class that doesn't apply to textarea or vice versa, because I haven't been able to find one anywhere, not even in the official APIs



Solution :

Ok, it sounds like you're using a specific jQuery Textinput widget (http://api.jquerymobile.com/textinput/) due to the use of "ui-input-text".

To apply these styles to only the text inputs, and NOT text areas, try:

div.ui-input-text { height: 42px !important }

This says only apply this style to div's that also have the class, "ui-input-text".

If you were to inspect the source generated by the input text widget you'd see:

<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
  <input type="tel" name="tel" id="tel" value="">
</div>

But, when used on a text area generates:

<textarea name="textarea" id="textarea-a" class="ui-input-text ui-shadow-inset ui-body-inherit ui-corner-all ui-textinput-autogrow" style="height: 96px;">
</textarea>

Alternatively, you could just specify a separate CSS definition to override the .ui-input-text for text areas:

.ui-input-text {
    height:42px !important;
}

textarea.ui-input-text {
    height:100px !important;
}

    CSS Howto..

    How come my divs are jumping around during a transition?

    How to position div element right below and left-aligned to another div

    How to use Border Radius CSS on Internet Explorer

    How to position contents according to zoom level?

    How to set the box width same as the screen width?

    How to force the horizontal scroll bar to appear?

    How to remove a class as each image is loaded

    How to get different height html divs to float up

    jQuery - How to revert css changes when using slideToggle()?

    How to select a certain element in CSS by numerical position

    Fullpage.js: How to add css class “active” to slide anchor

    css: how to surround an image with two other images vertically centered around the first one?

    How to make outer columns same height with nested bootstrap grids

    How to use font-family with same name?

    How to get css or java class for specific part of code

    How to style Bootstrap menu like a V? [closed]

    CSS triangle how to remove white space on the right

    div shown with jquery is cropped

    How to Add Class to Bootstrap Thumbnails on Slider Change

    How do I get a div-based dropdown to gain a scrollbar instead of extend past the end of the screen using JavaScript and CSS? Struts are also involved

    How can I position two to always be side by side

    How do i resize an image based on its div width? [duplicate]

    Django + Mac osx how to use less css?

    How can I add CSS to a form in Rails when the form is rendered in two different locations?

    How to compile or convert sass / scss to css with node-sass (no Ruby)?

    Can't figure out how to set color for specific div's in the loop

    How can you resize li labels without resorting to coupling or absolute sizes?

    css: how to inherit whole class

    How to Make CSS Property Apply to Everything Within Bootstrap Navbar?

    CSS: How to create buttons with reflected shine similar to iOS icons?