Comment redimensionner la largeur d'un élément lorsque le panneau de réduction est développé?

Question

J'utilise le modèle d'application Web fourni avec Visual Studio. J'ai ajouté une page maître imbriquée qui divise le contenu principal en deux autres espaces réservés au contenu, qui sont tous deux enveloppés dans des divs dont le style CSS est appliqué pour tenter de contrôler leurs largeurs. L'un est utilisé comme zone de contenu principale pour chaque page héritée de cette page maître imbriquée et l'autre espace de contenu est utilisé comme panneau latéral pouvant être étendu et réduit de gauche à droite. Ce panneau latéral sera persistant sur la plupart des pages. C'est pourquoi il est dans un espace réservé au contenu de sorte que dans une page qui n'en a pas besoin, il peut créer un contenu personnalisé, puis le laisser vide ou utiliser d'autres données. Cette fonctionnalité a été obtenue avec l'extension de panneau pliable d'ajax mais, la taille de la zone de contenu principale est une largeur verrouillée. Dans mon css, je mets max-width et min-width sur la zone de contenu principale, mais ne la définit que sur la largeur minimale. Lors de la lecture de la documentation css, j'ai découvert que la propriété min-width écrase les propriétés max-width et width. Ma question est Comment puis-je obtenir la zone de contenu principal à 95% de largeur lorsque le panneau latéral est réduit et 75% de largeur lorsque le panneau latéral est étendu? J'ai essayé d'inclure autant d'informations pertinentes que je pouvais penser, mais si plus est nécessaire je serai heureux de le fournir.

Le balisage correspondant de ma page maître imbriquée

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

Le css concerné: la largeur du panneau de chute est situé dans l'extension du panneau pliable

.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%; 
} 

Answer 1

Je viens de réaliser que je pourrais peut-être résoudre cela en ajoutant un second extendeur de panneau de réduction et de définir sa propriété id de contrôle de cible au panneau principal et avoir son déclencheur être l'en-tête de la s panneau d'ide. De cette façon, lorsque le panneau latéral est agrandi, le panneau principal s'effondre et vice versa. Je pourrais alors employer les tailles d'expansion et s'est effondré pour placer les valeurs de 75% et de 95% du panneau principal. Cela me semble être un hack et je préférerais une solution plus pragmatique.