Adding scroll bar to handle overflow of long network lists (#12706)

* Adding scroll bar to handle overflow of long network lists

* set scroll property to auto

* Add margin below scrollable network list
feature/default_network_editable
Dan J Miller 3 years ago committed by GitHub
parent 2ced3a8bfa
commit c84604b5e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 27
      ui/components/app/dropdowns/network-dropdown.js
  2. 6
      ui/css/itcss/components/network.scss

@ -338,20 +338,23 @@ class NetworkDropdown extends Component {
</div>
) : null}
</div>
{this.renderNetworkEntry('mainnet')}
{this.renderCustomRpcList(rpcListDetail, this.props.provider)}
<div className="network-dropdown-list">
{this.renderNetworkEntry('mainnet')}
<div
className={classnames('network-dropdown-testnets', {
'network-dropdown-testnets--no-visibility': !shouldShowTestNetworks,
})}
>
{this.renderNetworkEntry('ropsten')}
{this.renderNetworkEntry('kovan')}
{this.renderNetworkEntry('rinkeby')}
{this.renderNetworkEntry('goerli')}
{this.renderNetworkEntry('localhost')}
{this.renderCustomRpcList(rpcListDetail, this.props.provider)}
<div
className={classnames('network-dropdown-testnets', {
'network-dropdown-testnets--no-visibility': !shouldShowTestNetworks,
})}
>
{this.renderNetworkEntry('ropsten')}
{this.renderNetworkEntry('kovan')}
{this.renderNetworkEntry('rinkeby')}
{this.renderNetworkEntry('goerli')}
{this.renderNetworkEntry('localhost')}
</div>
</div>
{this.renderAddCustomButton()}

@ -128,6 +128,12 @@
width: 100%;
}
.network-dropdown-list {
max-height: 330px;
overflow-y: auto;
margin-bottom: 8px;
}
.network-dropdown-divider {
width: 100%;
height: 1px;

Loading…
Cancel
Save