0

Aside is used for a complete section left in a webside.

* {
    padding: 0px;
    margin: 0px;
}
html,
body {
    width: 100%;
    height: 100%;
    color: #00374b;
    font-family: Verdana, sans-serif;
    font-size: 0.9em;
    background-color: #FFFFFF;
}
/*First big flexbox container that places the elements from top to down (column)*/
.flex_container {
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-flow: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
/*Second big flexbox container for the ASP form from left (aside) to right (main section) (row)*/
.layout_main {
    flex: 1 auto;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-flow: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}



.layout_aside {
    flex: 1 auto;
    background-color: #004664;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-flow: column;
    flex-direction: column;
    padding: 10px;
}

.element {
    flex: 1 auto;
}

.layout_main_content {
    flex: 1 1 90%;
    min-width: 500px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-flow: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
article{
 flex: 1 auto;
}
<body class="flex_container">
 <div class="layout_main">
  
  <aside class="layout_aside" id="aside_menu" runat="server">
   <div class="element">Test 1</div>
   <div class="element">Test 2</div>
   <div class="element">Test 3</div>
  </aside>

  <div class="layout_main_content">
   <article>Article1</article>
   <article>Article2</article>
   </div>
 </div>
</body>

For this code the flexbox definition is not working for aside. If I remove the runat="server" the flexbox is again recognized. Any suggestion or resolution. I tried to put the runat server to a different div but this doesn´t help.

Marco
  • 1
  • What do you need `runat="server"` for? ... I mean that is a server side command for ASP.NET, and if you want to use it locally, as an attribute you need to add `data-*` to its name, like this `data-runat="server"` – Asons Mar 23 '17 at 08:06
  • Hi, yes the its running with ASP.NET. The body is inside a form. What I want to reach is that the complete aside gets invisible by button (already done). But after adding the runat=server the flexbox stops stretching and all child attributes like self-assign or flex 1 10 px are ignored. (here element) – Marco Mar 23 '17 at 14:05
  • I just removed the `runat="server"` on the above code and it does not change anything, it looks all the same, so post a drawing or image showing the expected result so we understand how you want it – Asons Mar 23 '17 at 14:21

0 Answers0