Horizontal space between bootstrap buttons using mithril.js
When using a clean bootstrap, there is a small horizontal space between the buttons.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary">Save</button>
<button class="btn btn-default">Cancel</button>
</div>
</div>
</div>
This space disappears if elements are created with mithril.js:
var my = {};
my.view = function() {
return m('.container-fluid',
m('.row',
m('.col-xs-12', [
m('button.btn.btn-default', 'Save'),
m('button.btn.btn-default', 'Cancel')
])
)
);
};
m.mount(document.body, my);
What makes bootstrap add a little space between buttons? How do I reproduce this in mithril.js?
+3
source to share
2 answers
It seems like end of line or white space in HTML causes a little horizontal space between buttons. See this one for a similar question. To fix the problem in mithril.js, I just added a space between the buttons:
var my = {};
my.view = function() {
return m('.container-fluid',
m('.row',
m('.col-xs-12', [
m('button.btn.btn-default', 'Save'),
' ',
m('button.btn.btn-default', 'Cancel')
])
)
);
};
m.mount(document.body, my);
+3
source to share
Ironically, one of the big pains I regularly encounter when writing HTML templates was trying to eliminate whitespace. There are no spaces with Mithril. I wrote this little function to help me write templates where I expect spaces:
function gaps(){
return Array.prototype.reduce.call( arguments,
function intersperse( output, item, index ){
return Array.prototype.concat.call( output, ' ', item )
}
)
}
Thus, your code will become:
var my = {};
my.view = function() {
return m('.container-fluid',
m('.row',
m('.col-xs-12', gaps(
m('button.btn.btn-default', 'Save'),
m('button.btn.btn-default', 'Cancel')
))
)
);
};
m.mount(document.body, my);
+2
source to share