I have a UI Bootstrap accordion whose heading I want to be fully clickable, not just the title like the default behavior.
<accordion class="fda-accordion panel-group panel-group-square" close-others="oneAtATime">
<accordion-group is-open="fdaClass1Open" ng-show="fdaRecallsClass1Count">
<accordion-heading>
<div class="panel-heading-blue">
<i class="fa fa-plus fa-fw" ng-class="{'fa-minus': fdaClass1Open, 'fa-plus': !fdaClass1Open}" style="margin-right:10px"></i>
FDA Class 1 Recalls ({{fdaRecallsClass1Count}})
</div>
</accordion-heading>
{{fdaRecallsClass1Content}}
</accordion-group>
</accordion>
Is there some workaround for this?
The issue is that the anchor that's handling the toggle is wrapped around the header text rather than the div. I would style the content of the heading with negative margins and matching positive paddings corresponding to the padding values of the heading panel in order to expand the clickable area beyond the div.
So say for instance the padding on your panel-heading is 9px 15px, you'd have the following css in your panel-heading-blue class
.panel-heading-blue{
margin: -9px -15px;
padding: 9px 15px;
}
Related
Is there any way to keep dropdown triangle (▼) displayed for multiple mode of ui-select?
<div ui-select multiple ng-model="selectedItems" class="form-control">
<div ui-select-match>
<span>{{$item.name}}</span>
</div>
<div ui-select-choices repeat="item in availableItems" >
<span>{{item.name}}</span>
</div>
</div>
I managed to steal the triangle from ordinary ui-select:
<i class="caret pull-right" ng-click="$select.toggle($event)"></i>
but having difficulties displaying it properly on the ordinary place to the right. Any tips? Thanks.
The solution I got so far: reused this caret class and made it displayed on top of the component using style position: relative; left: -1.5em;, placing the element right after ui-select (placing it straight inside ui-select is not possible because angularjs replaces it's content with own templates - so my caret comes after but then shifted left)
Also, I had to attach ng-click which does $select.toggle($event) to this caret element. As long as the $select is not available out of scope of ui-select, I had to introduce outer controller which includes both ui-select and caret elements - and simply assign $select a field within it using ng-init on ui-select.
So it looks something like:
<div ui-select multiple ng-model="selectedItems" class="form-control" ng-init="mySelect = $select">
<div ui-select-match>
<span>{{$item.name}}</span>
</div>
<div ui-select-choices repeat="item in availableItems" >
<span>{{item.name}}</span>
</div>
</div>
<span style="position: relative; left: -1.5em;" class="caret"
ng-click="mySelect.toggle($event)></span>
▼ is displayed only when dropdown is not opened. Also, clicking it requires some pixel-hunting (can be mitigated by putting the caret into a div that spreads vertical). So it's a partial solution.
The best approach I worked out is a scalable background SVG image applied using this CSS:
.select2-search-field {
width: 100%;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 13 6' fill='gray'><polygon points='0 1 8 1 4 5'></polygon></svg>");
background-repeat: no-repeat;
background-position-y: center;
background-position-x: right;
}
I encounter a very strange problem of Angular Material Gird List (1.0.0-rc2 - the latest Angular Material). I have a Grid List with 3 elements with background images. Everything load correctly after the initial page load. I have a delete button in each element. When click, it empty out the background image url value. After I click the delete button and empty the background image url value, the associated grid tile lost its width and height. The inside element just float to the top left and the layout is all broken. Here is codepen to illustrate the problem:
http://codepen.io/hughred22/pen/GpXZgy
As you see after clicking the delete button, the red text will lost its position and float to the top left. If you exam the tile, it has 0 width and height.
Here is the HTML code of the md-grid-list:
<md-grid-list md-cols="6" md-cols-sm="6" md-row-height="1:1" md-gutter="0px" md-gutter-gt-sm="0px" style="background: black;">
<md-grid-tile md-rowspan="3" md-colspan="2" md-colspan-sm="2" style="background-image: url({{vm.picturesObj[0].photo}}); background-size: cover;" class="top-tile-edit">
<p style="color: red; font-weight: bold;">The Text which is representing the inside elements. It align center when loaded.</p>
<md-grid-tile-footer>
<md-button type="button" class="md-raised md-warn" ng-click="vm.deleteAddedPhoto(vm.picturesObj[0].photo)">
Delete
</md-button>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile md-rowspan="3" md-colspan="2" md-colspan-sm="2" style="background-image: url({{vm.picturesObj[1].photo}}); background-size: cover;" class="top-tile-edit">
</md-grid-tile>
<md-grid-tile md-rowspan="3" md-colspan="2" md-colspan-sm="2" style="background-image: url({{vm.picturesObj[2].photo}}); background-size: cover;" class="top-tile-edit">
</md-grid-tile>
</md-grid-list>
I want to hide only clear button from datepicker directive in angular js.
Currently there are three buttons at the bottom of the angular js datePicker directive(Today, clear and Close), Is there any way to make visibility of these buttons configurable, such that i can hide one of the buttons out of it.
The Date picker which i am using is using ui-bootstrap library.
Currently there is now way to hide individual buttons in the datepicker button bar via options on the directive. You can override the template and remove the clear button, but that is a global patch and doesn't offer hiding/showing based on a condition. You could create a class that targets the button you want to hide as this plunk
.datepicker-noclear [ng-click="select(null)"] {
display: none;
}
demonstrates although that is a fragile workaround.
I would suggest submitting a feature request to add the option of which buttons are available in the button bar.
Easy, replace the template:
<script type="text/ng-template" id="template/datepicker/popup.html">
<ul class="dropdown-menu" ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
<li ng-transclude></li>
<li ng-if="showButtonBar" style="padding:10px 9px 2px">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button>
</li>
</ul>
</script>
You hack with css. It worked for me.
.ui-datepicker .btn-group .btn-danger.btn{
display: none;
}
Further to Rob J's solution, if we add a ng-class={"require": "vm.required"} to the parent div of the datepicker input, or simply add a class called require to the div. Then use the magic css to hide or show the clear button depending on the value of vm.required:
.require button[ng-click^="select(null)"] {
display: none;
}
if you want to remove the clear button, it means that the field is required, and as I do not agree with forcing things (like creating a div parent and typing classes), then just set the element for which you active the datepicker as required
[uib-datepicker-popup][required] + [uib-datepicker-popup-wrap] button[ng-click*="select(null"] {
display: none;
}
<input type="text" ng-model="datePicker.date" uib-datepicker-popup="dd MMM yyyy" readonly is-open="datePicker.opened" ng-click="datePicker.opened = true" required />
You can do this css trick to hide the clear button :
.uib-button-bar > .btn-group > .btn-danger {
display: none !important;
}
You can hide it by adding to style.css this :
.uib-clear {
display: none;
}
I am working with angularjs and the angular-bootstrap-ui package. Specifically, I am using bootstrap list-groups within the body of an accordion-group. I would like the list-group-items to extend all the way to the containing accordion-group's border. Here is a fiddle of the fragment, http://jsfiddle.net/qwesmv1d/1/. The list-group-items are being displayed with padding; however, I would like it to be 'full-width' as in this example, http://getbootstrap.com/components/#panels-list-group.
Code snippet ...
<accordion>
<accordion-group heading="Subject">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
</ul>
</accordion-group>
</accordion>
Any help appreciated .. thanks.
Override panel-body padding:
Add this into your main css
.panel-body{
padding : 0px;
}
I want use ng-class to conditionally add a class to the accordion-heading, but it appears that not even setting a class explicitly on the element gets preserved. I have this:
<div accordion close-others="true">
<div ng-repeat="currItem in items" accordion-group>
<div accordion-heading class="myClass">My Heading {{$index}}</div>
<div class="accordion-inner myClass">asdf asdf asdf</div>
</div>
</div>
And the fiddle: http://jsfiddle.net/Zmhx5/1/
When I inspect the accordion heading element, the class myClass is nowhere to be found. Is there some reason I can't add classes to the accordion heading?
You can put the CSS inside the directive accordion-heading tags:
<accordion-heading>
<div class="myClass">My Heading {{$index}}</div>
</accordion-heading>
In Angular UI Bootstrap, they have created a directive for accordion-heading. Template for this is written in ui-bootstrap-tpls.js. Try to modify directive for accordion-heading.
I ran into the same issue trying to conditionally apply a background color to the heading with ng-class. This is a bit of a workaround, but it does the trick.
First we need to remove the padding from the heading. If you inspect it, you'll see that it generates a div with a .panel-heading class and a padding: 10px 15px (see note below). The padding is what causes issues when trying to apply a background to a nested div, so lets remove it.
.panel-heading {
padding: 0;
}
Now we can add our nested div and give it the same padding to get back our previous look.
<accordion-heading>
<div class="myClass" style="padding: 10px 15px">My Heading {{$index}} </div>
</accordion-heading>
Here's the updated jsfiddle
Note my code above is from a different version of ui-bootstrap. The classes were slightly different in this jsfiddle, so you will see a slightly different solution. The concept, however, is the same.
you could just apply your CSS to an outer div like this:
HTML:
<div ng-app="myApp" ng-controller="MyCtrl">
<div accordion close-others="true">
<div class="myClass" ng-repeat="currItem in items" accordion-group>
<div accordion-heading>
<div>My Heading {{$index}}</div>
</div>
<div class="accordion-inner">asdf asdf asdf</div>
</div>
</div>
</div>
CSS:
.myClass {
background-color: gray;
color: black;
}
.accordion-inner {
background-color: green;
color: black;
}
JS:
angular.module("myApp", ['ui.bootstrap'])
.controller("MyCtrl", function ($scope) {
$scope.items = [{}, {}, {}, {}];
});
then, change it to use ng-class and it should work just fine
pd: (Sorry about the bad english)