Comments (5)
Thank you for submitting the issue!
I was unable to replicate the issue using the provided code snippet in v7. It displays aligned for me:
Please provide a minimal repro in order for us to debug this issue.
from ionic-framework.
Thanks for the issue! This issue has been labeled as needs reproduction
. This label is added to issues that need a code reproduction.
Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.
If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.
For a guide on how to create a good reproduction, see our Contributing Guide.
from ionic-framework.
Thank you for your reply.
I have started a vanilla example and indeed it looks normal.
But I noticed that when ios
seems to be used for themes it does not look right... (Obviously elements look different when using ios
style as opposed to md
style, see the header bar as an example)
Question then, if I may:
- What makes the
ios
ormd
style being applied? - Seems the
ios
styling is wrong? (I can deliver my vanilla app as soon as 1. is answered)
from ionic-framework.
I was able to set mode="ios"
to recreate the problem, in the vanilla example I created this page:
import { IonNote, IonLabel, IonListHeader, IonList, IonItem, IonButtons, IonMenuButton, IonIcon, IonButton, useIonLoading, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import {
power,
personAdd,
arrowBack
} from 'ionicons/icons';
const Test_Menu: React.FC = () => {
const [present, dismiss] = useIonLoading();
return (
<IonPage id="main-page">
<IonHeader mode="ios">
<IonToolbar mode="ios">
<IonButtons slot="start">
<IonMenuButton></IonMenuButton>
</IonButtons>
<IonTitle>Header test</IonTitle>
<IonButton routerLink="/login" routerDirection="back" fill="clear" slot="end">
<IonIcon slot="icon-only" icon={ power } />
</IonButton>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding" forceOverscroll={ true }>
<IonItem mode="ios" routerLink="/main/client-list" routerDirection="back" detail={ false }>
<IonListHeader mode="ios" style={{ color: '#2A5AAD' }}>
<IonLabel>test</IonLabel>
</IonListHeader>
<IonButton fill="clear" slot="start" >
<IonIcon slot="icon-only" icon={ arrowBack } />
</IonButton>
</IonItem>
<IonList>
<IonItem routerLink="/main/cash" detail>
<IonLabel>Cash</IonLabel>
<IonNote slot="end">
test
</IonNote>
</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
export default Test_Menu;
from ionic-framework.
After further inspection, I was able to replicate the issue. This is due to the way the code is being structured, not the mode being used. I would recommend reviewing the ion-list-header
docs page, it has a great example on how to add buttons.
This is the code snippet that will align the button and the list header:
<IonList>
<IonListHeader style={{ color: '#2A5AAD' }}>
<IonButton fill="clear">
<IonIcon slot="icon-only" icon={ arrowBack } />
<IonIcon slot="icon-only" icon={ personAdd } />
</IonButton>
<IonLabel>Video Games</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel>Pokémon Yellow</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Mega Man X</IonLabel>
</IonItem>
<IonItem>
<IonLabel>The Legend of Zelda</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Pac-Man</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Super Mario World</IonLabel>
</IonItem>
</IonList>
There have been a lot of changes since Ionic 4 and code structures have changed. Here's an upgrade guide that might be useful to determine what those code changes can be.
I'm closing this issue since it was due to code structuring.
from ionic-framework.
Related Issues (20)
- bug: can't control Modal with router params HOT 3
- bug: iOS condense header breaks page animation HOT 1
- feat: Remove ion-back-button text HOT 1
- bug: Lifecycle hooks ionViewWillEnter, ionViewDidEnter aren't fired when navigating back to the page HOT 1
- bug: Sheet modal overlay flashes when dismissed quickly using the handle on iOS HOT 2
- bug: HOT 4
- Cant Print all Pages using window.print in Latest Ionic HOT 1
- feat: Improve ion-reorder accessibility HOT 2
- bug: ion-checkbox don't let interact with label HOT 2
- bug: Cannot change ion-fab-button background using the provided css variables HOT 1
- bug: ion-icons have different sizes when combined with ion-toggle, ion-checkbox or ion-radio inside of an ion-item HOT 1
- bug: Ion Select Popover clips unnecessarily due to invisible radio button overlapping text
- bug: Order of running functions - closing modals HOT 1
- bug: Specifying provideIonicAngular() in a route provider prevents hydration from completing HOT 6
- bug: Using angular/cdk/overlay and ion-modal can cause conflicts. HOT 1
- feat: Ability to use relative color syntax in the theme file HOT 2
- Not able to access the documentation HOT 2
- feat: dynamic font scaling for the Picker component on the iOS platform. HOT 1
- feat: `form` property on form components HOT 1
- feat: HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ionic-framework.