Groupbox expand Horizontally

0
Hello everyone,   Is it possible to reconfigure the groupbox to allow for horizontal expansion, either from left to right or the opposite direction? Additionally, is there a way to specify the maximum width to which it can expand?   Thank You
asked
1 answers
1

You can achieve this by using custom styling.

 

Structurally, a groupbox consists of a container, within this container there are 2 other containers: header and body. You can use flex-box to align the header left and content right and apply possible width to the body:

==== HTML =====

<div class="mx-groupbox">
  <div class="mx-groupbox-header">
     //GROUPBOX HEADER
  </div>
  <div class="mx-groupbox-body">
     //GROUPBOX CONTENT
  </div>
</div>


===== CUSTOM SCSS =====

.mx-groupbox {
  display: flex;
  flex-direction: row;

  .mx-groupbox-body {
    // possible width properties
  }
}


===== RESULT =====

 ------------------------------------------
|        |                                 |
|        |                                 |
| HEADER |             CONTENT             |
|        |   (with possible fixed width)   |
|        |                                 |
 ------------------------------------------

 

Hope this helps!

answered