Help with aligning the controls
I have a dropdownlist (asp.net) and when user change the selection from the dropdownlist it display respected div.
i need help in aligning the controls. and want to look like this:
DropdownListControl -- > selected_div -- > button
below is my 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" /> - to - <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 a problem. You can clean up your markup a bit on the div's that appear by removing the nested <div style="float: left">. The CSS would be as follows:
select {
float: left;
}
#divDateRangeSearch, #divSearchSubject, #divStatusSearch, #btnSearch {
float: left;
margin-left: 20px; /* put some space between the elements */
}
The above assumes that you're creating and destroying the respected <div>'s as you hide and show them. If you need them to all exist in the source and you'll show and hide them, you'll need something like the following:
#divHolder {
position: relative;
float: left;
width: 200px; /* adjust as needed */
}
#divDateRangeSearch, #divSearchSubject, #divStatusSearch {
position: absolute;
top: 0;
left: 0;
}
And the HTML:
<div id="divHolder">
<!-- Markup for the 3 divs would go in here -->
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
Try the following. You'll have to add your other two divs back in, and I'm assuming you toggle their visibility based on selection.
<div style="width: 880px; padding-top: 2px; border-bottom: none;
height: 28px;">
<div style="float:left">
<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>
<div id="divStatusSearch">
<div style="float: left">
<asp:Label ID="lblStatus" runat="server" Text="Status" ></asp:Label>
<asp:DropDownList ID="ddStatus" runat="server" Width="152px" >
</asp:DropDownList>
</div>
</div>
<div style="float:left">
<asp:Button ID="btnSearch" Text="Search" runat="server" />
</div>
加载中,请稍侯......
精彩评论