• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 294
  • Last Modified:

how to change position of web control based on the size of another control in ASP.NET?

Hello,
In a C# ASP.NET 1.1 application, I have been designing web pages by dragging controls from the toolbox.  On one page I have a datagrid whose height could vary depending on the data it contains. I need to show a label below the datagrid. The position of this label needs to be dynamic. It should change depending on the height of the datagrid so that the label could always appear below the datagrid.
What changes will I have to make to the page? Do I need to switch to relative positioning?
Please help.
Thanks.
0
engg
Asked:
engg
  • 5
  • 5
1 Solution
 
samtran0331Commented:
>>Do I need to switch to relative positioning?
Yes, it would make things much easier.
With relative positioning, things "flow"...
so you can do
<datagrid.../>
<br />
<label../>

and that would always put your label below the datagrid regarless of the grid's height.
0
 
samtran0331Commented:
if your page is already using fixed positions, you'll have to go through and make sure and delete the style tags all controls that have that include positioning coordinates and "absolute" positioning in the style tags...
0
 
enggAuthor Commented:
Thanks.
Why do I have to make the position of ALL controls relative? Can't I just make the position of the label relative with respect to the datagrid?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
samtran0331Commented:
Mixing the absolute and relative positioning can have some weird results...but I guess it depends on your layout...

I was just thinking that since your datagrid can be of various heights, you might get some weird overlaps with other absolute-positioned controls..

Just play with it and see...but from a "Web Designer" standpoint...I don't know many that would recommend mixing the absolute and relative...
0
 
enggAuthor Commented:
Thank you. I have started reading about absolute and relative positioning and it's confusing at this point. Here's the HTML for the two controls - datagrid and label (I have removed other irrelevant properties here). What changes do I need in this HTML so the label always appears below the datagrid no matter what the height of the datagrid is? and should I change HTML for other absolute-positioned controls as well even if they are not causing any problem in the browser? (because there is nothing below and to the right of the datagrid except the label). Thanks.

<body MS_POSITIONING="GridLayout">
      <form id="Form1" method="post" runat="server">
            <asp:datagrid id="dg" style="Z-INDEX: 104; LEFT: 8px; POSITION: absolute; TOP: 56px" runat="server"
                  Font-Size="XX-Small" BorderColor="#999999" BorderStyle="None" BorderWidth="1px"                                                                                                                                                                                         BackColor="White" CellPadding="3"  GridLines="Vertical" ShowFooter="True">.......................
            </asp:datagrid>
          <asp:Label id="namesLabel" style="Z-INDEX: 108; LEFT: 16px; POSITION: absolute; TOP: 672px"
                runat="server">
            </asp:Label>
      </form>
</body>
0
 
samtran0331Commented:
try the below...as far as the other controls not included in your sample, you just have to test it and see...


<body MS_POSITIONING="GridLayout">
      <form id="Form1" method="post" runat="server">
            <asp:datagrid id="dg" runat="server"
                  Font-Size="XX-Small" BorderColor="#999999" BorderStyle="None" BorderWidth="1px"                                                                                                                                                                                         BackColor="White" CellPadding="3"  GridLines="Vertical" ShowFooter="True">.......................
            </asp:datagrid><br />
          <asp:Label id="namesLabel" runat="server">
            </asp:Label>
      </form>
</body>
0
 
enggAuthor Commented:
Thanks. The datagrid appears at the top left corner and the label appears below it. And these 2 controls overlap all other controls (they are absolute-positioned). I have given the entire code. Could you please see what major changes I need to do to get rid of the overlap problem? Thanks.

<%@ Page language="c#" Codebehind="fw.aspx.cs" AutoEventWireup="false" Inherits="MRS.XL.fw" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
      <HEAD>
            <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
            <meta content="C#" name="CODE_LANGUAGE">
                <meta content="JavaScript" name="vs_defaultClientScript">
             <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
            <LINK href="../css/style.css" type="text/css" rel="Stylesheet">
       </HEAD>
      <body MS_POSITIONING="GridLayout">
            <form id="Form1" method="post" runat="server">
                  <asp:label id="Label1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server" Font-Bold="True" Font-Size="Small">FWP Daily Downloads</asp:label>

                        <asp:dropdownlist id="monthyearDDL" style="Z-INDEX: 102; LEFT: 208px; POSITION: absolute; TOP: 8px" runat="server"></asp:dropdownlist>

                        <asp:button id="exitButton" style="Z-INDEX: 103; LEFT: 800px; POSITION: absolute; TOP: 8px"             runat="server" Text="Exit"></asp:button>

                        <asp:datagrid id="dg" runat="server" Font-Size="XX-Small" BorderColor="#999999" BorderStyle="None" BorderWidth="1px" BackColor="White" CellPadding="3" AutoGenerateColumns="False"
GridLines="Vertical" ShowFooter="True"> ...... </asp:datagrid>

                        <asp:checkboxlist id="dltype" style="Z-INDEX: 105; LEFT: 352px; POSITION: absolute; TOP: 8px" runat="server" RepeatDirection="Horizontal" Width="248px" CellPadding="0" CellSpacing="0"> .....       </asp:checkboxlist>

                        <asp:button id="goButton" style="Z-INDEX: 106; LEFT: 728px; POSITION: absolute; TOP: 8px" runat="server" Text="Go"></asp:button>
                  
                       <HR style="Z-INDEX: 107; LEFT: 8px; POSITION: absolute; TOP: 40px" width="100%" color="#000000" SIZE="1">

                       <asp:Label id="namesLabel" runat="server"></asp:Label>
                  
                       <asp:CheckBox id="untrackedCB" style="Z-INDEX: 109; LEFT: 616px; POSITION: absolute; TOP: 8px" runat="server" Text="untrackable"></asp:CheckBox>

                 </form>
         </body>
</HTML>
0
 
enggAuthor Commented:
If I remove style tags of all absolute-positioned controls and add something like
style="LEFT:5px; POSITION:relative; TOP:10px" to each of them, I can get rid of the overlap. But it's tedious to set the no. of top, left pixels for each control and then see in the designer how it looks. Is there an easier approach? Thanks.
0
 
samtran0331Commented:
>>Is there an easier approach?
Ideally, you should look into using CSS...atleast that way you can create one css style and apply it to all the controls using the CssClass attribute.
At least that way, you would need to only change the style in one place.
0
 
enggAuthor Commented:
Ok. Thanks. But would I still have to set left and top pixels for each control on the HTML page and see how it looks in the design view? because even though a particular type of control (textbox, label etc.) can have the same css style throughout the application, it will most likely have different position on different pages.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now