Strange Appearance / CSS Issue

3 posts, 0 answers
  1. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 29 Jan 2013 Link to this post

    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>
    </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. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 04 Feb 2013 Link to this post

    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.
  3. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 04 Feb 2013 Link to this post

    Boran,

    The thing is, I'm not even sure if the problem is directly related to your TreeView.  It might be, it might not be.  But I don't believe it's related to the population of the TreeView itself.

    This is a low-priority issue for me so let's leave it for now.

    Thank you for getting back to me though!

    Robert
Back to Top