0

I am upgrading bootstrap from 4 to 5. I found that data-toggle="dropdown" needs to be changed to data-bs-toggle="dropdown".

My problem is after I did the upgrade one of my dropdown boxes shows up on the left side of screen under the button which shows up on the right side of the screen. They are both in a div tag that should be right aligning and putting them on the right column of two columns. Can someone help me figure out how to keep the drop down from escaping the div tag. Note: When I resize the page the dropdown box goes where it should be.

             <div id="pagetitle" class="row">
                <div class="col-md-6">
                    <span class="page-title">Claims</span>
                </div>
                <div class="col-md-6">
                    <div class="pull-right">
                        <button id="dropdownCreateNew" type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Create New <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownCreateNew">
                            <li class="dropdown-item"><a href="javascript:ClaimWindow('UB04Detail.aspx?pt=1');">Claim</a></li>
                            <li class="dropdown-item"><a href="javascript:ClaimWindow('RosterBillDetail.aspx?pt=1');">Roster Bill</a></li>
                            <li class="dropdown-item"><a href="javascript:ClaimWindow('NOEDetail.aspx?pt=1');">Hospice Notice</a></li>
                        </ul>

                    </div>
                </div>
            </div>

Here is a picture of how how the drop downs look. https://i.stack.imgur.com/fthDP.png

Amy Middleton
  • 1
  • 2

1 Answers1

0

After playing around I found that when I added an additional div tag after pull-right, that the group stayed together. Don't know why, but it worked.

                <div class="col-md-6">
                    <div class="pull-right">
                        <div>
                            <button id="dropdownCreateNew" type="button" role="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Create New <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownCreateNew" role="menu">
                                <li class="dropdown-item"><a href="javascript:ClaimWindow('UB04Detail.aspx?pt=1');">Claim</a></li>
                                <li class="dropdown-item"><a href="javascript:ClaimWindow('RosterBillDetail.aspx?pt=1');">Roster Bill</a></li>
                                <li class="dropdown-item"><a href="javascript:ClaimWindow('NOEDetail.aspx?pt=1');">Hospice Notice</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
Amy Middleton
  • 1
  • 2