How to emulate XUL vbox, hbox with CSS

Shadoefax · Post by **Shadoefax** » 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>

Post by **SK.** » October 27th, 2015, 9:44 am

Moving to Extension Development.

Noitidart · Post by **Noitidart** » 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 · Post by **Leif-AMO** » 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.

How to emulate XUL vbox, hbox with CSS

How to emulate XUL vbox, hbox with CSS

Re: How to emulate XUL vbox, hbox with CSS

Re: How to emulate XUL vbox, hbox with CSS

Re: How to emulate XUL vbox, hbox with CSS