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.
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
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>
)
}
I create a web page with a listbox and button, the problem is that when page loads, a white space appear at the right of both components, but if resize the page the spaces disappear.
<zk xmlns="http://www.zkoss.org/2005/zul">
<div apply="org.zkoss.bind.BindComposer" viewModel="#id('vm') #init('com.valid.pmngr.product.ProductViewModel')" height="100%" width="100%" style="border: 3px solid red;">
<style src="/css/style.css"/>
<div height="94%" width="100%" style="border: 3px solid orange;">
<vbox vflex="1" hflex="1" style="border: 3px solid blue;">
<hbox align="end" width="100%" style="background-color:#282425; padding: 30px 0px 15px 60px">
<separator height="58px"/>
<image src="/img/Logo.png"/>
</hbox>
<separator height="15px"/>
<grid>
<auxhead>
<auxheader label="Products" zclass="auxheader-g"/>
</auxhead>
<columns />
</grid>
<listbox model="#load(vm.productStatusList) #template((vm.displayEdit and each.editingStatus) ? 'editable' : 'noneditable')"
vflex="1" >
<listhead sizable="true">
<listheader label="Name" align="center"/>
<listheader label="Vertical" align="center"/>
<listheader label="Business unit" align="center"/>
<listheader/>
</listhead>
<template name="noneditable">
<listitem>
<listcell>
<label width="98%" value="#bind(each.product.name)" />
</listcell>
<listcell>
<label width="98%" value="#bind(each.product.vertical)" />
</listcell>
<listcell>
<label width="98%" value="#bind(each.product.businessUnit)" />
</listcell>
<listcell>
<button image="/img/edit.png" onClick="#command('edit')"/>
<button image="/img/delete.png" onClick="#command('delete')" />
</listcell>
</listitem>
</template>
</listbox>
</vbox>
</div>
<div vflex="min" style="border: 3px solid purple;">
<vbox hflex="1" vflex="1" style="border: 3px solid black;">
<button label="New" onClick="#command('newProduct')" />
</vbox>
</div>
</div>
</zk>
When page loads in full screen:
1
And after resize:
2
what is the problem?
EDIT
The white spaces appear in chrome, firefox and iExplorer and the version of zk is 8.0.1.1
I edited your fiddle to this. Can you check it out it meets your requirements?
I altered some things, for correctness :
Using spacing attribute in separator in stead of height.
vbox changed to vlayout as the align attribute is absolute here, and vlayout is lighter in generated html.
Removing the width and hflex where it is not needed.
Removing height and vflex where not needed and only set where needed.
Using the ZK framework, no matter what I do this tabpanel will not show itself and just ends up being blank.
<window id="indexwin" height="100%" width="100%" visible="true">
<style src="/css/itb.css" />
<hlayout width="100%" style="padding-right: 3px; text-align: right; overflow: auto" valign="middle">
<div width="260px" style="margin-right: 9px; padding-top: 6px; padding-bottom: 6px">
<button label="Logout" id="logout" sclass="logout-button"/>
</div>
</hlayout>
<tabbox width="99%" height="76%" style="margin:12px;">
<tabs>
<tab label="Anomalies" id="anomaliesTab"/>
</tabs>
<tabpanels>
<tabpanel id="anomalysearchpanel" style="background-color: #ffffff" >
<panel border="none">
<panelchildren>
<borderlayout width="100%" height="100%">
<west hflex="1" title="Search....
I previously had nested (included) windows which were fine but the collapsible panels were not working so I attempted to change. Is there any further information I need to add to
Did some research,
Your code is correct but I'm suspecting a bug.
<window id="indexwin" height="100%" width="100%" visible="true">
<hlayout width="100%" style="padding-right: 3px; text-align: right; overflow: auto" valign="middle">
<div width="260px" style="margin-right: 9px; padding-top: 6px; padding-bottom: 6px">
<button label="Logout" id="logout" sclass="logout-button"/>
</div>
</hlayout>
<tabbox width="99%" height="76%" style="margin:12px;">
<tabs>
<tab label="Anomalies" id="anomaliesTab"/>
</tabs>
<tabpanels>
<tabpanel id="anomalysearchpanel" >
<panel collapsible="true" tiltle=" ">
<panelchildren>
<label value="hey chillworld"/>
</panelchildren>
</panel>
</tabpanel>
</tabpanels>
</tabbox>
</window>
At title is no normal space but a space that counts as a char (alt gr + 255).
I needed to do this cause you the panel header is only visible when a title is set (a normal space doesn't do the trick).
Example of this in the this fiddle.
If you suspect also a bug, you can make an issue tracker at zk for this.
Include the fiddle and mention the difference with no title set.