Dynamic Sizing Based Upon the Parent Element's Width

Discussion in 'ASP .Net Web Controls' started by Frank Buchan, Feb 27, 2005.

  1. Frank Buchan

    Frank Buchan Guest

    My apologies for the double post, but I was unsure which of the two groups
    would be best suited for this question.

    This is a non-critical problem of sorts, because it is a secondary display
    issue. Some background helps.

    I have an Enterprise website application written in ASP.NET that uses a
    common sort of layout on its data entry and editing pages. The standard
    display generally has a series of rows that contain two columns with the
    label to the left, and textbox (or other controls) to the right. The layout
    is simple to achieve using a TABLE element, and easy to visualize.

    <table width="100%">
    <tr>
    <td width="15%" align="right">Label:</td>
    <td>TEXTBOX CONTROL HERE</td>
    </tr>
    etc...
    </table>

    For all these constructs the class tag is actually used to carry the
    formatting, etc. (It was easier to display above without explaining the CSS
    class styles separately.) The TEXTBOX control itself expands to the width of
    the second cell (100% of its parent). While it works, and is pretty simple,
    it is a bugger to maintain when there are many fields to deal with.

    What I thought was that it would be much easier to maintain the interface
    elements if I created a custom version of the standard .NET web forms
    textbox. I did that, and it worked fine. Basically, it outputs the
    following:

    <div class="RowCSS" id="SomeUniqueID">
    <span class="LabelCSS">LABEL TEXT:</span>
    <span class="FieldCSS">CONTROL</span>
    </div>

    The output in a simple scenario is correct, and clean, and it is
    significantly easier to manage...but when I tried to do something fancy with
    it, I ran immediately to a problem. While this isn't exactly what I tried,
    the following illustrates the basic idea:

    <table width="100%">
    <tr>
    <td width="50%">ENHANCED LABEL/TEXTBOX CONTROL</td>
    <td width="50%">ENHANCED LABEL/TEXTBOX CONTROL</td>
    </tr>
    etc...
    </table>

    This essentially would be similar to having a label/textbox pair
    side-by-side in a 4 column table. When I did this, I recognized that using a
    % width in the style controlling the LABEL width of the output was unlikely
    to work very effectively, so I thought I might be best trying to construct a
    mechanism inside the web control that achievedthe following:

    1) Applies a set pixel width to the label part of the DIV/SPAN tag set it
    generates. This is easy, and worked like a charm.
    2) Figures out how to autosize the control SPAN based upon the width
    available inside the parent element. And there I hit a brick wall.

    I know I can detect the clientWidth value of the parent element of a tag
    easily, and the control already knows the width of the label that is
    indicated in the style class. I can parse it out. What I'm wondering is
    this:

    Is there a way to make the SPAN that surrounds the CONTROL part of my output
    smart enough that if the browser is resized, the SPAN shrinks or grows so
    that the label SPAN (a fixed width) and the control SPAN equal 100% of the
    width of the surrounding DIV tag? I have tried everything I can think of,
    and nothing at all seems to work quite right. My guess is that it may be
    obvious and I'm just missing something simple.

    And, the reason I asked with generic examples rather than the real code is
    that I don't want to prejudice anyone's thinking on the details. I suspect
    my problem is I've looked at the attempt to long and am therefore missing
    the obvious.

    Any thoughts at all would be welcome. Thanks.

    Frank Buchan
     
    Frank Buchan, Feb 27, 2005
    #1
    1. Advertising

  2. Frank Buchan

    Adrienne Guest

    Gazing into my crystal ball I observed "Frank Buchan"
    <> writing in
    news:#tZ4$:

    > My apologies for the double post, but I was unsure which of the two
    > groups would be best suited for this question.
    >
    > This is a non-critical problem of sorts, because it is a secondary
    > display issue. Some background helps.
    >
    > I have an Enterprise website application written in ASP.NET that uses a
    > common sort of layout on its data entry and editing pages. The standard
    > display generally has a series of rows that contain two columns with
    > the label to the left, and textbox (or other controls) to the right.
    > The layout is simple to achieve using a TABLE element, and easy to
    > visualize.
    >
    ><table width="100%"> <tr>
    > <td width="15%" align="right">Label:</td>
    > <td>TEXTBOX CONTROL HERE</td>
    > </tr>
    > etc...
    ></table>
    >
    > For all these constructs the class tag is actually used to carry the
    > formatting, etc. (It was easier to display above without explaining the
    > CSS class styles separately.) The TEXTBOX control itself expands to the
    > width of the second cell (100% of its parent). While it works, and is
    > pretty simple, it is a bugger to maintain when there are many fields to
    > deal with.
    >
    > What I thought was that it would be much easier to maintain the
    > interface elements if I created a custom version of the standard .NET
    > web forms textbox. I did that, and it worked fine. Basically, it
    > outputs the following:
    >
    ><div class="RowCSS" id="SomeUniqueID">
    > <span class="LabelCSS">LABEL TEXT:</span>
    > <span class="FieldCSS">CONTROL</span>
    ></div>
    >
    > The output in a simple scenario is correct, and clean, and it is
    > significantly easier to manage...but when I tried to do something fancy
    > with it, I ran immediately to a problem. While this isn't exactly what
    > I tried, the following illustrates the basic idea:
    >
    ><table width="100%"> <tr>
    > <td width="50%">ENHANCED LABEL/TEXTBOX CONTROL</td>
    > <td width="50%">ENHANCED LABEL/TEXTBOX CONTROL</td>
    > </tr>
    > etc...
    ></table>
    >
    > This essentially would be similar to having a label/textbox pair
    > side-by-side in a 4 column table. When I did this, I recognized that
    > using a % width in the style controlling the LABEL width of the output
    > was unlikely to work very effectively, so I thought I might be best
    > trying to construct a mechanism inside the web control that achievedthe
    > following:
    >
    > 1) Applies a set pixel width to the label part of the DIV/SPAN tag set
    > it generates. This is easy, and worked like a charm.
    > 2) Figures out how to autosize the control SPAN based upon the width
    > available inside the parent element. And there I hit a brick wall.
    >
    > I know I can detect the clientWidth value of the parent element of a
    > tag easily, and the control already knows the width of the label that
    > is indicated in the style class. I can parse it out. What I'm wondering
    > is this:
    >
    > Is there a way to make the SPAN that surrounds the CONTROL part of my
    > output smart enough that if the browser is resized, the SPAN shrinks or
    > grows so that the label SPAN (a fixed width) and the control SPAN equal
    > 100% of the width of the surrounding DIV tag? I have tried everything I
    > can think of, and nothing at all seems to work quite right. My guess is
    > that it may be obvious and I'm just missing something simple.
    >
    > And, the reason I asked with generic examples rather than the real code
    > is that I don't want to prejudice anyone's thinking on the details. I
    > suspect my problem is I've looked at the attempt to long and am
    > therefore missing the obvious.
    >
    > Any thoughts at all would be welcome. Thanks.
    >
    > Frank Buchan
    >
    >
    >


    You might want to think about using the label element and styling it, eg:
    <label for="name">Name: </label> <input type="text" name="name"...><br>

    CSS:
    form label {width:10em; text-align:right; display: block; float:left}
    form br {clear:left;}

    An example (ASP classic) is at
    http://www.intraproducts.com/beta/requiredform.asp


    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne, Apr 2, 2005
    #2
    1. Advertising

  3. Frank Buchan

    Frank Buchan Guest

    Thanks much for the reply.

    I wisely backed away from the quest a few days, and found that much to
    my surprise I could achieve my goals with some basic deconstruction.
    Rather than trying to do everything in one control, I built the interior
    elements separately and composited them. It remove dmy blindness as a
    result, and I saw a way to achieve the goals without having to drain my
    mental reserve scompletely. :)

    Again, thanks for the reply.



    *** Sent via Developersdex http://www.developersdex.com ***
     
    Frank Buchan, Apr 2, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AndrewF
    Replies:
    1
    Views:
    807
    Bruce Barker
    Oct 10, 2005
  2. Replies:
    11
    Views:
    1,099
    Toby Inkster
    Jan 28, 2005
  3. ppcguy
    Replies:
    3
    Views:
    1,286
    Toby Inkster
    Aug 26, 2005
  4. Ian Wilson
    Replies:
    2
    Views:
    564
    Ian Wilson
    Jul 26, 2007
  5. tektak
    Replies:
    0
    Views:
    137
    tektak
    Sep 20, 2004
Loading...

Share This Page