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

[CSS] Delete display:flex from pb-autocomplete #44

Open
plutonik-a opened this issue Sep 14, 2020 · 2 comments
Open

[CSS] Delete display:flex from pb-autocomplete #44

plutonik-a opened this issue Sep 14, 2020 · 2 comments
Labels
needs funding Issues falling out of scope for current budget. Contact us about cross-funding UI UI meets UX meets CSS design issues

Comments

@plutonik-a
Copy link
Contributor

plutonik-a commented Sep 14, 2020

pb-automplete simply consists of an input and a label.
Despite that fact, the unnecessary rule display: flex; align-items: center; is set globally and causes layout problems when adding more inputs into a form, or in mixing with other flexed elements.

I guess, the initial reason for this rule was to insert elements like a select element into the component, so that the select and input are displayed inline.
(-> Example "Combine with other form fields whose value is passed on" https://unpkg.com/@teipublisher/[email protected]/dist/api.html#pb-autocomplete.1)

Screenshot 2020-09-14 at 20 13 09

Another side effect could be that the dropdown with the autosuggestions will be pinned next to the input instead of under it.

This rule should be set by either placing a customizable variable into the webcomponent, or just left blank.

@plutonik-a plutonik-a changed the title [CSS] Delete display:flex from all pb-autocomplete elements [CSS] Delete display:flex from pb-autocomplete Sep 14, 2020
@tuurma
Copy link
Member

tuurma commented Sep 15, 2020

Indeed, the default behaviour of nested components (eg when combining pb-autocomplete with pb-select) should be aligned with the parent, like in the Combine with other form fields... example.

Would you care to create a PR for develop branch that assures this default behaviour is retained while not causing side-effects?

@JoernT
Copy link
Contributor

JoernT commented Sep 15, 2020

layout should certainly as basic as possible and such specific settings should be avoided. Further i found that often it's a good idea to just use 'inherit' on the :host matcher in a component to overcome such issues.

@tuurma tuurma added needs funding Issues falling out of scope for current budget. Contact us about cross-funding UI UI meets UX meets CSS design issues labels Sep 15, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs funding Issues falling out of scope for current budget. Contact us about cross-funding UI UI meets UX meets CSS design issues
Projects
None yet
Development

No branches or pull requests

3 participants