Claro CSS for dropbutton items adds large gap of white space

Thanks, @jennypanighetti, I created a new patch to address the issue.

That works great, thank you so much!

This isn't fixed / committed.

Setting to needs review to run tests.

Is this replicated in core without a contrib module?

MR should be updated for 11.x as it will have to land there first to be backported.

IS update for Steps to reproduce.

After screenshot:

But this was changed in #3168326: Dropbuttons in table cells are potentially unusable if it includes options with long text length. → .

I'm unsure if this is a won't fix or a regression on #3168326: Dropbuttons in table cells are potentially unusable if it includes options with long text length. → .

Maybe ✨ Add new Splitbutton render element to eventually replace Dropbutton Needs work can solve this.

Can confirm the issue with the hook suggested in IS.
The MR 4382 did solve the issue.

Think it would be good to get this in now as the other may take a bit longer as it's a bigger fix.

This reverts a UI fixm in #3168326: Dropbuttons in table cells are potentially unusable if it includes options with long text length. → that prevented dropbutton items from being available to users.

.dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
  visibility: hidden;
  display: none;
}

It might be possible to get it working with setting .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item to a very tiny height. This means they would still occupy the width needed to keep the fix intact, but it won't consume that vertical space when the button is closed.

Hello @bnjmnm, I think we can't use both visibility: hidden; and display: none; together doesn't make sense, as they serve similar purposes of hiding elements but in different ways.

When you use visibility: hidden; the element becomes invisible, but it still occupies space on the page. On the other hand, when you use display: none; the element is completely removed from the layout.

Re #13

Hello @bnjmnm, I think we can't use both visibility: hidden; and display: none; together, and it doesn't make sense, as they serve similar purposes of hiding elements but in different ways.

When you use visibility: hidden; the element becomes invisible, but it still occupies space on the page. On the other hand, when you use display: none; the element is completely removed from the layout.

I see you mentioning my name as if you're responding to my suggestion in #12, the content of your response has nothing to do with my recommendation.

To reiterate, I'm saying don't change the visibility rules at all. Instead, set the height of collapsed splitbutton items to a very small height. That way they consume the horizontal space needed to retain the fix from #3168326: Dropbuttons in table cells are potentially unusable if it includes options with long text length. → but occupy a very small amount of vertical space thus fixing the problem reported.

@vpa24, do not switch this to 10.1.x - 11.x is the dev branch for Drupal. 10.x releases are tagged from it. It's a little confusing but when in doubt just keep it at 11.x

******************

Reminder the solution I suggested in #12 & #14 should work, for those interested in seeing this addressed.

Hi Ben I added the height to the required element and it seems to work fine.Attaching the screenshots for the same
Before:-

After:-

Cleaned up the issue summary some using the screenshots posted by @Utkarsh_33.

Solution seems good and matches the recommendation by @bnjmnm in #12

can we add a comment as to why we need to have the height changed in the CSS? I'm sure i'll wonder why it's there in a few months.

Comment added.

nod_ → closed merge request !4382

Committed and pushed bc18f36525 to 11.x and f0fefd6153 to 11.0.x and 7ca75f443f to 10.4.x and c86c46871a to 10.3.x. Thanks!

Automatically closed - issue fixed for 2 weeks with no activity.