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;
}
Related
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;
}
I have a requirement where I am facing problem.
The requirement is :
I have a LIST VIEW in which every LIST ITEM having an CIRCULAR AVATAR.
What I want? On hover of CIRCULAR AVATAR of LIST ITEM it should change into a checkbox to select this list item.
And Also all the LIST ITEM above and below should also show CHECKBOX instead of avatar for MULTI-SELECT of LIST ITEMS.
I am using angular-material and angularJs in my project.
For Demo purpose please check the link.
https://inbox.google.com/
Thanks in advance.
I am editing this post with code
<md-button ng-click="toggle = !toggle">
toggle
</md-button>
<div class="container" layout="row" flex>
<md-sidenav md-is-locked-open="$mdMedia('gt-sm')" class="md-whiteframe-4dp" flex md-component-id="left">
<md-list flex>
<md-subheader class="md-no-sticky">Tapplent Team</md-subheader>
<md-list-item class="md-3-line" ng-repeat="user in users" ng-click="setSelectedUser(user)">
<img ng-src="{{user.avatar}}" class="md-avatar" alt="{{item.who}}" ng-show="toggle"/>
<md-checkbox ng-model="data.cb1" aria-label="Checkbox 1" ng-hide="toggle">
Checkbox 1: {{ data.cb1 }}
</md-checkbox>
<div class="md-list-item-text" layout="column">
<h3>{{ user.name }}</h3>
<h4>{{user.designation}}</h4>
<p>{{user.technology}}</p>
</div>
</md-list-item>
</md-list>
</md-sidenav>
</div>
Just to test I was doing with a button toggle that is basically Hiding and showing avatar and checkbox alternatively.
To hide the avatars and show the checkboxes on hover you can use CSS. Wrap the image and checkbox in a div and give it a class such as "avatarWrapper".
md-checkbox {
display: none; /* Initially hide the checkbox */
}
/* When we hover over the wrapper, hide the avatar */
.avatarWrapper:hover > img.md-avatar {
display: none;
}
/* When we hover over the wrapper, show the checkbox */
.avatarWrapper:hover > md-checkbox {
display: inline-block;
}
To hide all the avatars and show the checkboxes when at least one checkbox is checked, you can use ng-class to add a CSS class which will hide/show the appropriate elements.
HTML: ng-class will add class "atLeastOneSelected" if atLeastOneSelected() returns true.
I've added it to the list instead of to an element inside the ng-repeat because there is no need for it to check once per repeated element.
<md-list flex ng-class="{'atLeastOneSelected': atLeastOneSelected()}">
JS: You haven't provided your data or data structure so I've made up some. I've bound the checkboxes to user.selected with ng-model.
$scope.users = [
{
avatar: "https://cdn1.iconfinder.com/data/icons/user-pictures/101/malecostume-512.png",
name: "Matt",
selected: false
},
{
avatar: "https://cdn1.iconfinder.com/data/icons/user-pictures/101/malecostume-512.png",
name: "David",
selected: false
},
{
avatar: "https://cdn1.iconfinder.com/data/icons/user-pictures/101/malecostume-512.png",
name: "Tom",
selected: false
}
];
Function to check if at least one user is selected. Returns true/false.
$scope.atLeastOneSelected = function() {
$scope.users.some(function(user) {
return user.selected === true;
});
};
CSS:
.atLeastOneSelected img.md-avatar {
display: none;
}
.atLeastOneSelected md-checkbox {
display: inline-block;
}
Codepen
I'm writing an Ionic framework "sidemenu" type of app (based on the sidemenu demo/starter) that allows the user to choose a theme (basically, the bars and buttons colors).
The problem is when an user clicks a button to change dynamically the theme, it only changes the color of the menu's header and not the color of the views header (stays always in the first color of the array).
Here is a codepen example (just click on the "CHANGE COLOR" button on the side menu):
http://codepen.io/anon/pen/oXqQqm
NOTE: the variable $scope.temabar starts with the "ionic color positive" ($scope.temabar = 'positive';) and is changed when the button "CHANGE COLOR" is clicked.
Can anyone tell me what i'm doing wrong?
Thanks
Well you code pen does not work so I can't tell you what is wrong but if you want to change classes dynamically I would simply use ng-class directive. It is simple, easy, fast, and works. If you are already using ng-class please fix the codepen and I will update my answer :D https://docs.angularjs.org/api/ng/directive/ngClass
and an example:
http://codepen.io/sevilayha/pen/onfrd
HTML:
<div class="container" ng-app="classApp" ng-controller="mainController">
<div class="page-header">
<h1>Dynamic Angular Classes <small>String Syntax</small></h1>
</div>
<div class="row">
<div class="col-xs-6">
<!-- FORM STUFF =========================== -->
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Type Your Class" ng-model="superClass">
</div>
</form>
<p>Try:</p>
<ul>
<li>text-danger</li>
<li>text-success</li>
<li>text-danger</li>
<li>bg-primary</li>
<li>bg-info</li>
</ul>
</div>
<div class="col-xs-6">
<!-- NGCLASS EXAMPLE ============================ -->
<div class="jumbotron text-center">
<h2 ng-class="superClass">
Stuff Stuff
</h2>
</div>
</div>
</div>
</div>
CSS:
.bubble {
animation:pulse 1s infinite;
-webkit-animation:pulse 1s infinite;
}
#keyframes pulse {
0% { transform:scale(1); }
25% { transform:scale(2); }
75% { transform:scale(1); }
}
#-webkit-keyframes pulse {
0% { -webkit-transform:scale(1); }
25% { -webkit-transform:scale(2); }
75% { -webkit-transform:scale(1); }
}
JS:
angular.module('classApp', [])
.controller('mainController', function($scope) {
});
I'm new in AngularJS, how can i show popup a div on mouseover using AngularJS. If i resize a div on mouseover, it changes whole structure, how to show popup div without disturbing neighbors elements.
Markup
<div ng-repeat="x in images | filter:test" style="float:left; width:30%" ng-mouseover="count=1" ng-mouseleave="count=0" >
<img ng-src="{{x.path}}"
style="width: 100px; height:100px"><div> {{x.company}}</div>
<div style="background-color:#E6E6FA;text-align: center;"ng-show="count">
price:{{x.price}}</br>
size:{{x.size}}</br>
</div>
</img>
<div/>
I added extra things in markup like company,size on mouseover. help me in pop a image on mouseover. Thanks in advance
You have to do two things. First you have to position your popover element absolute, so that it doesn't disturb the flow of the other elements when it pops up. Something like this (z-index is what makes it to be over the other elements):
.popover {
position: absolute;
z-index: 100;
}
And in your html-markup you can use the ng-mouseover directive.
<div ng-mouseover="showPopover()" ng-mouseleave="hidePopover()">
more info
</div>
<div class="popover" ng-show="popoverIsVisible">Popover Content</div>
Your angular controller will probably look something like this
$scope.showPopover = function() {
$scope.popoverIsVisible = true;
};
$scope.hidePopover = function () {
$scope.popoverIsVisible = false;
};
If you have more than one, you are probably better of putting all that stuff into a directive
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