|
code
newsgroups
|
|||||||||||||||||||||||
|
|||||||||||||||||||||||
Re: Dynamic Sizing Based Upon the Parent Element's Width<future_lege***@hotmail.com> writing in Show quoteHide quote news:#tZ4$MGHFHA.3200@TK2MSFTNGP12.phx.gbl: You might want to think about using the label element and styling it, eg:> 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 > > > <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 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 ***
Validation Summary Control not displaying MessageBox on web server
CustomValidator Itemplate sample : Access controls on postback User control change a web control in jscript stuck: I cant reach usercontrol's class .. Treeview control in VS2003 About the <Asp:Image> PersistenceMode Images in DropDownList |
|||||||||||||||||||||||