ionic header, how to use whole screen - ionic-framework
The following is my ionic header code. I have the SVG in the ion-item element, which has ion-no-padding class.
Somehow, there is still space to the right, and a line below. Any hints as to why? I am quite new at ionic, so spending a lot of time in docs.
<ion-header class="ion-no-border">
<ion-item lines="none">
<ion-avatar slot="end">
<img src="assets/profile.jpg">
</ion-avatar>
<ion-button fill="clear" color="light">
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-item>
<ion-item lines="none">
<div class="ion-padding-start ion-padding-bottom">
<ion-label>
<h2>Choose a Car</h2>
</ion-label>
<ion-row class="ion-align-items-center">
<ion-col size="10">
<ion-searchbar placeholder="Oman, Muscat" searchIcon="location-outline"></ion-searchbar>
</ion-col>
<ion-col size="2">
<ion-button color="light" fill="clear">
<ion-icon slot="icon-only" name="options-outline"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
</div>
</ion-item>
<ion-item expandable=true class="ion-no-padding">
<svg style="pointer-events: none" class="wave" width="100%" height="50px" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 75">
<defs>
<svg:style type="text/css">
<![CDATA[
.a {fill: none}.b {clip-path: url(#a)}.c,.d {fill: hsla(234, 20%, 95%, 1)}.d {opacity: 0.5;isolation: isolate;}
]]>
</svg:style>
<clipPath id="a"><rect class="a" width="1920" height="75"></rect></clipPath></defs>
<g class="b"><path class="c" d="M1963,327H-105V65A2647.49,2647.49,0,0,1,431,19c217.7,3.5,239.6,30.8,470,36,297.3,6.7,367.5-36.2,642-28a2511.41,2511.41,0,0,1,420,48"> </path> </g>
<g class="b"><path class="d" d="M-127,404H1963V44c-140.1-28-343.3-46.7-566,22-75.5,23.3-118.5,45.9-162,64-48.6,20.2-404.7,128-784,0C355.2,97.7,341.6,78.3,235,50,86.6,10.6-41.8,6.9-127,10"> </path> </g>
<g class="b"><path class="d" d="M1979,462-155,446V106C251.8,20.2,576.6,15.9,805,30c167.4,10.3,322.3,32.9,680,56,207,13.4,378,20.3,494,24"> </path></g>
<g class="b"><path class="d" d="M1998,484H-243V100c445.8,26.8,794.2-4.1,1035-39,141-20.4,231.1-40.1,378-45,349.6-11.6,636.7,73.8,828,150"></path></g>
</svg>
</ion-item>
</ion-header>
ion-item {
--inner-padding-end:0px
}
I found the inner-padding was 16px, affecting the ion-item in the header. Problem solved.
Related
RouterLink not work in Ion-Button after adding ion-tabs but work fine without tabs , How can I solve this problem?
all working fine before adding ion-tab-button, I have buttons ionic with routing to another page
when i have added ion-tabs , the router link not work in button after click
where is my error ?! i need a solution .
this is my home.page.html
<ion-header translucent>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>SERVER STORE</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
<ion-grid>
<ion-row>
<ion-col size="12">
<ion-slides pager="true" [options]="slideOptsOne" #slideWithNav
(ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
<ion-slide *ngFor="let s of sliderOne.slidesItems">
<img src="assets/{{s.id}}.png">
</ion-slide>
</ion-slides>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid>
<ion-row>
<ion-col>
<ion-button expand="block" [routerLink]="['/iptv-list']" >IPTV List </ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-button expand="block" [routerLink]="['/sharing']" >Sharing List </ion-button>
</ion-col> </ion-row>
</ion-grid>
</ion-content>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button >
<ion-icon name="speedometer"></ion-icon>
<ion-label>مباريات اليوم</ion-label>
</ion-tab-button>
<ion-tab-button >
<ion-icon name="play-circle"></ion-icon>
<ion-label>WATCH</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
i find the solution : adding <ion-toolbar> as parent of ion-tabs solve my problem
Ionic ion-footer pushed Keyboard up
I have an ion-footer in my application in Ionic, but I am having a problem where the footer gets pushed up each time the keyboard comes out. I have added the:
Config XML
<preference name="KeyboardResize" value="false" />
<preference name="KeyboardResizeMode" value="ionic" />
<ion-footer class="ion-no-border" slot="fixed">
<ion-grid class="footer-tab">
<ion-row justify-content-around>
<ion-col>
<ion-button expand="block" fill="clear" [routerLink]="['/inicio']">
<ion-icon color="medium" name="home"></ion-icon>
</ion-button>
Início
</ion-col>
<ion-col>
<ion-button expand="block" fill="clear" [routerLink]="['/extrato']">
<ion-icon color="medium" name="list"></ion-icon>
</ion-button>
Abastecimento
</ion-col>
<ion-col>
<ion-button expand="block" fill="clear" [routerLink]="['/indicacoes']">
<ion-icon color="medium" name="happy"></ion-icon>
</ion-button>
Indique
</ion-col>
<ion-col>
<ion-button expand="block" fill="clear" [routerLink]="['/rede']">
<ion-icon color="success" name="pin"></ion-icon>
</ion-button>
Postos
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
CSS
.footer-tab {
font-size: 12px;
text-align: -webkit-center;
margin-top: -11px;
margin-bottom: 2vh;
color: grey;
}
[Screenshot keyboard pushes to up]
https://i.stack.imgur.com/ORiA2.jpg
Ion-slides error on ionic 3
I'm getting a problem using ion-slides on Ionic 3.
It's using all my screen size, but when i scroll down there is all my stuft and it is ok, but i need those slides be smaller
This is my code:
<ion-header>
<ion-navbar>
<ion-title>
Productos
</ion-title>
<ion-buttons end>
<button (click)="reloadProducts()" style="background:none" ion-button round full large text-center icon-right> <!--(click)="imeiViewer()"-->
<ion-icon name="cart"></ion-icon>
<ion-badge *ngIf="itemInfoHeader.length > 0" id="cart-badge">{{itemInfoHeader.length}}</ion-badge>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-slides pager>
<ion-slide style="width:100%; height: 50%; " *ngFor="let slide of slide_items" >
<div>
<img src="assets/img/{{slide}}.png">
</div>
</ion-slide >
</ion-slides>
<ion-grid>
<ion-row>
<ion-col col-6>
<button ion-button block icon-start>Filtrar
<ion-icon name="options"></ion-icon>
</button>
</ion-col>
<ion-col col-6>
<button ion-button block icon-end>Ordenar
<ion-icon name="reorder"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-grid>
<ion-col col-6 col-md-4 col-xl-3 *ngFor="let producto of itemInfo">
<ion-item class="item-thumbnail-left" >
<ion-grid>
<ion-row>
<ion-col col-6>
<img src="http://186.176.206.154:8088/images/Products/{{producto.ItemId}}_l_.PNG" >
</ion-col>
<ion-col col-6>
<h3>{{producto.ItemId}}</h3>
<ion-item class="item item-text-wrap">{{producto.ItemName}}</ion-item>
<p style="position:absolute;right:10px;">
<button ion-button (click)="addToCart(producto)" icon-end >
<ion-icon name="cart"></ion-icon>
</button>
</p>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-col>
</ion-content>
if anyone knows how to make my slides "circles" goes up. I tried reducing Height but it doesn't work.
I am using this as guide -> https://ionicframework.com/docs/components/#slides
Fixed! I had to add style="height: 300px;" on ion-slides.
How to make ion-slide responsive?
My ionic app has a slider with 2 slides, and they show up based on left and right swipe action. I want to make my page responsive. In case of large screen i want to show both slides side-by-side and swipe action to be disabled. How can i achieve this?
I think you want to do this so far <ion-slides autoplay="5000" loop="true" speed="3000" class="full"> <ion-slide> <img src="assets/img/gym.jpg" /> </ion-slide> </ion-slides> This code auto-change your images with the slide animation and it is more responsive also
Responsive grid view is working fine for me here <ion-content padding class="page-manhomeslider"> <ion-slides autoplay="5000" loop="false" speed="1000" (ionSlideDidChange)="slideChanged()"> <ion-slide> <ion-grid> <ion-row> <ion-col text-left> <ion-label style="color: black">1/12</ion-label> </ion-col> </ion-row> <img src="assets/gif/men/1-jumping-jacks.gif" class="slide_img"/> <ion-row> <ion-col class="pageheader"> <h2>Jumping Jacks</h2> </ion-col> </ion-row> <ion-footer> <ion-row> <ion-col> </ion-col> <ion-col> <div id="countdown"> <div class="countdown-number"></div> <svg> <circle r="28" cx="40" cy="40"></circle> </svg> </div> </ion-col> <ion-col> <ion-buttons class="btnend" end> <button (click)="goToSlide2()" ion-button round> <ion-icon name="arrow-forward"></ion-icon> </button> </ion-buttons> </ion-col> </ion-row> </ion-footer> </ion-grid> </ion-slide>
In React, I used states to update the slidesPerView property whenever the page is resized.
export default function ResponsiveSlides () {
const [slideOpts, setSlideOpts] = useState ({
initialSlide: 0,
speed: 400,
slidesPerView: Math.floor (window.innerWidth / 298),
spaceBetween: 1
});
function changeSlideOpts (key, value) {
setSlideOpts (
{
... slideOpts,
[key]: value
}
)
}
window.onresize = function (event) {
changeSlideOpts ("slidesPerView", Math.floor (window.innerWidth / 298));
};
return (
<IonSlides pager = {false} options = {slideOpts}>
<IonSlide>
<IonCard />
</IonSlide>
<IonSlide>
<IonCard />
</IonSlide>
<IonSlide>
<IonCard />
</IonSlide>
<IonSlide>
<IonCard />
</IonSlide>
<IonSlide>
<IonCard />
</IonSlide>
<IonSlide>
<IonCard />
</IonSlide>
</IonSlides>
)
}
ionic2: how to fit 3 cards to screen?
I am using Ionic2 and I want to make design like that: I made the cart but I can't make the position as image this is card code: <ion-grid> <ion-row wrap> <ion-col width-50> <ion-card> <ion-item> <ion-icon name="start" item-start></ion-icon> <ion-icon name="ios-heart-outline" item-end></ion-icon> </ion-item> <ion-card-content text-center> <ion-item text-center> <img src="http://safe-pay.co/safepay/public/uploadedimg/user/avatar.png" style="width:40px;height:40px" /> </ion-item> <ion-item> <span>Canon Power <br/>shot SX60 HS</span> </ion-item> <ion-item> <span id="oldPrice">119.900KD</span> </ion-item> <ion-item> <span id="newPrice">100.900KD</span> </ion-item> <ion-item> <ion-rating [numStars]="5" [readOnly]="false" [value]="3" (clicked)="starClicked($event)"> </ion-rating> </ion-item> </ion-card-content> </ion-card> </ion-col> </ion-row> </ion-grid> this is the output can any one tell me the how to position them
try putting style to make it aligned as you want .. <div style="width:100%;float:left;"> <ion-card style="width:33.33%;float:left;"> <ion-card-content text-center> SAMLE1 </ion-card-content> </ion-card> <ion-card style="width:33.33%;float:left;"> <ion-card-content text-center> SAMLE2 </ion-card-content> </ion-card> <ion-card style="width:33.33%;float:left;"> <ion-card-content text-center> SAMLE3 </ion-card-content> </ion-card> </div>