Помогите с выравниванием элементов управления - PullRequest
Новая
       4

Помогите с выравниванием элементов управления

0 голосов
/ 24 июля 2010

У меня есть выпадающий список (asp.net), и когда пользователь меняет выбор из выпадающего списка, он отображает уважаемый div.

Мне нужна помощь в выравнивании элементов управления.и хочу выглядеть так:

DropdownListControl -> selected_div -> button

ниже мой код soucr .... 

<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" />

ОБНОВЛЕНИЕ: 

<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>

Ответы [ 2 ]

0 голосов
/ 24 июля 2010

Конечно, не проблема.Вы можете немного почистить свою разметку на появившихся элементах div, удалив вложенную <div style="float: left">.CSS будет выглядеть следующим образом: 

select {
    float: left;
}

#divDateRangeSearch, #divSearchSubject, #divStatusSearch, #btnSearch {
    float: left;
    margin-left: 20px; /* put some space between the elements */
}

Выше предполагается, что вы создаете и уничтожаете уважаемые <div>, как вы прячете и показываете их.Если вам нужно, чтобы все они существовали в исходном коде, а вы должны показать и скрыть их, вам потребуется что-то вроде следующего: 

#divHolder {
    position: relative;
    float: left; 
    width: 200px; /* adjust as needed */
}

#divDateRangeSearch, #divSearchSubject, #divStatusSearch {
    position: absolute;
    top: 0;
    left: 0;        
}

И HTML: 

<div id="divHolder">
    <!-- Markup for the 3 divs would go in here -->
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
0 голосов
/ 24 июля 2010

Попробуйте следующее.Вам нужно будет добавить два оставшихся делителя обратно, и я полагаю, что вы переключаете их видимость в зависимости от выбора.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...