I am facing an issue with a Bootstrap 5 button group inside a modal. The height is set to
style="overflow-y: auto; max-height: 290px; min-height: 290px;"Whenever a button inside the modal div is clicked, the scroll centers to the middle button. I want to prevent this behavior and keep the scroll position where the button was clicked.
<div id="SelectLMSPlayer" class="modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<label class="mx-auto d-block" style="font-weight: bold; font-size: medium;">Select this week's player</label>
<label class="mt-1"><label class="box lightgray me-1 align-bottom"></label>- Player has been used</label>
</div>
<br />
<div class="form-group mb-4" style="overflow-y: auto; max-height: 290px; min-height: 290px;">
<label for="ddlPlayers">WGR - Player</label>
<div id="playergroup" class="btn-group-vertical gap-1 btn-group d-flex m-1" role="group">
<input type="radio" class="btn-check" name="available" data-wgr="1" id="46046" alt="0" autocomplete="off" value="Scottie Scheffler"/>
<label class="btn btn-sm btn-outline-secondary rounded" id="46046" for="46046"><column>1</column> - <column>Scottie Scheffler</column></label>
<input type="radio" class="btn-check" name="available" data-wgr="2" id="28237" alt="0" autocomplete="off" value="Rory McIlroy"/>
<label class="btn btn-sm btn-outline-secondary rounded" id="28237" for="28237"><column>2</column> - <column>Rory McIlroy</column></label>
<input type="radio" class="btn-check" name="available" data-wgr="3" id="46970" alt="0" autocomplete="off" value="Jon Rahm"/>
<label class="btn btn-sm btn-outline-secondary rounded" id="46970" for="46970"><column>3</column> - <column>Jon Rahm</column></label>
... More buttons here ...
</div>
</div>
<div id="divSelectPlayer">
<div class="d-grid gap-2 mt-auto">
<button id="btnSelectPlayer" value="" name="" class="btn btn-success">Make Selection</button>
</div>
</div>
</div>
</div>
</div>
</div>
This is the initial appearance before clicking on any button.
On clicking any button, the scroll position centers to the middle button.
The scroll behavior centers the group of buttons vertically, and I'm looking to disable this centering action. I have tried different approaches but haven't found a solution yet.
Notably, changing the buttons to be displayed horizontally did not have the same scrolling behavior. I'm developing this on .NET Core 6 and Razor pages.
EDIT: I confirmed the issue by testing the button group on the W3Schools Bootstrap Button Group tester and encountered the same problem.