Dropdown-Menu - Floating Form Button

66 views Asked by At

Background

I am generating a web page that lists results, and I want to provide a menu (Bootstrap dropdown-menu) of filters that gets dynamically created with JS. Because some of the filters can have several "items" to choose, I enable scroll on the menu if the height surpasses 400px; however, I hate having the form's "submit" or "cancel" button at the very bottom of the menu when it may not be visible to the user's eye - I think it creates bad UX.

GOAL

  • I would like to create a floating effect for the two form buttons that "float" at bottom of the visible dropdown-menu - very much like Bootstrap's class="sticky-bottom".
  • I want the background surrounding the buttons to be blurry in a radial-gradient pattern, maybe?
  • When the user scrolls to the bottom of filter menu, I want to make sure there is space where the buttons would naturally live if this floating effect was not coded.

Issue

I think I am 50% there. Like I said, using Bootstrap's "sticky-bottom" class sort of does the trick, but then you have button right on top of text and it looks busy. I tried adding some CSS style on the element like so...

<div
  class="d-flex gap-3 p-3 rounded-pill"
  style="backdrop-filter: blur(3px);"
>
   [...buttons go here...]
</div>

...and this sort of gets what I am after - but I think its not the best looking. I was hoping I could make the blurry area get progressive/gradient as it focuses on the center of the button's element. This also creates extra padding on the menu itself that I don't like.

Another problem I have created while trying to create this floating effect is the div element that places my buttons at the "sticky-bottom" now cover the check boxes behind it - preventing me from performing my mouse clicks on the appropriate element.

Demos

  • Here is demo 1 of webpage stripped-down to illustrate at what I have with just "sticky-bottom"
  • Here is demo 2 where I tried to do -webkit-mask-image with a radial-gradient, but I was not following what was needed and what was not to be configured.

Suggestions

I'm open to suggestions for a better approach to achieve what I am after. There may be an option I have not even thought that may make this visually-pleasing?

0

There are 0 answers