MozillaZine

How to emulate XUL vbox, hbox with CSS

Talk about add-ons and extension development.
Shadoefax

User avatar
 
Posts: 438
Joined: April 29th, 2005, 2:59 pm
Location: Glendale, AZ

Post Posted October 25th, 2015, 6:43 pm

For over a decade I've been writing Fx extensions using XUL for the UI. Layout was very easy with vbox and hbox. Now that Mozilla is deprecating XUL, all UIs need to be re-written with HTML. Has anyone been able to write a css class that will act just like hbox and vbox?

I've been playing around a little and came up with this:

Code: Select all
.hbox{
   display: -moz-box;
   display: -webkit-box;
   display: box;
   -moz-box-orient: horizontal;
   -webkit-box-orient: horizontal;
   box-orient: horizontal;
}

.vbox{
   display: -moz-box;
   display: -webkit-box;
   display: box;
   -moz-box-orient: vertical;
   -webkit-box-orient: vertical;
   box-orient: vertical;
}


It works somewhat but only with hboxes. I would like to be able to get, say, three vboxes in a row contained in one hbox. Here's some sample code:

Code: Select all
<!DOCTYPE html>
<html>
  <head>
    <title>CSS box-orient example</title>
    <style>
      .hbox{
         display: -moz-box;
      display: -webkit-box;
      display: box;                   
         -moz-box-orient: horizontal;
      -webkit-box-orient: horizontal;
      box-orient: horizontal;
         border: 3px solid red;      
         background-color:deeppink;

      }
      .vbox{
         display: -moz-box;
      display: -webkit-box;
      display: box;
         -moz-box-orient: vertical;
      -webkit-box-orient: vertical;
      box-orient: vertical;
         border: 3px solid blue;   
         background-color:cornflowerblue;      

   }
   .mainBox{
      border: 5px solid black;
      font: 14px Arial;
      color: white;
      background-color:gainsboro;   
   }
    </style>
  </head>
  <body style="color:white;">      
      <div class="hbox">
         <div>first line of a hbox that should contain this div and two other vbox divs to the right</div><br>
         <div class="vbox">
            <div>first line of vbox in a hbox.  It should be in its own box to the right.  Instead it is below the preceeding div.</div>
            <div>second line of vbox in a hbox</div>
            <div>third line of vbox in a hbox</div>
         </div><br>
         <div class="vbox">
            <div>first line of vbox in a hbox</div>
            <div>second line of vbox in a hbox</div>
            <div>third line of vbox in a hbox</div>
         </div>
      </div>
  </body>
</html>
All my signatures are stolen from other people. Including this one.
Homepage

SK.
Moderator

User avatar
 
Posts: 20819
Joined: October 18th, 2007, 1:28 pm
Location: Third Rock From The Sun

Post Posted October 27th, 2015, 9:44 am

Moving to Extension Development.
John 3:16 and Philippians 4:13

Noitidart
 
Posts: 1168
Joined: September 16th, 2007, 8:01 am

Post Posted October 29th, 2015, 12:10 am

Very very easy, I actually prefer this method. CSS also has a flex system: https://developer.mozilla.org/en-US/doc ... ible_boxes

Leif-AMO
 
Posts: 8
Joined: April 5th, 2016, 5:28 pm

Post Posted December 31st, 2016, 5:20 pm

EDIT: Just moments after posting this yesterday, I found a little project which elegantly addresses this very question, yet I had to wait for moderator approval before editing my post.

I present to you Munawwar's flex-helper!

Here's a simple JSFiddle demo.

EDIT: Rest of original post is unnecessary.

Return to Extension Development


Who is online

Users browsing this forum: No registered users and 1 guest