bug: ion-datetime custom buttons styling does not work

[pkunszt]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

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

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:

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

[sean-perkins]

@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)).

[pkunszt]

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

[sean-perkins]

@pkunszt sorry I misunderstood your issue.

When displaying confirmation buttons, the alignment is driven by platform styles: https://ionicframework.com/docs/api/datetime#showing-confirmation-buttons

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: https://material.io/components/date-pickers/android#using-date-pickers

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

e.g.:

<ion-datetime>
  <ion-buttons class="my-custom-class" slot="buttons">
    <ion-buton>Cancel</ion-button>
    <ion-button>Confirm</ion-button>
  </ion-buttons>
</ion-datetime>

.my-custom-class {
  /* Your custom styles */
}

[ionitron-bot[bot]]

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!