I'm building an app using Ui bootstrap to integrate some bootstraps components with AngularJs. I need to use a modal panel but concretely the predefined size 'lg' (large) is not big enough for what I need. So I need to customize. Reading the docs, to customize you need to pass a css class when you open the modal using the property 'windowClass'. So I have created a Css class called 'modal-huge' as follows:
.modal-huge .modal-dialog{
width: 80%;
}
.modal-body
{
height: 80%;
}
Then I pass this class as a parameter when I open the modal panel:
var modalInstance = $modal.open({
templateUrl: 'productDetail.html',
controller: 'ProductDetailController',
windowClass: 'modal-huge',
resolve:{
productDetail: function (){
$scope.hideLoader();
return response;
}
}
});
I used percentages for both width and height to have a responsive design, so they adapt to the size of the screen taking in account the size of the parent element.
My problem is that is working fine only for the width, but not for the height. For height is only considering the changes if I give the size in pixeles (px), but not if I give a percentage, which breaks the responsive design. Any idea what can be wrong or some way to fix it? Thank you very much!!
I display the rest of the code in case it helps you.
The modal panel code:
<div>
<script type="text/ng-template" id="productDetail.html">
<div class="modal-header">
<h3 class="modal-title">Product</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-ng-click="ok()">OK</button>
<button class="btn btn-warning" data-ng- click="cancel()">Cancel</button>
</div>
</script>
</div>
And the body where I have included the modal panel called 'productDetailPanel'
<body data-ng-controller="AppController">
<div id="container" class="container">
<toaster-container toaster-options="{'position-class': 'toast-container- custo','time-out': 3000, 'close-button':true}"></toaster-container>
<div id="header" data-ng-include="'partials/header/header.html'" > </div>
<div data-ng-view></div>
<div id="footer" data-ng-include="'partials/footer/footer.html'"> </div>
<!-- This is the div with the overlay css class, so no matter where it is located this div inside the screen, it will cover the whole screen-->
<div id="loader" class="loading overlay" data-ng- if="loader.loading">
<p>{{loader.loadingMessage}}</p>
<img alt="" src="images/ajax-loader.gif">
</div>
</div>
<div id="loginPanel" data-ng- include="'partials/content/panels/login.html'"></div>
<div id="productDetailPanel" data-ng- include="'partials/content/panels/productDetail.html'"></div>
</body>
In order for % height to work you have to set a height to the parent element as well.
In the .modal-body example the parent is .modal-content which in it's place has .modal-dialog as a parent.
Try something like this
.modal-dialog, .modal-content {
height: 100%;
}
.modal-body {
height: 80%;
}
Or check for similar questions Set bootstrap modal body height by percentage
Related
No matter what i do the H1 color stay white and without background color,
Here is my code:
<div ng-app="TestApplication">
<md-toolbar>
<h1 class="md-primary">Hello world</h1>
</md-toolbar>
</div>
Javascript:
var app = angular.module('TestApplication', ['ngMaterial']);
app.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('red')
.accentPalette('yellow');
});
codepen
I'm Using :
Angular - V1.4.8
Angular material - V1.0.2
Thanks you very much guys
You can only define the theme for directive. In case if you want to override the child element color use CSS.
h1{
color: red;
}
<div ng-app="TestApplication" ng-cloak>
<md-toolbar class="md-accent">
<h1> Hello world </h1>
</md-toolbar>
</div>
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) {
});
How can I with use of AngularJS Material Design lib achieve page structure such as described in the official Layout structure guideline and exemplified in the screenshot below? I want to have centralised card breaking the edges of the page toolbar. Codepen example would be highly appreciated.
Edit: related thread: Angular Material Design layout
I figured I'd post this to help others trying to do the same thing with Materialize CSS. You can change the height of the nav-bar, and the size/placement of card.
Demo
HTML
<nav>
<div class="nav-wrapper">
<i class="material-icons">list</i>
</div>
<div class="nav-wrapper">
</div>
</nav>
<
<<div class="row" id="card-placement"> <!-- id added here -->
<div class="col s12 m8 offset-m2">
<div class="card grey lighten-5">
<div class="card-content grey-text text-darken-1">
<h5 class="head">Title</h5> <!-- class added here -->
<div class="divider"></div>
<p>Stuff goes here</p>
</div>
</div>
</div>
</div>
CSS
/* Moves card up into navbar */
#card-placement{
margin-top:-60px
}
/* Moves Title position up to be level with nav bottom */
.head {
margin-top: -2px;
}
nav {
color: #fff;
background-color: #ee6e73;
width: 100%;
height: 112px;
line-height: 56px;
}
.nav-wrapper {
margin-left: 20px;
}
You can easily do this with a little CSS
.card_position{
margin-top:-70px
}
Add this class to the card element.
I am a noice programmer and new to the Ionic Framework and Angular.js. I am developing a mobile app using Ionic primarily "out of the box". But, I'd like to display an Ionic list that combines a:
checkbox
item content (e.g. string of text)
avatar (i.e. an image associated with the item)
See mockup below...
A streamlined example of the HTML markup looks like this:
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Combine Checkbox & Avatar in List</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<li class="item item-checkbox item-avatar-right">
<label class="checkbox">
<input type="checkbox">
</label>
<img src="http://placehold.it/100x100">
Item #1
</li>
<li class="item item-checkbox item-avatar-right">
<label class="checkbox">
<input type="checkbox">
</label>
<img src="http://placehold.it/100x100">
Item #2
</li>
</ul>
</ion-content>
</ion-pane>
But the page is displayed like so:
My questions:
Does the Ionic Framework support this combination (combining a checkbox and an avatar image in a list item)?
If so, what markup or code (HTML, CSS, JS) can I use to render this type of display?
You can see code with a simple example here:
Plunker Example Code
Appreciate guidance and direction from the Stackoverflow community!
I think that you won't be able to achieve that with Ionic default CSS. Maybe you should work on some css to adjust some positions due to CSS incompatibilities between these elements. However, I could reach something very close to what you showed. Put the following item in your plunker code and give it a try:
<li class="item item-avatar-right item-checkbox">
<img src="http://placehold.it/100x100">
<label class="checkbox">
<input type="checkbox">
</label>
<h2>Headline</h2>
<p>Description</p>
</li>
I was able to combine the item-avatar class with a checkbox by placing the checkbox on the right (using the item-checkbox-right class) and by overriding the min-height with 0.
My HTML:
<ion-content class="list">
<ion-checkbox class="item-avatar item-checkbox-right" ng-repeat="user in connectedUsers">
<img ng-src="{{user.picture}}">
<h2>{{user.name}}</h2>
<p>{{user.email}}</p>
</ion-checkbox>
</ion-content>
I also had to add the following CSS rule:
.item-avatar,
.item-avatar .item-content,
.item-avatar-left,
.item-avatar-left .item-content {
min-height: 0;
}
I got a result like the following:
I was working on a solution for the same problem and i came up with this css class : item-checkbox-img
Just add it to the img tag in your ion-checkbox
You can see the result in this codepen, the image is resized and its absolute position places it to the right of the item
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {});
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.item-checkbox-img {
vertical-align: middle;
position: absolute;
top: 0px;
right: 15px;
height: 100%;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<title>Toggles</title>
<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-list style="height: 2000px">
<ion-checkbox>ion-checkbox
<img class="item-checkbox-img" src="http://placehold.it/350x150">
</ion-checkbox>
<ion-checkbox>ion-checkbox
<img class="item-checkbox-img" src="http://placehold.it/100x100">
</ion-checkbox>
</ion-list>
</body>
</html>
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)