Ionic-framework: Ionic 4: Action Sheet cssClass styles are not taking precedence
Bug Report
Ionic version:
Ionic cli
[x] 4.8.0
@ionic/angular
[x] 4.0.0
Current behavior:
Css class given to action sheet controller is not applied
Here is a image https://imagebin.ca/v/4VAY5ipacINn
Expected behavior:
It should successfully apply css class to action sheet modal
Here is a image https://imagebin.ca/v/4VAXiJ17wt4d
Steps to reproduce:
- Use steps from docs to open a action sheet modal.
- Create a class in your scss file, like the one below
.match-item-action-sheet{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
- Now provide the css class name to cssClass attribute in options of action sheet controller as shown below
const actionSheet = await this.actionSheetController.create({
mode: 'md',
cssClass: 'match-item-action-sheet red',
buttons: [{ ...
}]
});
- You can see your class is not applied to action sheet modal.
Related code:
insert short code snippets here
Other information:
Ionic info:
insert the output from ionic info here
sukheja-varun
All 18 comments
Can you debug if the class is being applied or not in the DevTools? If you can share an screenshot, that helps
manucorporat
on 29 Jan 2019
@manucorporat Here is the image https://imagebin.ca/v/4VAy11L0YXBI
sukheja-varun
on 29 Jan 2019
same issue:
1) .ts file (class "delete")
2) .scss file
3) DevTools
davayd
on 4 Feb 2019
I believe this is related to my comment here: https://github.com/ionic-team/ionic/issues/17166#issuecomment-460683307
I can look into this more later, but if anyone can confirm by adding !important to their CSS and seeing if that forces it to take precedence.
brandyscarney
on 6 Feb 2019
Hi @brandyscarney,
I tried adding !important but it did not work for me.
sukheja-varun
on 10 Feb 2019
@davayd
you can add cssClass upper
let actionSheet = this.actionsheetCtrl.create({
title: 'XYXYXYX',
cssClass: 'action-sheets-basic-page',
buttons: [
{
text: 'Share',
icon: 'share',
cssClass: 'actionsheet-Share',
handler: () => {
console.log('Create clicked');
}
}
scss
.action-sheets-basic-page {
.ion-md-share, actionsheet-Share {
color: #ED4248;
}
}
mntdragon
on 6 Jul 2019
@sukheja-varun
try this, I see it works when testing
.action-sheet-md .action-sheet-group .button-inner {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
把样式写在index.html的
Most helpful comment
Thanks for the feedback! As I stated at the beginning of my last comment, this issue is definitely a documentation issue. I get the frustration with the documentation, but saying "the docs are awful" is not something we can act on. The ionic-docs repository I linked above is a perfect place to create actionable documentation issues that we can improve upon.
After reviewing this issue I created my comment above to make sure I covered all of the use cases mentioned here and then added documentation via this PR to all of the scoped overlays to help clarify it. Reviewing the issue, commenting and adding the documentation took hours of my time, which is definitely important and needed to be done, but this takes away from time spent on bug fixes. This is why it's so helpful when a documentation issue is created that states "Angular's component level stylesheets don't work for overlays" as this is something that we can review and add documentation for. When issues are created here stating it's a bug we have to investigate it which is time consuming with so little of us and so many issues. This is why we often recommend asking support questions on the Ionic Forums as you are more likely to receive a faster response.
The plugin documentation is a community based effort, besides the enterprise plugins. We have outlined this in the Ionic Native docs here and here. Each one is maintained in its own repository. For example, Analytics Firebase is located on
appfeels GitHub. While the usage on these is limited, the community plugins mostly serve as a listing to view the full documentation on their individual repositories.I know it seems like a lot of resources are going into React and Vue support, but because our core components are now web components — these integrations are simply bindings on top of the components. The entire time that the React integration was being worked on most of the framework team was working on including support for Angular 9 / Ivy and adding features and fixes to the core Ionic components (which Ionic React benefited from, but it was not done specifically for that integration). The important part here is that the core components & Angular have not suffered as a result of that work. It has always been our ultimate goal to expand framework support though.
I'm not sure who it is you reached out to, and although I can't speak for them personally, I can say with confidence that it wasn't ignored or dismissed — at least not on purpose. Due to being a small company with a lot of moving parts, sometimes feedback falls through the cracks. I'll make sure the issue surrounding the plugins documentation is brought up with the rest of team again though and if you'd like to reach out to the team directly outside of GitHub you can email us at help at ionic dot io.