How I can align the icon to the rightcorner position.
but it needs to be responsive too.
I have tried using header in ionic but the right alignment is not working properly.
<div class="bar bar-header" style="background-color:silver;">
<span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
<span class="title margin-align">
<img src="logo.img" style="width:45px;height:45px;"></img>
</span>
<i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>
</div>
By right corner position, do you mean you want it to be on the header bar's right corner side?
If so, any button/a tag after h1 div would be placed on the right side.
<div class="bar bar-header">
<button class="button icon ion-navicon"></button>
<h1 class="title">Header Buttons</h1>
<button class="button">Edit</button>
</div>
If not, can you provide a codepen so I can take a look?
You can try this with position: absolute on image span. Something like this:
<div class="bar bar-header" style="background-color:silver; position:relative">
<span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
<span class="title margin-align" style="position:absolute; right: 10px; top: 5px;">
<img src="logo.img" style="width:45px;height:45px;"></img>
</span>
<i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>
</div>
You can also use float: right:
<div class="bar bar-header" style="background-color:silver;">
<span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
<span class="title margin-align" style="float:right">
<img src="logo.img" style="width:45px;height:45px;"></img>
</span>
<i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>
</div>
I guess this might solve your problem of right aligning your image along with responsive design.
Related
Can any one help me centering a search bar in the center of the screen for different screen size, just like the googles search bar?
I have tried many ways but nothing worked.
<form class="form input-group" role="search">
<div class="form-group center-block input-group-btn col-xs-12 col-sm-12 col-md-12col-lg-12">
<div class="center-block" style="width: auto;">
<div class="center-block ">
<input type="text" class="form-control text-center" style="width: auto;" id="exampleInputAmount" placeholder="Search">
<button type="submit" class="btn btn-default"> <i class="fa fa-search" aria-hidden="true"></i> </button>
</div>
</div>
</div>
</form>
This CSS will centre your content both vertically and horizontally, which I think is what you are wanting to achieve.
position: absolute;
left: 50%;
top: 50%;
I am currently developing an app with ionic 3 and I experience one problem from the beginning.
The Statusbar on the startpage (ONLY on the startpage) looks transparent. Here‘s a screenshot:
But all the other pages look how they should look:
Why is that so and what can I do to get rid of this issue?
HTML of the startpage:
<ion-content>
<div class="head">
<div class="balance">
301 €
</div>
<div class="balancetext">
CURRENT BALANCE
</div>
<div class="menu">
<button class="addbutton" (click)="onNewIncome()">
<img src="./assets/imgs/plus.png"> INCOME
</button>
<div class="split"></div>
<button class="exbutton">
<img src="./assets/imgs/minus.png"> EXPENSE
</button>
</div>
</div>
</ion-content>
and necessary SCSS:
html, body{
width: 100%;
background-color: #f5f8fa;
}
.head{
background-image: url('../assets/imgs/pattern_1.png');
background-size: cover;
height: 15em;
box-shadow: 0px 0px 30px rgba(0,0,0,0.3);
}
Is there any way to use custom templates and group the matched results by a specific type property (like in the image bellow)?
Using this code.
<md-item-template>
<div class="col-xs-2 border-bottom: 1px solid #ccc;">
<span class="item-metastat" ng-if="item.type=='Staff'">
{{item.type }}
</span>
<span class="item-metastat" ng-if="item.type=='Branch'">
{{item.type }}
</span>
<span class="item-metastat" ng-if="item.type=='Region'">
{{item.type }}
</span>
<span class="item-metastat" ng-if="item.type=='State'">
{{item.type }}
</span>
</div>
<div class="col-xs-10 display">
<span> {{item.value}} </span>
</div>
</md-item-template>
i am able to create this design
What modification i need to do to repeat type only for a single time i.e first time ??
Unfortunately, there is currently no way of doing this. I was struggling around with the same problem lately and the devs #angular-material have closed all of their issues due to deprecation effort.
https://github.com/angular/material/issues/5182
We are going to have to rely on other components or fork the angular-material repository to create our own extended version of this directive.
I had a similar problem and this is how I fixed it:
https://plnkr.co/edit/R62Dp2JG0N8xNGU2pIQj?p=preview
Template:
<div class="row card-container">
<div class="col-xs-2">
{{item.type }}
</div>
<div class="col-xs-10 display">
<span>
{{item.value}}
</span>
<span >
<span class="meta-data-panel">
<div>
<strong>Id:</strong> {{item.id}}
</div>
<div>
<strong>Name:</strong> {{item.name}}
</div>
<div>
<strong>desc:</strong> {{item.desc}}
</div>
</span>
</span>
</div>
</div>
CSS
.meta-data-panel{
position: absolute;
top: 30px;
color: grey;
left: 25px;
}
.meta-data-container{
background-color:white;
}
.meta-data-panel > div{
display:block;
margin:0px;
height:25px;
}
.card-container{
border:1px solid #ccc;
height:130px;
}
.autocomplete-custom-template li{
position: relative;
height:130px;
}
Be aware that this using position absolute styling so you need to be careful with handling text wrapping and change the size based on the number of elements you are going to display.
I'm trying to vertically align my text on my screen. I've read through the docs on how to do this. But I'm still not having any luck. This is my code:
<div class="row">
<div class="col col-center text-center">
<h4 class="gray">This text is in the center of the screen</h4>
</div>
</div>
HTML
<div class="row">
<div class="col">
<div class="text-center">
<h5 style="text-align: center;">This text is in the center of the screen</h5>
</div>
</div>
</div>
This works on Ionic Framework 3.0.1:
HTML:
<ion-content padding>
<div>
<h4 class="gray">This text is in the center of the screen</h4>
</div>
</ion-content>
SASS:
ion-content {
div {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
Try this solution:
1.Add new css styles:
.home .scroll-content {
display: table !important;
width: 100% !important;
height: 100% !important;
margin-top: -50px; /* the height of the centered content */
text-align: center;
}
.home .scroll {
display: table-cell;
vertical-align: middle;
}
2.Apply home class to ion-view:
<ion-view class="home">
demo
How about specify the "height"?
Anyway, centralize your text in horizontal, you can also use align="center".
(To make it clear, I added the color to row and col.)
<div class="row" style="height: 900px; background-color: blue;">
<div class="col col-center" style="background-color: red;>
<h4 class="gray" align="center">This text is in the center of the screen</h4>
</div>
</div>
I'm having trouble with the responsive version of JSSOR slider.
I'm using full width slider.
My content and my navbar is in a container of 1250px width margin: 0 auto;.
What I want is that I put the captions also in this container.
Then the captions will align completely with my navbar and content.
But the slider also scales my container.
Is there a fix that the slider ignores my container?
Here is some demo code:
<div class="home-slider">
<div class="slides">
<div>
<img src="img.jpg" />
<div class="container">
<div u="caption" t="text" style="position: absolute; top: 60%; left: 70px;">
<p class="slider-caption-small">Lees meer over:</p>
</div>
</div>
</div>
</div>
</div>
Everything in the slides container should be always be scaled along with the slider.
If you want an element not scale with slider, please move it out and specify noscale="true" attribute.
<div class="home-slider">
<div class="slides">
...
</div>
<div noscale="true" class="container">
<div u="caption" t="text" style="position: absolute; top: 60%; left: 70px;">
<p class="slider-caption-small">Lees meer over:</p>
</div>
</div>
</div>