如何在摺疊面板展開時調整元素的寬度？

我正在使用Visual Studio附帶的Web應用程序模板。我添加了一個嵌套的母版頁，將主要內容分割爲兩個其他內容佔位符，這兩個內容佔位符都被封裝在應用了CSS樣式的div中，以試圖控制寬度。其中一個用作從此嵌套母版頁繼承的每個頁面的主要內容區域，另一個內容佔位符用作可從左到右展開和摺疊的側面板。該側面板將在大多數頁面中保留。這就是爲什麼它在內容佔位符中的原因，以便在不需要它的頁面中可以創建自定義內容，然後將其保留爲空或使用其他數據。使用ajax的可摺疊面板擴展器可以實現此功能，但主要內容區域的大小具有鎖定寬度。在我的CSS中，我在主內容區域設置了最大寬度和最小寬度，但它只將其設置爲最小寬度。在閱讀css文檔後，我發現min-width屬性覆蓋了max-width和width屬性。我的問題是，如何在側面板摺疊時將主內容區域的寬度設置爲95％，並將側面板展開時寬度爲75％？我試圖包含儘可能多的相關信息，但如果需要更多信息，我會很樂意提供。如何在摺疊面板展開時調整元素的寬度？

從我的嵌套母版頁相關的標記

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server"> 
<div style="width: 100%; height: 100%;"> 
    <div class="leftSidePanel"> 
    <asp:ContentPlaceHolder ID="LeftSidePanelContent" runat="server">   
     <asp:Panel ID="Panel2" runat="server" CssClass="collapseLeftSidePanelHeader" > 
      <div style="padding: 5px; cursor: pointer; vertical-align: middle;"> 
       <asp:ImageButton ID="Image1" runat="server" ImageUrl="~/Images/CollapsiblePanel/expand_blue.jpg" AlternateText="(Show Details...)" /> 
      </div> 
     </asp:Panel> 
     <asp:Panel ID="Panel1" runat="server" CssClass="collapseLeftSidePanel" > 
      <br /> 

      <asp:Label ID="Label1" runat="server" Text="MY PANEL"></asp:Label> 
      </asp:Panel> 
      <ajax:collapsiblepanelextender ID="cpeLeftSidePanel" runat="Server" 
       ExpandedSize="250" 
       CollapsedSize="0" 
       ExpandDirection="Horizontal" 
       TargetControlID="Panel1" 
       ExpandControlID="Panel2" 
       CollapseControlID="Panel2" 
       Collapsed="True" 
       TextLabelID="Label1" 
       ImageControlID="Image1" 
       ExpandedImage="~/Images/CollapsiblePanel/collapse_blue.jpg" 
       CollapsedImage="~/Images/CollapsiblePanel/expand_blue.jpg" 
       SuppressPostBack="true" /> 
    </asp:ContentPlaceHolder> 
    </div> 
    <div class="mainPanel"> 
     <asp:ContentPlaceHolder ID="MainPanelContent" runat="server"> 
     </asp:ContentPlaceHolder> 
    </div> 
</div>

相關的CSS：爲合攏面板的寬度在可摺疊的面板擴展設置

.main 
{ 
    padding: 0em 1em; 
    margin: 1em; 
    width: 100%; 
    min-height: 420px; 
    border: thin solid black; 
} 

.mainPanel{ 
    max-width: 90%; 
    min-width: 75%; 
    height: 100%; 
    float:right; 
    border: thin solid green; 
} 

.leftSidePanel{ 
    min-width: 0; 
    max-width: 20%; 
    height: 100%; 
    float: left; 
    border: thin solid blue; 
} 


.collapseLeftSidePanelHeader{ 
    width:30px; 
    height:100%; 
    background-repeat:repeat-y; 
    background-color: AliceBlue; 
    font-weight:bold; 
    float: right; 
} 

.collapseLeftSidePanel { 
    background-color:black; 
    overflow:hidden; 
    width:0; 
    height: 100%; 
}

來源

2016-09-22 Jared Huffstutler

如果有人願意協助，我仍然在尋找這個問題的幫助。謝謝 –

我才意識到我可以通過添加第二個摺疊面板擴展器來解決這個問題，並將它的目標控件ID屬性設置爲主面板，並將其觸發器設置爲s的頭部ide面板。這樣，當側面板展開時，主面板將摺疊，反之亦然。然後，我可以使用展開和摺疊尺寸來設置主面板的75％和95％值。這對我來說似乎是一種破綻，我更喜歡更實用的解決方案。

來源

2016-09-22 15:58:02

凹凸碰撞凹凸碰撞 –

如何在摺疊面板展開時調整元素的寬度？

回答

相關問題