asp.net - Help with aligning the controls -
i have dropdownlist (asp.net) , when user change selection dropdownlist display respected div.
i need in aligning controls. , want this:
dropdownlistcontrol -- > selected_div -- > button
below soucr code....
<div style="width: 880px; padding-top: 2px; border-bottom: none; height: 28px;"> <asp:label id="lblfilterresultsby" runat="server" text="filter results by:"></asp:label> <asp:dropdownlist id="ddlfilter" runat="server" width="221px"> <asp:listitem text="select..." value=""></asp:listitem> <asp:listitem text="date" value="date"></asp:listitem> <asp:listitem text="subject" value="subject"></asp:listitem> <asp:listitem text="status" value="status"></asp:listitem> </asp:dropdownlist> <div id="divdaterangesearch"> <div style="float: left"> <asp:label id="lbldaterange" runat="server" text="date range"></asp:label> <br /> <uc1:datepicker id="fromdate" runat="server" /> <uc1:datepicker id="todate" runat="server" /> </div> </div> <div id="divsearchsubject" > <div style="float: left"> <asp:label id="lblsubject" runat="server" text="subject"></asp:label><br /> <asp:textbox id="txtsubject" runat="server" width="225px"></asp:textbox> </div> </div> <div id="divstatussearch"> <div style="float: left"> <asp:label id="lblstatus" runat="server" text="status" ></asp:label> <br /> <asp:dropdownlist id="ddstatus" runat="server" width="152px" > </asp:dropdownlist> </div> </div> </div> <asp:button id="btnsearch" text="search" runat="server" /> update:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <style type="text/css"> #main { width: 800px; } #select { float: left; width: 250px; border: 1px solid blue ; } #holder { position: relative; width: 300px; float: left; margin-left: 20px; border: 1px solid red ; } #div_date, #div_subject, #div_status { position: absolute; top: 0; left: 0; } #button { float: left; margin-left:20px } </style> </head> <body> <form id="form1" runat="server"> <script type="text/javascript"> $(document).ready(function () { $('#filterresultsby').change(function () { var sel = $(this).val(); $('#div_date').hide(); $('#div_subject').hide(); $('#div_status').hide(); if (sel === 'date') { $('#div_date').show(); } else if (sel == 'subject') { $('#div_subject').show(); } else if (sel == 'status') { $('#div_status').show(); } }); }); </script> <div id="main"> <div id="select"> filter results by: <select id="filterresultsby"> <option value="">select...</option> <option value="date">date</option> <option value="subject">subject</option> <option value="status">status</option> </select> </div> <div id="holder"> <div id="div_date" style="width: 250px; display: none;" > date range: <asp:textbox width="50px" id="startdate" runat="server" /> - - <asp:textbox width="50px" id="enddate" runat="server" /> </div> <div id="div_subject" style="display: none;" > subject: <asp:textbox id="txtsubject" runat="server" width="225px" ></asp:textbox> </div> <div id="div_status" style="display: none;" > status: <asp:dropdownlist id="ddlstatus" runat="server" width="152px"> </asp:dropdownlist> </div> </div> <asp:button id="btnsearch" text="search" runat="server" /> </div> </form> </body> </html>
sure, not problem. can clean markup bit on div's appear removing nested <div style="float: left">. css follows:
select { float: left; } #divdaterangesearch, #divsearchsubject, #divstatussearch, #btnsearch { float: left; margin-left: 20px; /* put space between elements */ } the above assumes you're creating , destroying respected <div>'s hide , show them. if need them exist in source , you'll show , hide them, you'll need following:
#divholder { position: relative; float: left; width: 200px; /* adjust needed */ } #divdaterangesearch, #divsearchsubject, #divstatussearch { position: absolute; top: 0; left: 0; } and html:
<div id="divholder"> <!-- markup 3 divs go in here --> </div> <asp:button id="btnsearch" text="search" runat="server" />
Comments
Post a Comment