React code:
<div style={{paddingLeft: '8px', paddingRight: '8px'}}>
<div className="-subtitle">
<div className="pull-right" style={{marginBottom:'5px'}}>
<Button bsStyle="primary" bsSize="xsmall" onClick={this.actionAdd}>Create New Parameter</Button>
</div>
<BootstrapTable
data={item.params}
className="removeTop"
striped
hover>
<TableHeaderColumn
className="tableHeader"
width="100px"
>Name</TableHeaderColumn>
<TableHeaderColumn
className="tableHeader"
dataSort
width="200px"
>GUI Name</TableHeaderColumn>
<TableHeaderColumn
className="tableHeader"
dataSort
width="100px"
>Default</TableHeaderColumn>
<TableHeaderColumn
className="tableHeader"
dataSort
width="300px"
>Options</TableHeaderColumn>
<TableHeaderColumn
className="tableHeader"
dataField="required"
dataSort
width="100px"
>Required</TableHeaderColumn>
<TableHeaderColumn
className="tableHeader"
dataField="multiline"
isKey
dataSort
width="100px"
>Multiline</TableHeaderColumn>
<TableHeaderColumn
className="tableHeader"
dataField=""
dataSort
width="100px"
>Delete</TableHeaderColumn>
</BootstrapTable>
I am experiencing an issue with the BootstrapTable element. When a pull-right class is applied to an element before the <BootstrapTable>, borders are created around that element, as illustrated in this image:
https://i.stack.imgur.com/IxapL.png
Ideally, I would like the Button to be aligned to the right without these border lines around it.
Upon inspection, I found that the .react-bs-table-container creates these borders around both the Button and the BootstrapTable.
Adding the following CSS rule helped remove the top border but not the edges:
.react-bs-table {
border-top: none !important;
}
Is there a way to eliminate the borders surrounding the <Button>?