Home All Groups Group Topic Archive Search About

Re: Dynamic Sizing Based Upon the Parent Element's Width

Author
2 Apr 2005 1:28 PM
Adrienne
Gazing into my crystal ball I observed "Frank Buchan"
<future_lege***@hotmail.com> writing in
Show quoteHide quote
news:#tZ4$MGHFHA.3200@TK2MSFTNGP12.phx.gbl:

> 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

Author
2 Apr 2005 3:25 PM
Frank Buchan
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 ***

Bookmark and Share

Post Thread options