Learn, Share, Build

47
October 12, 2017, at 5:27 PM

I'm creating and filling up an HTML table dynamically on AJAX callback with JavaScript. My need would be to stack 3 buttons vertically on a single row cell. I've tried with the standard:

var btn = document.createElement('input');
btn.type = "button";
btn.className = "btn";
btn.value = "Test1";

And then appending these buttons to the pertaining cell. Actually this makes the buttons to be created on the same row, from left to right. My need would be to have them created vertically, instead. May I use the button group option, setting its property to vertical? I'm not sure if the button group can be used as a child.

Answer 1

There are few options:

  1. Use display: block
  2. Use floats and clear: both;
  3. Use <br/> between buttons
  4. Wrap each button with <div>

#e1 button { 
  display: block; 
} 
 
#e2 button { 
  float: left; 
  clear: both; 
} 
 
#e2:after { 
  content: ''; 
  display: block; 
  clear: both; 
} 
 
#e1, #e2, #e3, #e4 { 
  border: 1px solid #ddd; 
  margin: 10px 0; 
}
<div id="e1"> 
<button>button</button><button>button</button><button>button</button> 
</div> 
<div id="e2"> 
<button>button</button><button>button</button><button>button</button> 
</div> 
<div id="e3"> 
<button>button</button><br/> 
<button>button</button><br/> 
<button>button</button> 
</div> 
<div id="e4"> 
  <div> 
    <button>button</button> 
  </div> 
  <div> 
    <button>button</button> 
  </div> 
  <div> 
    <button>button</button> 
  </div> 
</div>

Answer 2

I finally found a solution which doesn't involve CSS between buttons at all, as I was looking for. As I told above, I'm building the table from within a HTTPRequest callback, in order to parse a returning XML with a dynamic number of children instead. So, I cannot use any "static" html or "static" css. The solution (at least the one I'd like the most), is simply to post-pone some br after the buttons, without any need of CSS decoration. Here my trial javascript example:

var y = document.createElement("TR");
x.appendChild(y);
var z = document.createElement("TD");
var btn = document.createElement('input');
btn.type = "button";
btn.className = "btn";
btn.value = "Test1";
z.appendChild(btn);
var br = document.createElement("br");
z.appendChild(br);
var btn = document.createElement('input');
btn.type = "button";
btn.className = "btn";
btn.value = "Test2";
z.appendChild(btn);
var br = document.createElement("br");
z.appendChild(br);
var t = document.createTextNode("MyCell");
z.appendChild(t);   
y.appendChild(z);

So, probably this is not the most "formal" solution ever, but it's enough flexible to fit my dynamic created table without bothering about CSS at all.

EDIT: thank to @Justinas for having pointed me out to the right direction with br's (which does not relate to CSS indeed).

READ ALSO
Learn, Share, Build

Learn, Share, Build

Added my code belowTrying to have the second button change the background colour of the poster div

21
Learn, Share, Build

Learn, Share, Build

This is the part in my gulpfile:

32
Learn, Share, Build

Learn, Share, Build

I need to make some changes to my app but only for iPhone X

21
Learn, Share, Build

Learn, Share, Build

I have a call in a method that i want to test like this:

20