Div теги JQuery UI - PullRequest
Новая
       4

Div теги JQuery UI

0 голосов
/ 01 октября 2011

Я работаю над элементом управления виджетом.Виджет загружается динамически в контейнер виджетов.Контейнер виджета содержит div, который содержит виджет, это называется областью виджета.Контейнер виджета сделан перетаскиваемым и изменяющим его размер с помощью пользовательского интерфейса JQuery.

Проблема, с которой я сталкиваюсь, заключается в том, что нижнее поле области виджета не работает или, возможно, я неправильно понимаю, как работают поля.Левое верхнее и правое поля работают нормально, я установил их на 20 пикселей, поэтому область виджетов находится на 20 пикселей слева и справа от контейнера виджетов.Нижнее поле также составляет 20 пикселей, но расстояние между нижней частью области виджета намного больше, чем 20 пикселей от нижней части контейнера виджета.Я пробовал это в Firefox, и возникает та же проблема.

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

Вот мой контейнер виджетов и CSS. 

<asp:Panel ID="Panel1" CssClass="widgetcontainer" runat="server" Height="500px" BorderStyle="Solid" BorderWidth="1px" Width="485px" BackColor="White">
    <asp:Panel ID="Panel2" CssClass="widgetcontainerheader" runat="server">
        <asp:Label ID="Label2" runat="server" Text="Gadget header"></asp:Label>
    </asp:Panel>

    <asp:Panel ID="WidgetBodyPanel" CssClass="widgetarea" runat="Server"    BorderStyle="Solid">
        <p>
            some text
        </p>
    </asp:Panel>

</asp:Panel>

div.widgetcontainerheader
{
    background-color:#CCFF99;

    border-bottom-style:solid;
    border-bottom-width:thin;
    border-bottom-color:#D2D2D2;

    position: relative;
    width:100%;
    height:20px;
}

.widgetarea
{
    position:relative;

    margin-left:20px;
    margin-top:20px;
    margin-right:20px;
    margin-bottom:20px;

}

Может кто-нибудь сообщить, почему не работает нижнее поле?

Спасибо

1 Ответ

1 голос
/ 01 октября 2011

Вы установили высоту контейнера-виджета на 500 пикселей.

Я бы сказал, что область виджета имеет нижнее поле 20 пикселей, но оно кажется больше, чем это, потому что область виджета не имеет высоты. Возможно установить высоту: 100%. 

.widgetarea
{
  margin: 20px;
  height: 100%;
}

Кстати, стоит установить http://getfirebug.com/ для отладки этих надоедливых проблем с пользовательским интерфейсом.

...