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.
Related
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
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.
Using Bootstrap v3.3.7 and jQuery v1.12.4, I am creating a component which activates a HTML popover.
Please see the code below.
Clicking the button activates the popover. However clicking the caret icon within the button does not do anything. Any idea why and how to resolve this?
Click here for the jsfiddle.
<a role="button" class="btn btn-default po" data-poc="#html1">Test 1 <span class="caret"></span></a>
<a role="button" class="btn btn-default po" data-poc="#html2">Test 2 <span class="caret"></span></a>
<div id="html1" class="hide">
<strong>This</strong> is a test!
</div>
<div id="html2" class="hide">
<strong>This</strong> is another test!
</div>
Use this
<a id="po1" class="btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Test <span class="caret"></span></a>
click here
Before I post my question, just want to let you know I searched enough and couldnt find the solution. This issue is perplexing me.
I have following code. First ng-click correctly inserts the ID in the function, but generates angular error (mentioned in subject). Second ng-click neither generates error nor inserts the ID, instead it renders the literal.
I searched all the forums and most mentioned to use it like my 2nd ng-click but it is not working for me. Help required!
<tr ng-repeat="registration in vm.filteredList">
<td>{{registration.id}}</td>
<td>{{registration.dateModified | date}}</td>
<td>
<a class="btn btn-primary" ng-click="vm.editRegistration({{registration.id}})" href="#">E</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>
</td>
</tr>
ANSWER:
I did some testing and found out it is confusing for newbie because in HTML inspector of FF or Chrome developer toolbar, you will see that code will render
<a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>
instead of
<a class="btn btn-danger" ng-click="vm.deleteRegistration(1)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(2)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(3)" href="#">D</a>
but when the actual function fires it will pass the right value. For example below function will receive and show 1,2,3 etc.
vm.deleteRegistration = function (id) { alert("ID: " + id)};
Hopefully it explains and helps.
Should use
ng-click="vm.editRegistration(registration.id)"
without {{ & }}
I did some testing and found out it is confusing for newbie because in HTML inspector of FF or Chrome developer toolbar, you will see that code will render
<a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>
instead of
<a class="btn btn-danger" ng-click="vm.deleteRegistration(1)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(2)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(3)" href="#">D</a>
but when the actual function fires it will pass the right value. For example below function will receive and show 1,2,3 etc.
vm.deleteRegistration = function (id) { alert("ID: " + id)};
Hopefully it explains and helps.
I was using the code:
<div ng-click="joinPublicCourse({{course.id}})">
</div>
But browser kept logging the "Token '{' invalid key at column 19 of the expression...." error.
Course's definition goes like this:
course = {
id: '123',
...
}
Then I figured angualrjs could take course.id as a variable name, not a normal string. So I changed my code:
<div ng-click="joinPublicCourse('{{course.id}}')">
</div>
And this one succeeded.
i downloaded glyphicons from here, but can't load some of these icons in Boostrap 2.3.2. I tried to load phone and chat icons, but buttons are empty without icons. In browser console are no errors. How can i show these icons in Bootstrap 2.3.2 please?
<a class="btn btn-small" href="#"><i class="icon-chat"></i></a>
<a class="btn btn-small" href="#"><i class="icon-phone"></i></a>
If you have the css and the png in the correct paths, it looks like the proper use is:
<a class="btn btn-small" href="#"><i class="icon-large icon-chat"></i></a>
<a class="btn btn-small" href="#"><i class="icon-large icon-phone"></i></a>