This is a migrated thread and some comments may be shown as answers.

How can I change the input width size default to 125px on some controls

3 Answers 539 Views
Input
This is a migrated thread and some comments may be shown as answers.
Joao Araujo
Top achievements
Rank 1
Joao Araujo asked on 06 Dec 2009, 12:21 AM
Hello,


    I am using VS 2008, Telerik ASP.NET 2009.2 .
  
    I want to know how to get rid of the style="width:125px"  value.

    I have a web site that has its own skin and layouts.

    I want to use all the features in my own skin, with imply size limits to input field.
    Unfortunately, when I try to force the size of the inputs with a css class. Telerik adds
    a   'Style="width:125" ' after the class, which forces the field size to be based on this parameters.
   
    That happens basically in all types of input, some with different sizes. How can I get rid of this
    value and force telerik to use only the values on the classes I am using.

     I know I can add a style to the skin, replacing the default behavior. That  hinders the benefit of
     having several class with different sizes on the classes, allowing me to have different standardized fields.
     here is an example
<div>
<span id="ctl00_Body_SalesBrokerCommission_wrapper" class="RadInput RadInput_Telerik" style="white-space: nowrap;">
<input id="ctl00_Body_SalesBrokerCommission_text" class="riTextBox riEnabled large" type="text" style="width: 125px;" tabindex="7" name="ctl00_Body_SalesBrokerCommission_text" value="5.00 %"/>
<input id="ctl00_Body_SalesBrokerCommission" class="rdfd_" type="text" value="5" style="border: 0pt none ; margin: -18px 0pt 0pt; padding: 0pt; overflow: hidden; visibility: hidden; width: 1px; height: 1px;"/>
<input id="ctl00_Body_SalesBrokerCommission_Value" class="rdfd_" type="text" value="5" name="ctl00$Body$SalesBrokerCommission" style="border: 0pt none ; margin: -18px 0pt 0pt; padding: 0pt; overflow: hidden; visibility: hidden; width: 1px; height: 1px;"/>
<input id="ctl00_Body_SalesBrokerCommission_ClientState" type="hidden" name="ctl00_Body_SalesBrokerCommission_ClientState" autocomplete="off"/>
</span>


      Thanks,

Joao,  
 

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 07 Dec 2009, 08:44 AM
Hello Joao,

The easiest option is to use !important in your custom CSS styles, so that you override the control's inline width style:

.large
{
      width: 300px  !important ;
}

An alternative (but more complex) solution would be to subscribe to the RadInput control's OnLoad client event and remove the inline width with Javascript:


<telerik:RadTextBox ID="RadTextBox1" runat="server" ShouldResetWidthInPixels="false" CssClass="large">
    <ClientEvents OnLoad="MyLoad" />
</telerik:RadTextBox>

<script type="text/javascript">

function MyLoad(sender, args)
{
    sender._originalTextBoxCssText = "";
    sender._textBoxElement.style.width = "";
}

</script>


Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Joao Araujo
Top achievements
Rank 1
answered on 07 Dec 2009, 08:17 PM
Hello,

    Thanks for the above answer. It helped me out.

    Now , I have a new challenge.  How can I get rid of the "150px"  width below.

<div id="ctl00_Body_TicketDatePicker_wrapper" class="RadPicker RadPicker_Telerik " style="height: 20px; display: inline; width: 100%;" shouldresetwidthinpixels="false">
<input id="ctl00_Body_TicketDatePicker" class="rdfd_" type="text" value="2009-12-07" name="ctl00$Body$TicketDatePicker" style="border: 0pt none ; margin: 0pt 0pt -1px; padding: 0pt; overflow: hidden; visibility: hidden; display: block; float: right; width: 1px; height: 1px;"/>
<table class="rcTable" cellspacing="0" style="width: 150px;">

I tried all the possible properties that I know without success... Now , I am kicking out to all directions .... For example:
<Telerik:RadDatePicker ShouldResetWidthInPixels="false"
    Runat="server" Skin="Telerik" Style="Display:inline;width:100%"  >
    <DateInput Width="100%" Style="width:90%"></DateInput>
    <Calendar Width="100%" Style="width:100%"></Calendar>
</Telerik:RadDatePicker>



Thanks a lot,


Joao,
0
Dimo
Telerik team
answered on 08 Dec 2009, 09:08 AM
Hello Joao Araujo,

Set a CssClass to the RadDatePicker control and then set a width of your preference:

.MyClass  .rcTable
{
         width : ....  !important ;
}

By the way, ShouldResetWidthInPixels is a property of the picker's DateInput, not of the picker itself.

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Tags
Input
Asked by
Joao Araujo
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Joao Araujo
Top achievements
Rank 1
Share this question
or