SQLite How to by Tag:
If you don't want the nav-bar and want your tabs to appear at the very top of the view simply add this style: .tabs-top >.tabs, .tabs.tabs-top { top: 0 !important;...
So it turns out ionic have platform classes baked into the body class already, nice and easy. All I had to do was select on .platform-ios { } here is...
You can do it this way .wrapper { display: table; margin: 25px; } .wrapper .caption { display: table-caption; caption-side: bottom; text-align: justify; border: 1px solid grey; background: darkgrey; padding: .25em...
The item avatar has a default max-width and max-height property. You can find it in the ionic.css file. You can either change it over there or in your CSS just...
Side Menus should not be in your ionNavBar container. I've got an example here showing how to use SideMenu, Tabs, and Navigation elements together. You're close, its just some things...
You already found your answer but I would do something like that instead: In your css: .center { margin-left: auto; margin-right: auto; display: block; } And then just add this...
Following @daniel beck comment on his answer, I got something that works: it is not perfect, header and text size have to be the same and spacing must be the...
You are very close. Just keep track of a 'showing' flag, something like this: <div on-swipe-right="close(message)" ng-hide="hide">....</div> Then in your controller: $scope.close = function (message) { $scope.hide = true; };...
To increase the spacing between the icons use: .breadcrumb li a:before { margin-left: 5px; /* Increase this number for thicker space */ } But your question is unclear as to...
If you have 4 types of messages, you can leverage ngClass to craft something similar to the following, where you'll map a class to the particular message you are interested...
Sure, you can change any visual aspect in Ionic. Here's a working example from CodePen. So, I added the class to the header and added appropriate styling. Also, I added...
You could use a border trick with some pseudo elements for this: .onecorner, .twocorners { height: 50px; width: 300px; line-height: 50px; text-align: center; background: lightgray; margin-left: 25px; margin-right: 25px; position:...
put content out side the blurred div. .background-image { background-image: url('../img/background/image.jpg'); width: 100vw; height: 100vh; -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } <div class="background-image"></div>...
Not possible. Go into the Ionic.css and Edit it. You can edit it. I checked the Docu for Sass: http://ionicframework.com/docs/cli/sass.html The CSS is placed in this folder: www/lib/ionic/css The better...
Solution 1: add style="padding-bottom:8vh to your second div Solution 2: delete justify-content: space-around; from .circle in css because main reason for this space is that one. U should do it...
I think vh unit will help you. Please use vh. css:- #cool-button-div { position: relative; width:200px; margin:auto; margin-top:50vh; } ...
You can either set text-align to center and line-height to 50% or try this: .circle { background: blue; width: 50px; height: 50px; position: relative; border-radius: 100%; } .icon { position:...
You need the id selector # better use the class instead of id for your CSS rules. .list .item { background-color: #F0F8FF; border-width: 1px; border-style: ridge; border-color: #C0C0C0; } .list...
JS Solution It doesn't seem like there is a pure CSS way to do it. In theory, you should be able to dynamically add/remove the appropriate CSS classes via some...
Using flex-flow: Just add into yours .dashboard-top-item this CSS property with value: flex-flow: column; Result: JSFiddle. Using flex-wrap and min-width: This one is a little bit more complex. .dashboard-top-item {...
Well, there is a mistake in the general concept here. A hybrid application creates separate WWW folders for each platform, i.e. web, Android, IOS, etc. For example, following is the...
Don't know why you want to use background color but if you wanted gray email icon with size 35px do this. Full implementation here http://codepen.io/anon/pen/oLABwK .notify-icon { color: gray; font-size:...
See 1st you should never assign negative values to padding as it won't work. If you need to work with negative values then use margin, 2nd try adding width and...
Using the flexbox display type, you can easily achieve this: .dashboard-grey-menu { height: 30vh; background-color: #959595; display: flex; align-items: center; } .row { display: flex; justify-content: space-around; width: 100%; }...
Just define a mother class and override .popup default ionic class inside this way .my-custom-popup{ .popup{ //styling for popup width, width: 300px; } .popup-title{ //styling for title } } and...
try adding this in css at the bottom else you may need to use !important. .button-bar > .button:first-child{ border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } .button-bar > .button:last-child{ border-top-right-radius: 10px...
First you will have to set the root element to height:100vh Then use :nth-child to set the height and the margin of each divs *{box-sizing: border-box} :root{width: 100vw; height: 100vh;...
You are along the write lines. A slight modification is needed for it to work. Here is my markup: <button ion-button block color="menu-o"> <div> <ion-icon name="flash"></ion-icon> <label>Flash</label> </div> </button> The...
The CSS rule should look like this: .list .item-avatar.list-purple { color: #FFF; background-color: #b31f6f; } Notice that there is only one space in the CSS selector....
Have you tried ionic2 demo? You can simple defined .scss file with page. See attach image for reference. ...