[Solved] Input Style position problem

[Chris]

I used to have an Telerik Prometheius Input in my page

<div id="home">
    <div id="header">
        <div id="logo"><dnn:logo runat="server" id="dnnLOGO" /></div>
        <div id="search">

<telerik:RadTextBox ID="SearchBox" EnableViewState="true" MaxLength="255" Width="175px" Columns="20" TextMode="SingleLine" AutoCompleteType="Search" CssClass="NormalTextBox" EmptyMessage="Enter text" AutoPostBack="true" runat="server" OnTextChanged="SearchBox_TextChanged" EnableEmbeddedBaseStylesheet="true" EnableEmbeddedSkins="false">
    <ClientEvents OnValueChanged="ValueChanged" />
</telerik:RadTextBox>

<asp:ImageButton ID="imgBtnSearch" CssClass="SkinObject" BorderWidth="0" ImageAlign="Top" AlternateText="Click to search" runat="server" ImageUrl="~/images/btnSearch2.gif" />

        </div>
    </div>
</div>

and have the following style sheet

#home #header{background:url(top_bg.gif) #155698;position:relative;height:80px;overflow:hidden;}
#home #logo{width:242px;height:44px;position:absolute;top:0;left:-33px;}
#home #search{position:absolute;right:0px;bottom:0px;font-size:1px;}
#home #search .NormalTextBox{width:120px;background:#D1EAFA;border-color:#0B3D6F rgb(21, 86, 152) rgb(21, 86, 152) rgb(11, 61, 111);border-style:solid;border-width:1px;font-size:14px;height:24px;margin:4px 0pt 0pt;padding:4px;width:12em;}

With the Prometheus version 2007.03.1218, it works for Telerik TextBox to be positioned to the right of the page.

With the Prometheus version 2007.03.1314, it doesn't work anymore.  The Telerik Textbox now goes to the left of the page.  Style sheet #search "right" attribute doesn't work in this version with value=0px.  When I put in a "left" attribute with some value, it works.  However I really need "right" to be working to make my header looks good.  Please let me know if there is any bug.

Chris

[Dimo]

Hi Chris,

Thank you for sending sample code to help us reproduce the problem.

The issue occurs due to some changes in the rendering that we have made lately. However, we have mode some additional improvements and you will not see this problem with the coming Q3 2007 SP2, due next week.

In the meantime, here is a workaround. Please add this CSS rule to your stylesheet:

#SearchBox { float:none !important; display:inline !important }

After upgrading to SP2, you can remove safely remove it.

By the way, you have repeating width styles for the NormalTextBox CSS class:

#home #search .NormalTextBox{width:120px;background:#D1EAFA;border-color:#0B3D6F rgb(21, 86, 152) rgb(21, 86, 152) rgb(11, 61, 111);border-style:solid;border-width:1px;font-size:14px;height:24px;margin:4px 0pt 0pt;padding:4px;width:12em;}

Let us know if you need additional information or assistance.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Chris]

I exactly add the following into my css file, but still dosen't work.
#SearchBox { float:none !important; display:inline !important }

I am wondering if you are referring SearchBox to the Telerik:RadTextBox ID="SearchBox", wouldn't it a server ID instead of client ID?

Chris

[Dimo]

Hi Chris,

The ID is the Client ID of a hidden textbox, used by the RadTextBox control. Please find attached an ASPX file, which works fine on my PC.

If you are using the RadTextBox in another layout, so that the Client ID is different, you should change it accordingly.

Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Chris]

It still doesn't work for me.  I did several case senerio.  When I put the Telerik Input Box inside the div, it works.  However, in my case, my Telerik Input Box control is in another ascx control.  My page loads that user control at the first load.  So i guess the SearchBox doesn't have a valid id because of the structure i have.  If you can come up any soluation, I appreciate it.

Chris

[Dimo]

Hi Chris,

Please take a look at the following HTML. This is the code rendered by RadInput in your case:

===========

<span style="white-space: nowrap;" class="radInput_Default" id="SearchBox_wrapper">

<input type="text" style="width: 175px;" id="SearchBox_text" size="20" maxlength="255" value="Enter text" class="radEmptyMessageCss_Default NormalTextBox inputCell"/>

<input type="text" value="" name="SearchBox" id="SearchBox" style="border: 0pt none ; margin: -18px 0pt 0pt; padding: 0pt; overflow: hidden; visibility: hidden; display: block; float: right; width: 0pt; height: 0pt;"/>

<input type="hidden" name="SearchBox_ClientState" id="SearchBox_ClientState"/>

</span>

===========

In short, you have 1 <span> element with 3 <input> elements inside. The goal is to feed styles to the second input element, no matter what Client ID it has. If it turns out that this <input> has two different ID's in two different cases, then you can specify the styles to be applied to both Client ID's like this:

#SearchBox ,
#AnotherClientID
{
   float: none !important;
   display: inline !important;
}

You just need to find out what the different ID's are.

I hope this helps. If not, you can open a new support ticket and send us a simple working project, so that we make changes directly to it. Another option is to wait for Service Pack 2, which has this issue fixed. We will release it next week.

Regards,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center