1

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)

Community
  • 1
  • 1
wheresrhys
  • 22,558
  • 19
  • 94
  • 162
  • Are you saying on the source view, when you create a textbox it adds in "style="width: 125px"". I was just checking mine and while the default width is 125px, it does not appear in the inline: – KreepN Nov 01 '11 at 15:09
  • That's exactly my problem. Do you have any special config set up for your app - even when I pare back teh attributes on my input to the bare minimum it still adds the style attribute – wheresrhys Nov 01 '11 at 15:27
  • You know, It's really hard to guess as to why that would be the case. I looked, but as far as I know options for Telerik are VERY limited from within VS. I'm using the latest release, and assume you are too, but if not, that may be something they changed sometime as of late. – KreepN Nov 01 '11 at 16:03

4 Answers4

0

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.

Shaun
  • 1,293
  • 16
  • 19
0

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;
}
James Johnson
  • 45,496
  • 8
  • 73
  • 110
  • this is kinda the opposite of what I want - I need the element to have no inline width styles at all as the width will be set dynamically based on classnames applied to the tag when the user resizes the window – wheresrhys Nov 01 '11 at 15:21
  • your edit won't work either because inline styles override all styles that don't ahve the declaration !important. .RadInput .RadInput_Sunset { width: auto !important; } woudl work, but only at the expense of breaking CSS stylesheets' normally very useful inheritance rules. – wheresrhys Nov 02 '11 at 14:15
0

Here are some solutions from Telerik:

How to Remove the Default Width of RadInput TextBoxes or Set it with External CSS

rick schott
  • 21,012
  • 5
  • 52
  • 81
0

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");
    }
},
wheresrhys
  • 22,558
  • 19
  • 94
  • 162