I'm very new to Ionic and I have a simple question that I couldn't find in the documentation.
Is there any way to use Ionic classes to simply align the content which is now below the image, to the left?
The code I currently have is:
<ion-item class="item-left item-text-wrap">
<img src="http://placehold.it/100x150" alt="Poster">
<h2>Title</h2>
<h3>Something else</h3>
Thanks!
See this demo: http://play.ionic.io/app/e8f309f71714
You dont need to do any styling for this, ionic thumbnails will be of best use to you, see here Documentation.
This is how you will do
<ion-item class="item-thumbnail-left item-text-wrap">
<img src="http://placehold.it/100x150" alt="Poster" class="customized-image">
<h2>Title</h2>
<h2>Something else</h2>
<p>your large content goes here</p>
</ion-item>
item-thumbnail-left class is provided by ionic. You will only have to make some style class to make image rectangle. Because by default image will be square.This is how class can look like
.customized-image{
max-height: 100px !important;
}
customized-image class should be added to image tag.That is it, no more custom styling.
You Can acomplish it using inline-block
.item-left img {
display: inline-block;
width: 33%; /* or waterver you need = w1 */
vertical-align: top;
}
.item-left h2,.item-left h3 {
display:inline-block;
width: 66%; /* (100-w1)% */
vertical-align: top;
}
Related
I'm using Ionic 3 to make a website which will be part of another native app in a webview so I don't user cordova or any native plugins.
I have a form with an embedded Google Map View above the elements and here is my HTML :
<div style="height: 40%; width: 100%">
<div id="map_loader" *ngIf="showMapLoader">
<div class="sk-wave">
<div class="sk-rect sk-rect1"></div>
<div class="sk-rect sk-rect2"></div>
<div class="sk-rect sk-rect3"></div>
<div class="sk-rect sk-rect4"></div>
<div class="sk-rect sk-rect5"></div>
</div>
</div>
<div #mapCanvas style="width: 100%; height: 100%;"></div>
</div>
<form (ngSubmit)="submit()" padding>
<ion-list>
......
......
.....
</ion-list>
</form>
and here is my CSS :
#map_loader {
margin:auto;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
z-index: 1000;
position: absolute;
}
.scroll-content {
top: 38%;
position: absolute;
margin-top: 32px;
}
Now once the user open the website on his phone and start filling the form the keyboard shifts the map out of the screen ( Up ) and it stays that way and a blank empty space shows bellow the form.
Am I doing it right? Is that happening because of my CSS? and what is the best way to make a div takes a specific percentage of the screen height? I tried ion-grid but it seems that it can't help me for this case.
it's bug in ionic, once you focus on any input the keyboard will show up and will add padding-bottom for the scroll-content class to lift the for above the keyboard and it doesn't remove the padding-bottom after you close the keyboard.
I tried to check if I have any JS event on the mobile keyboard but we don't so my work around is to set a fixed padding-bottom for the scroll-content class to prevent changing it on the runtime.
.scroll-content {
padding-bottom: 0 !important;
}
Change in the AndroidManifest.xml file did the trick for me. android:windowSoftInputMode="adjustPan"
Yes, You can avoid this issue by using Ionic grid.You need to set CSS as shown below.
your-page.scss
ion-grid {
min-height: 100%;
}
I want to make ion-item allow overflow of it's contents. I tried the following css (scss to be specific)
ion-item{
overflow: visible;
height : 220px;
}
but it doesn't seem to work.
I also tried adding overflow : visible property to the elements generated by ion-item (like .item-inner, .item-block), but that didn't work too.
Edit (Adding code snippets)
home.html
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div class="rel-container">
<ion-list>
<ion-item>
<div>Name1</div>
<div>Name2</div>
<div>Lorem ipsum dolor</div>
<div class="error-container">
<div class="error">a quick brown fox</div>
</div>
</ion-item>
</ion-list>
</div>
</ion-content>
home.scss
ion-item,ion-list,ion-label, .item-md, .item-block, .item, .item-inner, .input-wrapper, .rel-container, .button-effect{
overflow: visible;
}
page-home {
ion-item{
height: 9rem;
}
.error-container{
padding: 5px;
background: red;
color: white;
position: absolute;
z-index: 400;
}
.rel-container{
position: relative;
}
}
Before I answer, here are some miscelleneous details
Ionic v3.3.0
Angular v4.1.2
The problem that overflow was not working as expected, was the CSS property contain : content; applied by Ionic for .item.
(More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/contain)
To solve this I just had to override it with
.item {
contain:none;
}
Peace! ✌️✌️✌️
You can just add the text-wrap directive:
<ion-item text-wrap>
Multiline text that should wrap when it is too long
to fit on one line in the item.
</ion-item>
https://ionicframework.com/docs/api/components/item/Item/
I want to add a sticky button at the bottom of screen (not page) in my angular 2 material project.
I tried some tweaks but currently when I scroll down the button doesn't stays where it was supposed to be.
before scroll it looks like below:
after scroll:
Elements's HTML inside template:
<a md-fab id="fab">
<md-icon>add</md-icon>
</a>
CSS Applied on the Element Except for any defaults:
#fab{
position: fixed;
right: 30px;
bottom: 30px;
}
*{
margin: 0;
}
How can I fix this?
Additionally is there any built in way with Angular material to do what I want?
UPDATE:
My main component's Template:
<toolbar></toolbar>
<side-nav></side-nav>
Side Nav's Template:
<md-sidenav-container id="sidenav-container">
// contents
<router-outlet></router-outlet>
</md-sidenav-container>
and its CSS:
#sidenav-container { // styling to make side nav of full height
position: fixed;
height: 90%;
min-height: 90%;
width: 100%;
min-width: 100%;
}
and then inside the component added by the router-outlet will come FAB element.
Notes-list component's template (the one shown in the images):
<a md-fab id="fab">
<md-icon>add</md-icon>
</a>
//rest of the content
LIVE DEMO
You are correct to put the router-outlet within the md-sidenav-container.
Add the follow class to your FAB element.
.md-fab-bottom-right2 {
top: auto !important;
right: 20px !important;
bottom: 10px !important;
left: auto !important;
position: fixed !important;
}
This is how I got it to work.
Add a custom class and apply your styles also look for the hierarchy in which files are referenced to DOM
<div class="example-container">
<h3>sticky icons</h3>
<a class="mine" md-fab routerLink=".">
<md-icon>check</md-icon>
</a>
<a md-mini-fab routerLink=".">
<md-icon>check</md-icon>
</a>
</div>
LIVE DEMO
Update 1 :
You are using the icon inside the md-sidenav container which is a mistake
<div class="example-container">
<md-sidenav-container>
<md-sidenav #sidenav>
<p>side nav works</p>
</md-sidenav>
</md-sidenav-container>
<p>content</p>
<a class="mine" md-fab (click)="sidenav.open()">
<md-icon>check</md-icon>
</a>
</div>
Updated Demo
Update 2 :
Look at the below code, you are wrapping everything inside sidenav which is wrong. Use as below
<md-sidenav-container id="sidenav-container"> </md-sidenav-container>
// contents
<router-outlet></router-outlet>
I'm working with Ionic framework, and I need to have a footer with background color red and with a text align in the center. The footer need to have a behaviour like a button; The footer is should be like a Button where in the center there is the text 'REGISTER':
I try this code:
IONIC HTML:
<ion-content>
Some content!
</ion-content>
<ion-footer-bar class="myColor">
<div class="buttons">
<button class="button">REGISTER</button>
</div>
</ion-footer-bar>
CSS:
.myColor{
color:red
}
.button{
color:white;
text-align:center;
}
But, it doesn't work. i don't know;
Some of you have some good advice:
Thanks!
You should just set the whole footer as a clickable element like this:
<ion-footer-bar class="myColor" ng-click="myRegisterFunction()">
REGISTER
</ion-footer-bar>
And then you can just use simple css:
.myColor {
background-color: blue;
text-align: center;
justify-content: center;
align-items: center;
color: white;
}
And in your controller you can call the function:
$scope.myRegisterFunction = function() {
// do the registration stuff
}
ion-footer-bar{ --background : blue; }
Firstly, I would like to say that I have tested if my link to my .css works, the background is made into a black color.
This is a ASP.NET Mvc test application which I am making, and I am having difficulty positioning some of my elements which are nested in div boxes. I have come to the conclusion that my div boxes nested within the topmostheader box is ignoring my .css code.
Here is my entire css file, called custom1.css
#topmostheader
{
background: none repeat scroll 0% 0% rgb(0, 0, 0);
height: 90px;
text-align: center;
}
#topmostheader.inner
{
width: 1280px;
margin: 0 auto;
text-align: left;
background-color: Red;
}
#topmostheader.app-name
{
font-size: 14px;
float: left;
line-height: 90px;
color: rgb(119,119,119);
margin: 0px 20px 0px 0px;
}
#topmostheader.xxx-logo
{
margin: 0px;
height: 90px;
float: right;
}
and here is my div box layout.
<div id="topmostheader">
<div class="inner" >
<div class="app-name">
Lunch Application
</div>
<div class="xxx-logo">
<img src="/content/xxx/logo.png" alt="xxx logo"/>
</div>
</div>
</div>
The desired result is not produced: the app-name, inner and acceleration logo divboxes are all dead-center in the screen, where the app-name must be in the left side, and the logo in the right.
I have tested the following code (Which produced the desired result, in an undesired manner - I may reuse this code multiple times which are in the .css file)
<div id="topmostheader">
<div class="inner" >
<div class="app-name" style="float:left">
Lunch Application
</div>
<div class="xxx-logo" style="float:right">
<img src="/content/xxx/logo.png" alt="xxx logo"/>
</div>
</div>
</div>
What am I doing wrong? Why are my div boxes not "floating" when I use the .css file?
To target the correct divs you need a space between the id and class name in your CSS rules: (e.g. change #topmostheader.app-name to #topmostheader .app-name)
You’re missing a space between your ID selectors and your class selectors.
#topmostheader.inner means “select the element with an id of topmostheader and a class of inner”.
You want #topmostheader .inner, which means “select elements with a class of inner that are descendants of the element with an id of topmostheader“
you need to put a space between the id #topmostheader and the class e.g. .acceleration-logo otherwise the browser assumes you are applying style to div with id #topmostheader and class .acceleration-logo not a child of class .acceleration-logo with parent of #topmostheader