Dropdown Item on the right side not readable

[kaipaysen]

Please have a look at this fiddle: https://svelte.dev/repl/0a037a7a4190422e8efdecaa9aa6f005?version=3.42.6.

The Dropdown Menu "Options" has an item "Option 1 with long text leaking out of the view" which is currently not readable.

I'd expext Dropdownmenu (end) open it's items aligned to the right. Any ideas on how to achieve this?

[bestguy]

Hi, yeah that's annoying. This workaround seems to work: https://svelte.dev/repl/6e7373d1ecab40ec9f71bbb18f88318b?version=3.42.6

But the mobile behavior is not same. Will take a look what's off in the classes, etc.

[cdcarson]

I think I found the problem. The current Bootstrap javascript appends a data-bs-popper="none" attribute to an open dropdown. Annoyingly, Bootstrap then uses this attribute in the css to align the menus.

https://github.com/twbs/bootstrap/blob/e8f4cba9a05fc06fc6f7f11883b9c82e2027bff0/scss/_dropdown.scss#L45

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .dropdown-menu#{$infix}-start {
      --bs-position: start;

      &[data-bs-popper] {
        right: auto;
        left: 0;
      }
    }

    .dropdown-menu#{$infix}-end {
      --bs-position: end;

      &[data-bs-popper] {
        right: 0;
        left: auto;
      }
    }
  }
}

Not sure what the best way is to fix this in Sveltestrap. For now I'm doing this in my navbar component:

<style lang="scss">
  :global(.dropdown-menu-end) {
    right: 0;
    left: auto;
  }
</style>

[bestguy]

Ah thanks @cdcarson , I think we can add that conditionally. Yes super weird to use data attribute for styles... I'll look this weekend if we can fix here

[bestguy]

Will release soon, thanks for the heads up and suggested fixes

[bestguy]

Release in: https://github.com/bestguy/sveltestrap/releases/tag/v5.8.0