Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Alignment of button content #1220

Open
2 tasks done
trueqbit opened this issue Nov 27, 2023 · 97 comments
Open
2 tasks done

Alignment of button content #1220

trueqbit opened this issue Nov 27, 2023 · 97 comments
Labels
enhancement New feature or request

Comments

@trueqbit
Copy link

trueqbit commented Nov 27, 2023

Checklist

  • I could not find a solution in the existing issues or docs.
  • I agree to follow this project's Code of Conduct.

Description

I am using hanko-elements for login functionality in a web application.
The CSS for the wrapper of a button icon explicitly sets width and flex alignment:

.hanko_loadingSpinnerWrapperIcon {
  justify-content: center;
  width: 100%;
  column-gap: 10px;
  margin-left: 10px;
}

This makes it currently impossible to align the button content (icon and text) using the shadow DOM.

Describe your ideal solution

The ideal would probably be a CSS variable or respect alignment of the parent ::part(button).

Workarounds or alternatives

No response

Hanko Version

v0.9.0

Additional Context

The background is that I want to center-align the content of the button in the same way as usual in our application, also I find it a bit inconsistent with the alignment of the "Continue" button when all form elements are stacked.

A few screenshots show what it currently looks like:
Login challenge form:
Create Passkey form:

@trueqbit trueqbit added the enhancement New feature or request label Nov 27, 2023
@dhananjay-Byte
Copy link

hey @trueqbit i would like to work on this can you please assign me this?

@trueqbit
Copy link
Author

hey @trueqbit i would like to work on this can you please assign me this?

@dhananjay-Byte As I am not a contributor, I cannot change the metadata of a ticket...

@trueqbit
Copy link
Author

hey @trueqbit i would like to work on this can you please assign me this?

@dhananjay-Byte As I am not a contributor, I cannot change the metadata of a ticket...

@dhananjay-Byte Is there any progress here?

@FlxMgdnz
Copy link
Member

@trueqbit I'm assuming that you want to center-align the buttons, right?

@ahadalichowdhury
Copy link

@FlxMgdnz can i contribute on this issue??

@akash1812

This comment was marked as off-topic.

This comment was marked as off-topic.

@akash1812

This comment was marked as off-topic.

@awsmdeep

This comment was marked as off-topic.

This comment was marked as off-topic.

@Anjalisharma3463

This comment was marked as off-topic.

This comment was marked as off-topic.

@ItsVicky25

This comment was marked as off-topic.

This comment was marked as off-topic.

@Vishal-Agg1

This comment was marked as off-topic.

This comment was marked as off-topic.

@thisissushant

This comment was marked as off-topic.

This comment was marked as off-topic.

@poswalsameer
Copy link

Hi @trueqbit, any screenshot available would help a lot in finding the exact issue that you are facing in the UI. If possible, can you provide screenshots or exactly tell where you found this issue?

@vdhruvannaidu

This comment was marked as off-topic.

This comment was marked as off-topic.

@Sahil-Husen

This comment was marked as off-topic.

This comment was marked as off-topic.

@siddhakdak
Copy link

/assign

Copy link

oss-gg bot commented Oct 11, 2024

This issue is already assigned to another person. Please find more issues here.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

@HSRAKTU

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

@AmanSagar0607

This comment was marked as off-topic.

This comment was marked as off-topic.

@Awais142

This comment was marked as off-topic.

This comment was marked as off-topic.

@DanishAliUmar

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

@mohdshubair313

This comment was marked as off-topic.

This comment was marked as off-topic.

@sanyamhbtu

This comment was marked as off-topic.

This comment was marked as off-topic.

1 similar comment

This comment was marked as off-topic.

@Shahab-16

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

@Sarthak102

This comment was marked as off-topic.

This comment was marked as off-topic.

@prithak01

This comment was marked as off-topic.

This comment was marked as off-topic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: 🆕 New
Development

Successfully merging a pull request may close this issue.