CODEWITHSUNDEEP
reactjsreact-bootstrap
Kevba
Kevba

Reputation: 88

React bootstrap buttons

For a small application i'm building i need two buttons in a row. Since the appliation is built on reactjs, i'm using react-bootstrap.

The whole thing works great on desktop, but on a mobile device the last two button move through eachother like this: enter image description here

This problem only seems to occur when the last two columns contain buttons.

code for the last two colums: 

<Reactbootstrap.Row>
    // Other elements have been ommitted.
    <ReactBootstrap.Col xs={1} className="no-padding text-center">
        <SyncButton updatePins={this.updatePins} syncing={this.state.syncing} synced={this.state.synced}/>
     </ReactBootstrap.Col>

     <ReactBootstrap.Col xs={1} className="no-padding">
         <SyncStatus synced={this.state.synced}/>
    </ReactBootstrap.Col>
</ReactBootstrap.Row>

code for the buttons: 

export var SyncStatus = React.createClass({
render () {
    return (
        <ReactBootstrap.Button bsStyle={this.props.synced && "success" || "danger"} disabled>
            <b className={this.props.synced && "fa fa-check" || "fa fa-times"}></b>
        </ReactBootstrap.Button>
    );
}
});

export var SyncButton = React.createClass({
onClick () {
    this.props.updatePins();
},

render () {
    return (
        <ReactBootstrap.Button bsStyle="info" onClick={this.onClick}      disabled={this.props.synced || this.props.syncing}>
            <b className={this.props.syncing && "fa fa-refresh fa-          spin" || "fa fa-exchange fa-rotate-90"}></b> SYNC
        </ReactBootstrap.Button>
    )
},
});

Does anyone know how to fix this?

Upvotes: 1

Views: 2657

Answers (1)

J. Steele
J. Steele

Reputation: 26

The column you are putting the buttons in does not have enough room to display them on a mobile device. It's an xs={1} which on a mobile device at 768px would only be 34px wide. You should rethink your design to be more responsive using bootstrap's responsive grid functionality.

Upvotes: 1

Related Questions