I am using a page as a right side menu but it is displaying the toolbar of the backgroud of the first page before it change to some other.So what can be done ?
You can change navigation color as following:
page1.html
<ons-page>
<ons-toolbar style="background: #4CD964;">
<div class="center" style="color: #FF0000" >Navigator</div>
</ons-toolbar>
...
</ons-page>
you can change the color of your navigation bar background with:
.navigation-bar {
height: 50px;
background-color: #f00;
}
for the text on it:
<div class="center" style="font-size:25px; color:#fff;">HOME</div>
and you can also change the color of your icon:
<ons-icon icon="bars" style="color:#fff;"></ons-icon>
Related
I created a dropdown menu that opens when you click on a text box, and then when you chose a string for that dropdown list, it puts it in the text box.
I would like to make that when you hover your mouse on the strings in the dropdown, they get slightly highlighted! how can I achieve this?
<div class="row">
<div class="col-xs-12 max300" uib-dropdown is-open="vm.descriptionDropdownOpen">
<textarea name="remarks" class="form-control" ng-model="vm.presence.description" ng-click="vm.toggleDescriptionDropdown()" autofocus></textarea>
<ul id="descriptionDropdown" uib-dropdown-menu>
<li ng-repeat="descr in vm.loadedDescriptions" ng-click="vm.presence.description = descr.text; vm.descriptionDropdownOpen = false;">
{{descr.text}}
</li>
</ul>
and the css to keep the dropdown aligned with the textbox:
#descriptionDropdown {
width: 100%;
line-height: 150%;
padding-left: 8px;
position: relative;
}
thank you very much
you can do something like this
#descriptionDropdown li:hover{
background-color:#eaeaea;
}
Change the color code to your desired color code.
And remove the padding from ul to avoid space around background when you hover. Instead, use padding on li
#descriptionDropdown li{
padding-left:8px;
}
You could add this css :
li:hover {
background-color: blue;
}
I've used ag-grid, and have followed the rule of having the parent div of the page define an explicit height so that I can set a maximum height on the grid, allowing scrolling, rather than growing in heigh indefinitely. So, I have something like this:
<div ng-controller="MyController as myCtrl" style="box-sizing: border-box; padding-top: 5px; width: 100%; height: 90%">
...
<div ag-grid="myGridOptions" class="ag-blue" style="width: 100%; height: 55%"></div>
This works fine, and the percentage behave as you'd expect.
I'd now like to set up some tabs using the angular material md-tabs. When I put my ag-grid inside the tabs, it seems that the height value I've set isn't high enough. I assume that it's using the height of the md-tab or the md-tabs, however, I'm not sure how/if I can explicitly set the height of the tab. I've tried doing so with a 'style' attribute, but it seems to have no effect.
I assume I need to force the tab, or tab container to be a certain height, but I'm not sure how to do this.
<div ng-cloak>
<md-tabs md-border-bottom >
<md-tab label="Tab1" >
<div ag-grid="myGrid2Options" class="ag-blue" style="width: 100%; height: 70%;"></div>
You could try add md-dynamic-height at <md-tabs>
Documentation: https://material.angularjs.org/latest/api/directive/mdTabs
<div ng-cloak>
<md-tabs md-border-bottom md-dynamic-height >
<md-tab label="Tab1" >
<div ag-grid="myGrid2Options" class="ag-blue" style="width: 100%; height: 70%;"></div>
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>
How can i make this onsenUi dialog open as fullscreen? I have a image inside this dialog.
<ons-dialog style="width:305px;height:400px;" var="naviDialog" cancelable>
<ons-navigator var="myNav">
<ons-toolbar inline>
<div class="center">
text sample
</div>
</ons-toolbar>
<div class="dialog">
<p>
<img src="images/picone.png"/>
</p>
</div>
</ons-navigator>
</ons-dialog>
I've found a way
<ons-dialog style="width:100%; height:100vh;" var="naviDialog" cancelable>
In order to make it vary according to the image size I've done the following:
/* under CC0 waiver */
.dialog{
width: auto;
max-width: 90%;
}
.dialog img{
width: auto;
}
Hope it helps others
I am trying to make a simple fade IN and fade out example in AngularJS.I need show a div with slide up or slide down or fade in fade out as we do in jquery . I have search button on header (left top button circle)**on click I show search div it is working in my plunker. My issue is to do animation...
http://plnkr.co/edit/Z5Y51werBnzM6Yl7tcTB?p=preview
Secondly I need to add z-index because it generates new layer. When I click search button **"my name " come down when search bar is open. Why?
<ion-view>
<ion-header-bar align-title="" class="bar-positive">
<div class="buttons">
<i style="font-size:25px!important" class="icon-right ion-android-radio-button-off" ng-click="showsearch()"></i>
</div>
<h1 class="title">Title!</h1>
<a class="button icon-right ion-chevron-right button-calm"></a>
</ion-header-bar>
<div class="list list-inset searchclass" ng-show="isdiplay">
<label class="item item-input">
<img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
<input type="text" placeholder="Search">
</label>
</div>
<ion-contend>
<div style="margin-top:50px">
my name
</div>
</ion-contend>
</ion-view>
Not trying to attack you here, but just some small feedback:
I took a look at your code and its quite messy to my likings.
your html is not correct ( you have two head tags, two body tags, two html tags?)
also you write
<ion-contend> instead of <ion-content>
and in your css z-index=999px instead of z-index: 999
but anyway here you have a plunkr doing exactly what you want it to do:
Working Plunkr
basically what I changed is the following:
To make the search bar fall over the content, you should make its position absolute and not relative.
Then I used ngClass to conditionally apply the fade-in, fade-out css3 animations depending on the state of the search bar (shown/hidden)
css snippet
/* Keyframes for the fade-in */
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration: 0.5s;
-moz-animation-duration:0.5s;
animation-duration:0.5s;
}