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

Strange Appearance / CSS Issue

2 Answers 85 Views

General Discussions

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

Robert asked on 30 Jan 2013, 02:50 AM

1-Normal-Appearance.JPG

2-Strange-Appearance.JPG

Please take a look at the first screenshot I've attached. That's the normal appearance of an editor I've built with the RadTreeView and some other standard controls. Everything works fine except that testing has revealed one unacceptable peculiarity.

If the browser window is made quite narrow and then a fairly wide Description is chosen in the treeview (and displayed in the accompanying textbox) then everything suddenly shifts over to the left and the editor becomes unusable until the browser is refreshed.

Here's the pertinent layout code:

<div class="content1" style="margin:40px">

<asp:UpdateProgress ID="UpdateProgress1" runat="server" Visible="true">

<ProgressTemplate>

<div id="progress" class="progress">

<img src="../Images/Progress/indicator_big.gif" />

<br /><br />

Please Wait

</div>

</ProgressTemplate>

</asp:UpdateProgress>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:HiddenField ID="scrollOkay" runat="server" /> <%-- If set true then the tree's scrollIntoView function will be used. --%>

<asp:Panel ID="panelPath" runat="server" Width="720px" style="padding:5px">

Path: <asp:Label ID="labelPath" runat="server" Text="" style="font-weight:bold" />

</asp:Panel>

<div style="height:15px"></div>

<asp:Panel ID="panelTree" runat="server" Width="350" Height="500" BorderColor="DarkGray"

BorderStyle="Groove" BorderWidth="1" style="float:left">

<telerik:RadTreeView ID="treeViewMain" runat="server"

ExpandAnimation-Duration="5"

ShowLineImages="true"

OnNodeExpand="treeViewMain_NodeExpand"

OnNodeClick="treeViewMain_NodeClick"

MultipleSelect="false"

AllowNodeEditing="false"

EnableDragAndDrop="true"

OnNodeDrop="treeViewMain_NodeDrop"

Height="500px" Width="350px"

style="background-color:#F0F8FF"

/>

</asp:Panel>

<div style="width:30px; float:left"></div>

<asp:Panel ID="panelFields" runat="server" Width="340" Enabled="false" BorderColor="DarkGray" BorderStyle="Solid" BorderWidth="1" style="float:left; padding:10px">

<asp:Table ID="tableFields" runat="server" CellSpacing="5">

<asp:TableRow>

<asp:TableCell HorizontalAlign="Right" style="padding-right:7px" Text="Type:" />

<asp:TableCell>

<asp:DropDownList ID="dropDownListType" runat="server" Width="240px" AutoPostBack="true"

OnSelectedIndexChanged="dropDownListType_SelectedIndexChanged" />

</asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell HorizontalAlign="Right" style="padding-right:7px" Text="SubType:" />

<asp:TableCell>

<asp:DropDownList ID="dropDownListSubType" runat="server" Width="240px" AutoPostBack="true"

OnSelectedIndexChanged="dropDownListSubType_SelectedIndexChanged" />

</asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell HorizontalAlign="Right" style="padding-right:7px" Text="Description:" />

<asp:TableCell>

<asp:TextBox ID="textBoxDescription" runat="server" Width="236px" AutoPostBack="true" OnTextChanged="textBoxDescription_TextChanged" />

</asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell HorizontalAlign="Right" style="padding-right:7px" Text="Equip No.:" />

<asp:TableCell>

<asp:TextBox ID="textBoxEquipNo" runat="server" Width="50" style="text-align:right; padding-right:1px" AutoPostBack="true"

OnTextChanged="textBoxEquipNo_TextChanged" />

</asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell HorizontalAlign="Right" style="padding-right:7px" Text="MIMS:" />

<asp:TableCell>

<asp:TextBox ID="textBoxMims" runat="server" Width="50" style="text-align:right; padding-right:1px" AutoPostBack="true"

OnTextChanged="textBoxMims_TextChanged" />

</asp:TableCell>

</asp:TableRow>

<asp:TableRow>

<asp:TableCell HorizontalAlign="Right" style="padding-right:7px" Text="Quantity:" />

<asp:TableCell>

<asp:TextBox ID="textBoxQuantity" runat="server" Width="50" style="text-align:right; padding-right:1px" AutoPostBack="true"

OnTextChanged="textBoxQuantity_TextChanged" />

</asp:TableCell>

</asp:TableRow>

</asp:Table>

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

<div style="position:absolute; left:275px; top:762px; font-size:12px">

<asp:LinkButton ID="linkButtonEquipSubtypeEditor" runat="server" Text="Equipment Subtypes" PostBackUrl="~/Editors/equipSubtypeEditor.aspx" style="color:Blue" />

</div>

I've tried several different approaches to resolving this problem. I really don't understand why the RadTreeView shifts to the left just because a string in a TextBox is long. Or to look at it another way, why does a Panel control, which is the parent of the the TextBox shift over to the left just because a string in that TextBox is long?

Any suggestions would be much appreciated!

Robert

2 Answers, 1 is accepted

answered on 04 Feb 2013, 08:43 AM

Hello Robert,

Thank you for contacting Telerik Support.

Could you please share your specific implementation of populating the Description text box field. I tried to reproduce that issue by implementing the following expression in the RadTreeView NodeClick server-side event handler, but I could not replicate that shifting behavior.
//code behind

protected void treeViewMain_NodeClick(object sender, RadTreeNodeEventArgs e)

{

textBoxDescription.Text = e.Node.Text;

}

Any additional information about your scenario would be highly appreciated in order to reproduce that issue locally and be more helpful.

Regards,
Boyan Dimitrov
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.