We Keep Coding

Bootstrap Dropdown Button Changes Position

I was following the documentation found here: https://getbootstrap.com/docs/4.1/components/dropdowns/
and added the following dropdown button:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Example 1</button>
</div>
The issue I'm having is that when the button is clicked on to display the dropdown-menu, the button changes it's position. This happens with both dropdown buttons I have.
Buttons Without Dropdown Clicked
Dropdown Clicked & Button Changed Position Example 1
Dropdown Clicked & Button Changed Position Example 2
You can see example code of this issue occurring: https://codepen.io/danfuentes/pen/MWaYOgz
How can I get it so that the button stays in place with the menu items appearing below it?

Surround your elements in a parent div element with btn-grp class like so:
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>

You will need to provide the HTML that surrounds the button element along with the css for all of those elements.
Can you update your question with this information so that we can see what's going on beyond just the button tag?
Update after seeing codepen:
You had a couple of div tags in the incorrect place, please see below for the solution:
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Example 1</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<a class="dropdown-item" href="#">Dropdown tesdt</a>
<a class="dropdown-item" href="#">Dropdown 2</a>
<a class="dropdown-item" href="#">Dropdown 3</a>
<a class="dropdown-item" href="#">Dropdown 4</a>
<a class="dropdown-item" href="#">Dropdown 5</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Example 2</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<a class="dropdown-item" href="#">Dropdown 1</a>
<a class="dropdown-item" href="#">Dropdown 2</a>
<a class="dropdown-item" href="#">Dropdown 3</a>
<a class="dropdown-item" href="#">Dropdown 4</a>
<a class="dropdown-item" href="#">Dropdown 5</a>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="#">Regular Button 1</button>
<button type="button" class="btn btn-primary" onclick="#">Regular Button 2</button>
</div>
Basically you want to wrap all of your buttons within a single div with a class of "dropdown".
The dropdown class declares the css position:relative which will ensure the positioning is correct for the dropdowns to display correctly without shifting other elements on the page around.
Update 2: I've updated the HTML above to resolve the new problem you encountered. You will need to wrap the individual dropdowns in div's with the class of "dropdown" to ensure they can have individual links. To make sure they do not shift from their intended positions all of the buttons are now wrapped in a div with the class of "btn-group".
The "btn-group" class ensures the position is set to relative however by default it introduces a few other styling quirks such as removing the spacing between the buttons. In order to override this I've also added the following to the css:
button {
margin: 10px !important
}
The above grabs all buttons on the page and gives them an all-round margin of 10px.
If you want to overwrite any bootstrap class stylings you will need to set the !important property on those elements.
Codepen with the solution:
https://codepen.io/pen/pojvprg

HTML + Jquery dynamically adding bootstrap dropdown

I have a small question.
Building a system to manage bookings. Now I would like each booking to have its own individual dropdown menu.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
All of my lovely actions
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="?add_booking_queue&id={booking_id}">Add to queue</a>
<span class="dropdown-item" onclick="show_booking_summary({booking_id});">Another action</span>
<a class="dropdown-item" href="?download_pdf&id={booking_id}">Download booking PDF</a>
</div>
</div>
Some code just like this.
But in case I have about 1000 bookings listed in a single screen. This would generate such a load of HTML that it would work against me in loading time. And it would probably increase browser memory usage.
Now I would like to have this dropdown menu to be dynamically added.
For example adding a single button with this feature
<tr>
<td>ticket : 293823098</td>
<td>price : $59,-</td>
<td>name : Donald Trump</td>
<td><i class="fas fa-cog booking-action" data-id="238232"></i></td>
</tr>
Then when clicking on the .booking-action it adds the mentioned above dropdown. Or similar. Not restricted to. Just as a reference. And using the set data-id="238232" / or another tag that contains just this.
My problem is that I seem not to be able to find the code or start required to realise this.
All I am finding are right-click context menu's and that's not what I am after.

Bootstrap dropdown not working when parent has a click event

I have a Bootstrap dropdown menu inside a container that triggers an event--the way I want it to work is, if you click the dropdown button, the menu items are displayed as normal. If you click anywhere else within the container, the parent event should be triggered (in this case displaying a Javascript alert). Instead, the event is being triggered even when I click the dropdown button.
Is there some way I can get the dropdown click event to "override" its parent event, so that if it's clicked its own evnet will be triggered the parent event won't?
<div class='main-container' onClick='alert("a thing was clicked!")'>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
<a class="dropdown-item" href="#">Action 3</a>
</div>
</div>
</div>
http://jsfiddle.net/0fpbcy2L/12/

Bootstrap jQuery dynamic table edit/delete/view button not working

I'd appreciate any help on this. I have this DataTable with the last column being a button that spans various options such as Edit/Delete/View. Upon clicking that, it should delete the entire row. However, I'm not able to get the currently clicked element.
Here's my code
$('.dropdown-menu a').click(function(e){
console.log($(this).data('value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<span class="dropdown">
<button id="btnSearchDrop_{{ index }}" type="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true"
class="btn btn-primary dropdown-toggle dropdown-menu-right"><i
class="ft-settings"></i></button>
<span id='selected' aria-labelledby=btnSearchDrop_{{ index }}" class="dropdown-menu mt-1 dropdown-menu-right">
<i class="ft-edit-2"></i> Edit
<i class="ft-trash-2"></i> Delete
<i class="ft-plus-circle primary"></i> View
</span>
</span>
</td>
This should log the id of tag but it doesn't.

I am not sure which version of jquery you are using but .data() function works in versions 1.4.3 and above. I tested your code here with jquery-3.3.1, which worked fine. Another way to get what you want would be to use .attr() function instead of .data() like:
alert($(this).attr('data-value'));

Bootstrap data-toggle disappears in browser

Something strange is happening currently on a website I'm building.
I'm using opencart (in case this mathers) to build a new webshop.
The cart widget in top right is clickable so it will open showing the products currently in the shopping basket.
So, as it has to be done in bootstrap I've added the data-toggle="dropdown"
<div id="cart" class="btn-group btn-block">
<button type="button" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-inverse btn-block btn-lg dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-shopping-cart"></i>
<span id="cart-total"><?php echo $text_items; ?></span>
</button>
<ul class="dropdown-menu pull-right">
...
</ul>
</div>
But, when running it in the browser, the toggle part disappears and this is what I get from the Chrome inspector:
<button type="button" data-loading-text="Laden..." class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total">0 product(en) - €0,00</span></button>
However, to make this even stranger (imo) a quick view on the source of that pages gives me this result:
<button type="button" data-loading-text="Laden..." class="btn btn-inverse btn-block btn-lg dropdown-toggle" data-toggle="dropdown"><i class="fa fa-shopping-cart"></i> <span id="cart-total">0 product(en) - €0,00</span></button>
Chrome also isn't prompting any javascript issues so I'm getting a little frustrated on this one.

its the $('.dropdown-toggle').removeAttr("data-toggle"); in ur commons.js file which is loading on Page load event. please remove it and try again.