Matt Matt - 6 months ago 38
HTML Question

css inline-block doesn't work in firefox

I have an one column bootstrap table and each cell contains two divs with text and buttons.

in Chrome, cell content is rendered as expected in one row

enter image description here

but in firefox the cell content is rendered "in two rows"

enter image description here

jsfiddle

html



<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>


javascript

var data = [{"id":"973","email":"usr3@usr3.com"},{"id":"17f","email":"prom3@prom3.com"},{"id":"29e","email":"prom8@prom8.com"}];

class TableRowButtons extends React.Component {

constructor(props) {
super(props);

this._handleDeleteClick = this._handleDeleteClick.bind(this);
this._handleResetClick = this._handleResetClick.bind(this);
this._handleEditClick = this._handleEditClick.bind(this);
}

_handleDeleteClick(e){
console.log(e);
}

_handleResetClick(e){
console.log(e);
}

_handleEditClick(e){
console.log(e);
}

render() {

return (
<div className="row-container">
<div className="row-text-container">
{this.props.cellContent}
</div>
<div className="row-buttons-container">
<button className="btn btn-danger btn-xs" onClick={this._handleDeleteClick}>Delete</button>
<button className="btn btn-warning btn-xs" onClick={this._handleResetClick}>Reset Password</button>
<button className="btn btn-info btn-xs" onClick={this._handleEditClick.bind}>Edit</button>
</div>
</div>
);
}
}

class TestTable extends React.Component{

constructor(props) {
super(props);

this._handleEditClick = this._handleEditClick.bind(this);
this._handleResetClick = this._handleResetClick.bind(this);
this._handleDeleteClick = this._handleDeleteClick.bind(this);
this._handleRowClick = this._handleRowClick.bind(this);
}

_handleRowClick(row){
console.log(row);
}

_handleDeleteClick(rowContent){
console.log(rowContent);
}

_handleResetClick(rowContent){
console.log(rowContent);
}

_handleEditClick(rowContent){
console.log(rowContent);
}

render(){

var that = this;

function onAfterTableComplete(){

}

const options = {
onRowClick: this._handleRowClick,
afterTableComplete: onAfterTableComplete
};

function rowFormatter(cell, row){
return <TableRowButtons
cellContent={cell}
rowContent={row}
onDeleteClick={that._handleDeleteClick}
onResetClick={that._handleResetClick}
onEditClick={that._handleEditClick}
/>;
}

return (
<BootstrapTable
data={data}
striped={true}
hover={true}
condensed={true}
pagination={true}
search={true}
options={options}>
<TableHeaderColumn
isKey={true}
dataField="email"
width="200"
dataSort={true}
dataFormat={rowFormatter}>Email</TableHeaderColumn>
</BootstrapTable>
);
}

}

ReactDOM.render(
<TestTable />,
document.getElementById('container')
);


css

.btn-danger {
margin-right: 0;
}

.btn-warning, .btn-info{
margin-right: 5px;
}

td .btn{
float: right;
}

.row-container{
display: inline-block;
width: 100%;
}

.row-container div{
display: inline-block;
}

.row-buttons-container{
float: right;
width: 200px;
}

Answer

The problem I see is the white-space: nowrap;
change it, maybe it will help.