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.

Sign up for GitHub

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

Jump to bottom

Let Autocomplete's options use the full width, before it breaks to a new line #1531

Closed
langz opened this issue Aug 25, 2022 · 3 comments · Fixed by #1542
Closed

Let Autocomplete's options use the full width, before it breaks to a new line #1531

langz opened this issue Aug 25, 2022 · 3 comments · Fixed by #1542
Labels
released

Comments

@langz
Copy link
Contributor

langz commented Aug 25, 2022 •
edited
Loading

It would be awesome if Autocomplete's options could use the full width in the drawer before breaking into a new line.

Attached is a screenshot from a form I'm making where we use Autocomplete to help the user to select country code for a phone number:

image

It's clearly more space available on the right side, not sure why it's not available for use 🤔

I think the reason for it to "break early" is something something related to

eufemia/packages/dnb-eufemia/src/fragments/drawer-list/style/_drawer-list.scss

Line 179 in fe6fbb7

grid-template-columns: 1fr minmax(2rem, auto);

Here's a screenshot of the same example, when I just remove the line of styling above:

image

An other example of when it doesn't "use the full width" can also be seen in the docs, https://eufemia.dnb.no/uilib/components/autocomplete/demos/#custom-width, pressing the top autocomplete example, the option "The Godfather" could have enough space to not wrap the text "The Godfather" over two lines.

image
@langz langz changed the title Let Autocomplete options use the full width, before it breaks to a new line Let Autocomplete's options use the full width, before it breaks to a new line Aug 25, 2022
@tujoworker
Copy link
Member

Yeah, maybe it would be good to just use that extra space, when the checkmark is shown? Here is a screenshot with the checkmark. But when its not selected, we could free up the space 🤔

Screenshot 2022-08-26 at 15 27 35

@langz
Copy link
Contributor Author

langz commented Aug 29, 2022 •
edited
Loading

Aha, so that's what the line of code is used for 👍
Yeah, something along those lines would be awesome. Like if it only contains text, and no icons, use the full width or so.

tujoworker added a commit that referenced this issue Aug 31, 2022
@tujoworker
fix(DrawerList): remove unused white area on the right side
b62e6a0 
Fixes #1531
@tujoworker tujoworker mentioned this issue Aug 31, 2022
Merged
tujoworker added a commit that referenced this issue Aug 31, 2022
@tujoworker
fix(DrawerList): remove unused white area on the right side (#1542)
b5575e7 
Fixes #1531
tujoworker pushed a commit that referenced this issue Oct 3, 2022
@semantic-release-bot
chore(release): 9.31.0 [skip ci]
2d48d4f 
# [9.31.0](v9.30.0...v9.31.0) (2022-10-03)

### Bug Fixes

* **Accordion:** support nested accordions ([#1595](#1595)) ([dc14a79](dc14a79))
* **AnimateHeight:** [internal] rewrite to TypeScript ([#1570](#1570)) ([e2f0f0d](e2f0f0d))
* **Autocomplete:** ensure value is not visible behind the trigger button ([#1543](#1543)) ([de65acb](de65acb))
* **Autocomplete:** make DrawerList direction observer work ([#1535](#1535)) ([fcdf9f8](fcdf9f8))
* **Autocomplete:** touch device issue: ensure focus is set after second input focus ([#1540](#1540)) ([2f3b82e](2f3b82e))
* **Avatar:** don't overwrite SVG color ([#1579](#1579)) ([a6b3f50](a6b3f50))
* **DrawerList:** remove unused white area on the right side ([#1542](#1542)) ([b5575e7](b5575e7)), closes [#1531](#1531)
* **Input:** ensure dnb-input--null class will not be set ([#1544](#1544)) ([885d2d1](885d2d1))
* **Modal:** Safari Desktop fullscreen video issue ([#1582](#1582)) ([5219ccd](5219ccd))
* **PaginationInfinity:** ensure the load button does not appear when current_page decreases ([#1147](#1147)) ([e19a377](e19a377))
* **Section:** fix spacing + rewrite to TypeScript ([#1573](#1573)) ([4352495](4352495))
* **Slider:** enhance Safari (desktop) UX ([#1539](#1539)) ([6ca785f](6ca785f))
* **Slider:** make it optional to provide an updated prop value ([#1537](#1537)) ([ff1f3b7](ff1f3b7))
* **StepIndicator:** change chevron icon to pointing to the right ([#1541](#1541)) ([8529d8c](8529d8c))
* **Tooltip:** convert to camelCase props with backwards compatibility ([#1557](#1557)) ([24285cb](24285cb))
* **Tooltip:** convert to TypeScript ([#1549](#1549)) ([9789ec6](9789ec6))
* **Tooltip:** ensure controlled active prop takes presence ([#1547](#1547)) ([ac28883](ac28883)), closes [#1411](#1411)
* **Tooltip:** fix React Portal handling ([#1588](#1588)) ([26f4c61](26f4c61))
* **Tooltip:** merge style property with internal ([#1591](#1591)) ([b3e3901](b3e3901))
* **Tooltip:** refactor tests from Enzyme to TestingLib ([#1553](#1553)) ([dde8576](dde8576))
* **Tooltip:** remove unused FormRow integration ([#1589](#1589)) ([be37918](be37918))
* **Tooltip:** rewrite to functional components with React Hooks ([#1555](#1555)) ([8b04fc2](8b04fc2))
* **Tooltip:** use Eufemia cubic-bezier for animations ([#1552](#1552)) ([c60b3a6](c60b3a6))

### Features

* **Breadcrumb:** add animation when in collapse mode ([#1563](#1563)) ([ded90c2](ded90c2))
* **Breadcumb:** align spacing and add small, medium and large ([#1574](#1574)) ([cf4c312](cf4c312))
* **DefinitionList:** add horizontal direction (inline) support ([#1536](#1536)) ([59ec706](59ec706))
* **Easing:** expose default CSS easing with --easing-default ([#1562](#1562)) ([c18b021](c18b021))
* **HeightAnimation:** add new height animation component ([#1566](#1566)) ([72b1da5](72b1da5))
* **HeightAnimation:** add onInit to get animation instance ([#1597](#1597)) ([bf4e656](bf4e656))
* **HeightAnimation:** adjust height with animation when content changes ([#1569](#1569)) ([f0779c2](f0779c2))
* **HelpButton:** rewrite to TypeScript ([#1565](#1565)) ([d4f26c3](d4f26c3))
* **icons:** add "file_jpg, file_png, fish, newspaper, sort" icon ([#1575](#1575)) ([bf3769f](bf3769f))
* **InteractionInvalidation:** add options for partial invalidation (tabIndex and ariaHidden) ([#1559](#1559)) ([6cfc235](6cfc235))
* **Logo:** add inherit_color prop ([#1578](#1578)) ([0983343](0983343))
* **Slider:** add tooltip on active thumb button ([#1529](#1529)) ([437f81c](437f81c))
* **Tooltip:** add skip_portal property ([#1545](#1545)) ([7f492a5](7f492a5))
* **useMediaQuery:** add disable as an option ([#1572](#1572)) ([6078cb4](6078cb4))
@tujoworker
Copy link
Member

🎉 This issue has been resolved in version 9.31.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
released
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(DrawerList): remove unused white area on the right side dnbexperience/eufemia
2 participants
@langz @tujoworker