CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
user281058
user281058

Reputation: 151

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

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

Upvotes: 0

Views: 3028

Answers (2)

ezanker
ezanker

Reputation: 24738

As an alternative, jQM provides a data-attribute for inputs called data-wrapper-class (api doc: http://api.jquerymobile.com/textinput/#option-wrapperClass). This allows you to apply a class directly to the outermost wrapping DIV that jQM adds when enhancing the textbox.

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

.inputWrapper{
    height:82px;
}

Here is a DEMO

Upvotes: 0

joeltine
joeltine

Reputation: 1620

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;
}

Upvotes: 1

Related Questions