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.
Related
I am looking for the next scenario in css where i will be able to check if a style is applied without using any javascript code. Example: If flex: wrap is applied add another style like gap: 5. All this computations should be done using only css. I inspected the documentation but i did not find something similar. Could somebody help?
You can directly use the "gap" css. If there is a flex property used, only then the gap property will work. So no harm in using the gap property by default. Why check for whether flex is used or not.
as far as I understand, to check a style is applied, it must use javascript code,
ex:
const box = document.getElementById('box');
// Check if CSS property is contained in Style
if (box.style.backgroundColor) {
console.log('value is', box.style.backgroundColor);
} else {
console.log('CSS property is not contained in style');
}
Setting the width of select2 using css is overridden by the javascript call of the select2
// javascript
$(function() {
renderSelect("select");
});
# HAML example (Rails)
= select_tag "countries", options_for_select(#countries), class: 'some-ignored-css-class'
related: How to control the width of select tag?
The problem isn't javascript, the issue is that you're not preserving the CSS.
The only way to set the width is to use CSS. Even your JS sets the CSS (.width):
The difference between .css(width) and .width() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). They both set the CSS "style" element
A better way is to either set the CSS on a "container" element, or make sure you're persisting the CSS whenever you call the renderSelect function:
Container
#app/assets/stylesheets/application.css
.container select { width: 50px; }
#app/views...
.container= select_tag "countries", options_for_select(#countries)
Using a container will allow you to set the CSS on the container, removing the need for the class on the select itself. Whilst it means adding a container div, it will give you the most autonomy.
--
JS
The alternative will be to change the renderSelect function to take the class of the current select & append it to the new element.
Since I don't know your renderSelect function, I can only provide that level of suggestion.
A solution is to javascript again
// javascript
$(function() {
renderSelect("select");
$("div#s2id_countries").width(300);
});
# HAML example (Rails)
= select_tag "countries", options_for_select(#countries), class: 'some-ignored-css-class'
ahh, Javascript, the cause of, and solution to, all of life's problems
(any improvements?)
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>
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'
});
}
I have a Skin File that contains:
< asp:TextBox runat="server" CssClass="FixedFont"/>
In the same folder as the Skin file, is the following css file. The Css file contains:
.FixedFont
{
font-family:Courier;
}
Lastly, I have an ASPX page which contains the following control:
<asp:TextBox ID="TextBox1" runat="server">Test</asp:TextBox>
When I view the ASPX page in design mode or run the page, I see that the font-family attribute on the style does effect the textbox control, namely, it is changed to Courier.
However, what I would also like to do is to define a local style on my ASPX page,
.DefaultWidth
{
width: 300px;
}
...and have all of my TextBoxes so that they are the same width.
If I set the CssClass property of TextBox1 to "DefaultWidth"...
<asp:textbox ID="TextBox1" CssClass="DefaultWidth">Hello</asp:TextBox>
...the width of the textbox is changed to 300px but I lose the effect of the skin appling the fix font Courier style.
To get BOTH effects to be applied, the DefaultWidth and the fixed font textbox effect, I have to set the CSSClass property to "DefaultWidth FixedFont", which to me, seems like it defeats the advantage of having the skin in the first place. I guess I expected the effect to be CUMULATIVE, unless I added a style that conflicted with the SKIN, in which case, I expected the local class to be applied over the skin's effect. For example, If I applied a second class, Class2, that also included a font-family specification in addition to other effects, I would expect the font specified in Class2 to override that in the FixedFont style. But that doesn't appear to be what is going on here.
What is the best way to manage such a situation? I imagine very often wanting to have a series of textboxes that all match in width, so I imagine that I will very often want to specify a CssClass on a control in addition to using the effects applied to the control in type in the skin file.
Is the solution NOT to use CSS in the SKIN itself? This seem like it has disadvantages, too, on the side of maintenance.
A secondary problem that I am having is that if I declare a stylesheet with the following class..
.Button
{
background-image: url('/images/button.gif')
}
...and set the CSSClass property of an ASP Button to "Button", I see the image tiled over the button.
However, if I enter the following code in the skin file
it does not find the image.
The images folder is a first-levl folder off of the root of the website.
Any idea why it is not picking up the image. I;'ve tried various other paths, but that is the only one that seems to make sense to me.
By the way, the image is applied in design mode, but it disappears when ity is run.
I don't know if I understood your question but as I'm seeing from here, what you should have to declare this in your "local" style:
textbox.fixedfont { width:200px; }
or simply to every textbox if you are sure about affecting every textbox with the same width, doesn't matter the skin...
textbox { width:200px; }
If this not what you were asking for, please be clearer.