I'm using the Inspinia theme.
An example page
If you click the fa-chevron icon in the upper right of each ibox, it collapses the ibox.
I want to collapse all the iboxes with a collapse all button. And then expand them all with an expand all button.
The buttons look like:
<button type="button" data-action="expand-all" class="btn btn-white btn-sm">Expand All</button>
<button type="button" data-action="collapse-all" class="btn btn-white btn-sm">Collapse All</button>
I want clicking "Collapse All", to, in-effect, click all of the minimize panel buttons.
How?
I'm not sure what version you are using, but for the AngularJS implementation in directives.js you can see the function iboxTools that handles this. If you just want to use jQuery to manually do it it's as simple as:
//slide up (or down) all ibox content
$('div.ibox-content').slideUp();
//change the chevron
$('.ibox-tools a.collapse-link i').toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
Related
When I hover over a bootstrap button on my website it doesn't show the link in the bottom left corner in chrome. Am I missing something here? Here is the code I am currently using for the button.
<button type="button" class="btn btn-primary navbar-btn m-l-15 m-r-15" onclick="location.href='{$relative}/upload'">{translate c='menu.upload'}</button>
You can use an <a> element with a role of button and style it to look like a button but using the same classes that you are currently using.
Only caveat to this would be that you should determine the correct element to use in your situation - for example - a link (a element) should navigate you to a new location or context - whilst a button should be used if it does something in the same location / context.
Also - if the bottonhad other functionality that navigating to the desired location - you will need to re-introduce the click handler and apply logic to perform that function.
<a
href="{$relative}/upload"
role="button"
class="btn btn-primary navbar-btn m-l-15 m-r-15"
>{translate c='menu.upload'}</a>
You can replace it with a link , and style it.
Have a visit to Bootstrap website and you will find Details here.
You can put your link as follows and it may solve your problem
<a href="your_link_here">
<button type="button" class="btn btn-primary navbar-btn ml-5 mr-5">
{translate c='menu.upload'}
</button>
</a>
First change the margin-left and margin-right from m-l-15 and m-r-15 to ml-1 and mr-1. In bootstrap ml and mr class only take values from 1 to 5. It don't takes the values more than 5 in class. You have to give it to css.
Try This:
<a role="button" class="btn btn-primary navbar-btn ml-5 mr-5"
href="{$relative}/upload">{translate c='menu.upload'}</a>
I have a page (using Bootstrap and AngularJS) with several instances of the same button, each instance relates to a particular element the button is next to.
I want to implement a temporary window that will pop as soon as I click on one of the instances and will include a number of buttons.
For instance, imagine a table with data, each record showing different status and hence the options that will be offered will depend on the status of the record. Also, at the right of each record there is a button giving access to the possible actions on the record. Whenever I click on a button, a small window needs to be shown next to the clicked button showing the applicable actions (e.g. "Delete", "Activate", "Retire", etc.).
The size of the temporary window will adjust according to the number of buttons shown.
I found a nice solution (at least, it very well complies with my needs). It is a bootstrap dropdown button into which it is possible to embed a dynamic list of buttons (again, depending on the contents of the record in my example).
So, the HTML would look like:
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<button ng-if="Delete" type="button" class="btn btn-warning" ng-click="Delete($index)" aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Delete </font></button>
<button ng-if="Retire" type="button" class="btn btn-warning" ng-click="Retire($index)" aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Retire </font></button>
<button ng-if="Activate" type="button" class="btn btn-warning" ng-click="Activate($index)" aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Activate</font></button>
<button ng-if="Promote" type="button" class="btn btn-warning" ng-click="Promote($index)" aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Promote </font></button>
</div>
</div>
Thanks to those that posted suggestions.
<td style="position:relative">
<button>
button to be clicked
</button>
<div style="position: absolute; display:inline-block; /*width, height, top, bottom*/ these option you need to set">
option1 option 2 option 3
</div>
</td>
On click of the button hide/show this div. Because the div-Element is absolute to its parent container, it will be always near the button if you give proper attributes.
How can i have a dismissible popover that should hide when clicking on button also?
Right now only when clicking outside popover will close.But i want it to close when clicking on that button also.
<button popover-template="dynamicPopover.templateUrl" data-toggle="popover"
popover-title="{{dynamicPopover.title}}" popover-trigger="focus" class="btn btn-default" popover-placement="bottom" popover-elem>Popover With Template</button>
This is the link plnkr.co/edit/ioN7D5OQyRF7KMYw36l0?p=preview
Just remove
popover-trigger="focus"
here is an updated plunkr.
hope it helps.
New to Angular and struggling with how to do things the "Angular Way". All I want to do is click a button to show a hidden element inside a view then hide the button that was clicked. Any help would be awesome.
HTML:
<button class="btn btn-primary" ng-click="showDiv=true; hideMe()">
Show Div
</button>
<div ng-show="showDiv">
I was hidden now you see me, but how do I hide the button?
</div>
Controller:
$scope.hideMe = function(){
console.log('hide the button');
$scope.hide();
}
Code sample: Plunker
Ideally would like to incorporate ng-hide on the button and not have a function run inside of the controller.
<button ng-hide="showDiv"...
Should work also
Just add ng-show="!showDiv" to your button, this will hide it if showDiv = true
Just to be clear new html should look:
<button class="btn btn-primary" ng-click="showDiv=true" ng-show="!showDiv">Show Div</button>
I'm using the jQuery plugin called "sidr" (http://www.berriart.com/sidr/)
This plugin enables implementation of side menu.
With these code below, only the 1st button is clickable and working fine.
However, I want to enable both of these buttons to open side menu.
How can I modify my code?
Menu Part
<div id="sidr">
...Menu Contents here...
</div>
1st button
Menu
2nd button
<a id="menu" class="btn btn-primary btn-large" href="#sidr">Menu</a>
You are using the id twice, and jQuery only recorgnices the first id:
<a id="menu" class="btn btn-primary btn-large" href="#sidr">Menu</a>
you need to define another id to open the menu with both buttons
edit:
you could use the jQuery.sidr() Function to open the menus by yourself: