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>
Related
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.
I have converted my PHP dynamic website into WordPress. Whole design is perfect. But unfortunately, when I click on any href link. it just changes in URL but not displaying the related linked page. Following images clarify more good:
When clicking on link:
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Degree Pages">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseDegreePages" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-graduation-cap"></i>
<span class="nav-link-text">Degree Management</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseDegreePages">
<li>Add New Degree</li>
<li>View All Degrees</li>
</ul>
</li>
result of clicking on
Add New Degree
See URL in below image:
Please help me to resolve this issue.
Thanks!
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
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.
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.