ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

bug: ion-datetime custom buttons styling does not work

Open pkunszt opened this issue 1 year ago • 1 comments


Ionic Framework Version

  • [ ] v4.x
  • [ ] v5.x
  • [X] v6.x
  • [ ] Nightly

Current Behavior

There is no way to set the buttons such that they are aligned to the left and right image

Expected Behavior

i can use some css to do so, or there are slot commands to place the buttons to the left / right / center

Steps to Reproduce

<ion-datetime presentation="date"> <ion-buttons slot="buttons"> <ion-button color="primary">Cancel</ion-button> <ion-button color="primary">OK</ion-button> </ion-buttons> </ion-datetime>

there seems to be a class, datetime-action-buttons that is rendered somehow, but this class is not accessible via css, nor via code (document.getElementsByClassName). In that class the width should be set to 100%, and then it should be possible to set the flex justify-content to space-between for the buttons. but none of this works.

Code Reproduction URL

No response

Ionic Info


Ionic CLI : 6.20.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.2.1 @angular-devkit/build-angular : 14.1.1 @angular-devkit/schematics : 14.1.1 @angular/cli : 14.1.1 @ionic/angular-toolkit : 6.1.0

Additional Information

No response

pkunszt avatar Aug 07 '22 10:08 pkunszt

@pkunszt can you share a snippet of your styles?

When slotting custom content, that node is available in the light DOM. At that point, you can add a selector to the button directly and target that selector to style the experience.

Many of our components, including this, use shadow DOM to encapsulate the template. When shadow DOM is enabled, you cannot target any selector, unless exposed with a CSS shadow part part="name" (::part(name)).

sean-perkins avatar Aug 09 '22 13:08 sean-perkins

@sean-perkins thanks for the answer. I did not use any additional styles, just whatever ionic gives me out of the box.

pkunszt avatar Aug 12 '22 16:08 pkunszt

@pkunszt sorry I misunderstood your issue.

When displaying confirmation buttons, the alignment is driven by platform styles:

On iOS, the buttons are aligned with space between the buttons. On MD, the buttons are aligned to the end of the container.

This aligns with the spec behavior:

If you want to change this behavior, you will need to slot through your own implementation of the buttons and apply custom styles.


  <ion-buttons class="my-custom-class" slot="buttons">
.my-custom-class {
  /* Your custom styles */

sean-perkins avatar Aug 16 '22 13:08 sean-perkins

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!

ionitron-bot[bot] avatar Aug 30 '22 14:08 ionitron-bot[bot]