Having issues with the container width in Edge compared to Chrome despite the Sass code working fine in Chrome. Here's the code:
.popover {
font-family: 'Tahoma', sans-serif;
max-width: 100%;
box-shadow: 0 0 15px 6px #646262;
hr {
margin-top: 7px;
margin-bottom: 7px;
}
.popover-header {
font-size: 13px;
background-color: $purple;
color: white;
text-align: center;
font-weight: bold;
&::before {
border-bottom: none;
}
}
.popover-body {
.btn-group {
min-width: 100%;
}
button {
font-size: 11px;
background-color: #d9d9d9;
color: #000;
font-weight: bold;
}
}
}
Chrome:
https://i.sstatic.net/xyyLR.png
Edge:
https://i.sstatic.net/Ectnr.png
Any suggestions on what might be causing this difference? Thank you!
EDIT:
There might be a connection to the 'w-100' class from Bootstrap, here's a snippet of the React component:
return (
<th
id={k}
onClick={
Number.isInteger(v) ||
v == 62.5 ||
v == "Mean"
?
this.toggle
:
null
}
>
{Number.isInteger(v) || v == 62.5 ? v + 'th' : v}
{v == 'n' ? null : <i className='fas fa-sort'></i>}
<Popover
placement='bottom'
isOpen={popoverOpen}
target={k}
toggle={this.toggle}
>
<PopoverHeader>Select New Percentile</PopoverHeader>
<PopoverBody>
<Row>
<Col>
<ButtonGroup size='sm'>
{
_.map(opt, o => {
if (o < 50) {
return (
<Button
key={o}
value={o}
id={k}
className='w-100'
onClick={this.props.handleClick}
>
{ o + 'th' }
</Button>
)
}
})
}
</ButtonGroup>
</Col>
</Row>
<hr />
<Row>
<Col>
<ButtonGroup size='sm'>
{
_.map(opt, o => {
if (o == 50 || o == 'Mean') {
return (
<Button
key={o}
value={o}
id={k}
className='w-100'
onClick={this.props.handleClick}
>
{Number.isInteger(o) ? o + 'th' : o}
</Button>
)
}
})
}
</ButtonGroup>
</Col>
</Row>
<hr />
<Row>
<Col>
<ButtonGroup size='sm'>
{
_.map(opt, o => {
if (o > 50) {
return (
<Button
key={o}
value={o}
id={k}
className='w-100'
onClick={this.props.handleClick}
>
{o + 'th'}
</Button>
)
}
})
}
</ButtonGroup>
</Col>
</Row>
</PopoverBody>
</Popover>
</th>
);