F
Frank Buchan
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
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
