I would like to dynamically generate textareas, with JQuery Mobile, with varying numbers of rows. I was intending on using knockout for this, data-bind to the rows attribute.
E.g. here: http://jsfiddle.net/j7b9A/2/
<label for="textarea-1">5 rows:</label>
<textarea rows="5" name="textarea-1" id="textarea-1"></textarea>
<label for="textarea-2">10 rows:</label>
<textarea rows="10" name="textarea-2" id="textarea-2"></textarea>
However, JQuery Mobile seems to ignore the rows attribute, which is well-documented: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea, and is even included in JQuery Mobile's own documentation: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/textinputs/index.html#Textarea.
A comment here states that setting the height and width overrides the rows attribute: https://stackoverflow.com/a/7194692/1061602. It seems that it is because JQuery Mobile is doing a transition when the textarea expands. So is rows attribute always being completely overridden?
Another similar question is here: How to make text area to be height of 10 rows fixed?, but this doesn't help me as I don't want to fix the height of all textareas, I would like them to vary, as they can normally using the rows attribute.
Also what I have noticed, which I can't explain, is that in my own code, a rogue style="height: 184px;" is added to one of my textareas, but not another. The other just uses the standard style of 50px, as highlighted in this answer: jQuery Mobile and textarea rows - this would seem to indicate there is something else going on, but I can't reproduce this yet in a simple fiddle.
I've had a quick look at the JQuery Mobile source but I can't see the rows attribute being used at all?
What would be the best way of specifying a range of row heights for a range of bound JQuery Mobile textareas?
all you need is... add this
textarea.ui-input-text { height: inherit !important}
jQM enhances textarea by adding different classes for responsiveness and styling purposes. The fastest and easiest way to maintain rows height is by overriding jQM class.
Demo
CSS solution:
.custom_class {
height: auto !important; /* !important is used to force override. */
}
JS solution - set height after textarea is enhanced.
setTimeout(function () {
$('textarea').css({
'height': 'auto'
});
}, 0);
JQuery Mobile is intended to be responsive, so by design it's not going to take up space until you need it. If you add data to the textarea, either via input or via code, you can see that it grows as needed.
If you want to override that size when it's empty, you have two options:
Use the method Omar mentioned, which is to turn off the JQM role, as you did in the JSFiddle example.
The other is to override the default class, as seen in this answer.
I had the same problem and I finally found a solution. you can set ' data-autogrow="false" ' in textarea element, after that you can set rows attribute or height in css. it does works in jquery mobile 1.4.0+
Text area content auto scroll when more lines. max-height as you wish.
Add css
textarea.size{max-height:30px;}
<textarea name="textarea-1" id="textarea-1" style="max-height:30px;">
You can use this : data-autogrow="false"
like this :
<textarea rows="10" name="textarea-2" id="textarea-2" data-autogrow="false"></textarea>
Related
I am trying to set the minimum width of the angular UI bootstrap progressbar. I checked the docs and they do not mention how to do this. I know for the 'regular' bootstrap you can use something like style="min-width: 10em;". However this only works if you wrap it in the standard progress bootstrap divs like so:
<div class="progress">
<uib-progressbar class="progress-striped active progress-bar" value="value" style="min-width: 10em;">
<span> text </span></uib-progressbar>
</div>
But this displays a progressbar bar without the 'active' animation since regular bootstrap does not support this. When I try it like so it does not set the min-width property
<uib-progressbar class="progress-striped active progress-bar"value="value" style="min-width: 10em;">
<span> text </span>
</uib-progressbar>
edit: I overlooked the animation section in the 'regular' bootstrap docs. I would however like to use the UI bootstrap progressbar if possible.
Regular Bootstrap supports animated progress bars.
Are you sure that you correctly imported Boostrap files? I think you might have included only the CSS file but not the JS. Take a look at the basic template to see which files you should include.
Take also a look at the uib-progressbar documentation. The code snippet you wrote seems to be correct. As I said, I think the reason for this problem is that you didn't include the JS file for Bootstrap.
EDIT: Oh, ui-bootstrap apparently doesn't need Bootstrap's JS, you're right.
Regarding the min-width part of your question: I noticed that you added the progress-bar class to the <uib-progressbar> element. According to the documentation, the progress-bar class should not be used (it will be added by ui-bootstrap to the <div> element that will be rendered inside <uib-progressbar>, and you can easily verify this by inspecting the progress bar width devtools).
Thus, the min-width property is to be applied to the internal <div>. However, since the rendering is managed by angular, the only way to change it is to add a CSS rule like this:
.setminwidth .progress-bar {
min-width: 20em;
}
And then add the new setminwidth class to the external <uib-element> like this:
<uib-progressbar class="progress-striped setminwidth" value="22" type="warning">22%</uib-progressbar>
I tested this but it doesn't seem to work. I think it's because min-width: 0; is hardcoded in the template, and it gets reset everytime ui-bootstrap re-renders the element.
I tried adding !important to the CSS rule, to avoid being overridden, but it doesn't work either.
I guess at this point you should consider why you need to add this min-width property, since ui-bootstrap likes to override it. Could it be because you don't want the progress bar to be "too empty" when the % is low? If that's the case, I think you should look up the changes recently introduced by Bootstrap: it seems that now they add a special min-width for 0%, 1% and 2%.
UPD: The Bootstrap folks apparently changed their mind and reverted the special min-width value. At this point, I think that ui-bootstrap should follow along and remove the hardcoded min-width: 0; as it's not needed anymore. I just sent a pull-request to them. If they merge it, you will be able to use the CSS I posted above.
How do you set the height of the Angular UI-Select widget when an item is selected. I have a custom template for the selected item that includes an image and stuff and it gets cut-off.
Is there an option somewhere? I feel like it should expand to fit the template.
I just fixed this by using the css like
.ui-select-choices .item {
height: auto !important
}
and using the !important css function because ui-select has a lot of inline styles and it gets very tedious to fix. If you are using your own template, try not to use the .item class and use something unique like .select-choice-item Next time you might want to provide the structure in the template you're using so we can answer you with a more specific solution.
I am working with Magento which doesn't allow for classes on images in the visual editor; so I want to program it to automatically apply right margin to an image if the image has the property float:left ... and visa versa. Is this possible without using javascript?
If it's part of the style attribute, then sure: [style*='float:left']
No, there isn't a selector based on CSS properties, apart from scanning selecting on the style attribute - after all you set them with CSS.
The easiest way would be to set the margin-right property at the same place where you set the float property.
See also:
http://www.w3.org/TR/selectors/#selectors
http://dev.w3.org/csswg/selectors4/#overview
Assuming all of your styles are placed in an external stylesheet the answer's 'not without javascript'.
If, however, you're placing that specific style on the html (inline styles, that is) then what Kolink suggested does work.
Anyway, using javascript(jQuery) here's a possible solution: http://jsfiddle.net/joplomacedo/TECWM/
If you can't see the fiddle, it goes something like this:
if (el.css('float') === 'left') {
el.css({
'margin-left': '50px'
});
}
When using Telerik controls if e.g. I don't specify a width for a textbox, telerik adds the inline attribute
style="width: 125px"
Is there a way to stop telerik adding default values like this?
(NOTE: This isn't a default of Removing all CSS from telerik controls, which is asking how to remove default stylesheets rather than inline styles)
Here are some solutions from Telerik:
How to Remove the Default Width of RadInput TextBoxes or Set it with External CSS
I'm not sure, but you could try searching through the stylesheet(s) to find a default width specification for inputs. aside from that, you might be able to override the attribute and set the width using !important.
<telerik:RadTextBox ID="RadTextBox1" runat="server" style="width:200px !important;" ... >
EDIT
Try adding a style like this to your page or stylesheet. This might not be 100%, but it should be close:
.RadInput .RadInput_Sunset { /* replace "_Sunset" with whatever skin you're using */
width: auto;
}
EDIT
If you only need to style one control, try this:
#ClientID_OF_INPUT {
width: auto !important;
}
Here's a my eventual implementation, which works for RadInput and RadComboBox. The function needs adapting for each control as telerik put styles in varying places.
function removeWidths (sender) {
//remove only the width style from the inline style collection
sender._originalTextBoxCssText && (sender._originalTextBoxCssText = sender._originalTextBoxCssText.replace(/(^|[^-])width\s?:\s?[\w|\.]+\s?;/i, "$1"));
sender.updateCssClass && sender.updateCssClass();
if(sender.constructor.__typeName == "Telerik.Web.UI.RadComboBox") {
$(sender._inputDomElement).closest(".RadComboBox").removeAttr("style");
}
},
Had the same issue and I'm not a particular fan of !important overrides or JavaScript solutions.
Digging into RadInputControl I could see that Unit.Pixel(160) is the default Width but only if the RenderMode of the control is not Lightweight, so switching to Lightweight removes the explicit inline width, otherwise if that's not an option for the RadTextbox I found that if you set the Columns property to 0 it only outputs
style="width:;"
This doesn't look valid to me, so I'm guessing that most browsers will ignore this, but I haven't tested it extensively myself.
The title pretty much says what I'm looking to do, but to elaborate a little more, I want to apply some CSS to a class called prochart-colitem for users who do not have javascript enabled.
The reason? I am using percentages for column widths to equal 100%, then using javascript to subtract 2 pixels from each div for a border that is also added.
If there's no javascript enabled, the columns + borders equal more than 100% of the parent div, and I need to subtract a couple pixels from a class to make it fit in the parent div to no-js users.
Any easy way to do this? I tried <noscript> with <style> inside of that, no luck.
One way to approach it is by always adding a CSS class to the elements you wish to have a specific style and then, once loaded, run some JavaScript to remove those classes from the elements with that class.
As an example (I use jQuery here for simplicity's sake but this can obviously be done without a JS library):
$(document).ready(function()
{
$(".nonJsClass").each(function()
{
$(this).removeClass("nonJsClass");
}
}
Where the 'nonJsClass' has CSS rules that will now only apply if the user doesn't have JS enabled.
You could add a class to the body tag, that triggers your desired CSS when JS is not enabled, then right after the body tag, remove it with JS.
Thus users with JS support won't see the effects of the special class.
Including a stylesheet inside a noscript tag was not possible before HTML5, but it is now (as long as you do it in the "head" of the document).
http://adapt.960.gs/
In the case of JavaScript being purposefully disabled or unavailable, stylesheet defaults can be served via , which is perfectly valid in the for HTML5.
scunliffe's answer is good. An alternate way would be to write a CSS style that only displays if JavaScript is enabled and only targets the div you want, using class chaining:
.prochart-colitem.js-enabled {
/* your JS-specific styles */
}
You can then use jQuery, for example, to add that additional class:
$(document).ready(function() {
$('.prochart-colitem').addClass('js-enabled');
});