Is there a way to autosize just the dropdown list in a angularjs listbox?
I don't want the top part to resize, just the dropdown.
Something like this:
enter image description here
Try using this html and css code as your basis to solve your problem.
Markup
<div class="wrapper">
<select class="dropdown">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
</div>
CSS
.wrapper{
width:150px;
overflow:hidden;
}
.dropdown{
width:150px;
}
.dropdown:focus{
width:auto;
}
Related
So I'd like to make the select tag dropdown look like a normal text link, but when clicked have it still activate ionics select (mobile dropdown) feature.(http://ionicframework.com/docs/components/#select)
This plunkr down below shows the look of the dropdown box I don't want. Can anyone help me turn the dropdown box into a text link please!
<select ng-model="myColor" ng-options="color.name for color in colors"></select>
https://plnkr.co/edit/A9ycYBKC1GUDhpCiskr5?p=preview
Adding the following to your plunker works:
<style>
select{
-webkit-appearance:none;
outline: none;
border: none;
background: none;
color: blue;
text-decoration: underline;
}
</style>
One possibility is to remove the select entirely and mock it using an unordered list. Example.
Link
<ul ng-if="show">
<li ng-repeat="color in colors">
{{color.name}}
</li>
</ul>
According to md-tab Documentation we can have custom md-tab-label, which I'm trying to do like this:
<md-tab-label class="my-label">
Label
</md-tab-label>
My css:
.my-label{
background: #40FF00;
}
However, the background color is not appearing for tab labels.
Am I doing something wrong ?
So, I was doing this the wrong way.
The correct way is:
Define your markup
Then add css
In this case, the css can be like:
all-tabs {font-size: 20px;}
.demo-tab {
color:green;
}
and in html:
<md-tab-label>
<all-tabs class="demo-tab"> {{$index+1}} </all-tabs>
</md-tab-label>
Resulting tabs:
I'm struggling to hide the heading from tabs created using Angular UI.
For my solution I need to set the buttons of the tab in the header and the contents in another container on the page.
I need to hide the tab buttons rendered by the directive.
Any idea?
<div id="menuTabs">
<div ng-class="{menuTab: true}" data-ng-click="tabActiveMenu1 = true">Menu1</div>
<div ng-class="{menuTab: true}" data-ng-click="tabActiveMenu2 = true">Menu2</div>
<div ng-class="{menuTab: true}" data-ng-click="tabActiveMenu3 = true">Menu3</div>
<div ng-class="{menuTab: true}" data-ng-click="tabActiveMenu4 = true">Menu4</div>
</div>
<div data-tabset id="menuTabs">
<div data-tab data-active="tabActiveMenu1">
<div data-tab-heading data-ng-class="{hide:true}"></div>
Content1
</div>
<div data-tab data-active="tabActiveMenu2">
<div data-tab-heading data-ng-class="{hide:true}"></div>
Content2
</div>
<div data-tab data-active="tabActiveMenu3">
<div data-tab-heading data-ng-class="{hide:true}"></div>
Content3
</div>
<div data-tab data-active="tabActiveMenu4">
<div data-tab-heading data-ng-class="{hide:true}"></div>
Content4
</div>
If you want to hide all but the active tab, you can do this in CSS with the following:
.nav>li>a {
display: none;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
display: block;
}
demo
If you want to remove all of the tabs, and just show the content, you could possibly edit the templates or use only the first rule above (so the tabs are always hidden active or not).
I too was looking for way to remove all the tab headers. Here's what I found was needed:
.nav>li>a,
.nav-tabs {
display: none;
}
The second line was necessary to remove the solid line at the bottom of the tab headers
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)
My client would like to have a split button list, but instead of an image, have a checkbox. That way, the user can check/uncheck an item, or touch the right-arrow to get more info.
The problem is:
The default styles will set the width of the element to 100% of the
parent container.
Q: How can I incorporate a checkbox into a split button list?
This works fairly well:
<div class="ui-grid-a">
<div class="ui-block-a">
<input checked type="checkbox" name="CollID" id="CollID217" class="custom">
<label for="CollID217">xxx</label>
</div>
<div class="ui-block-b">
Details
</div>
</div>
And then style it with:
.ui-grid-a .ui-block-a { width: 85% }
.ui-grid-a .ui-block-b { width: 15%; }
.ui-grid-a .ui-block-b a {
float:right;
}