Search
 

go back home...

My Contribution to FuelUX

I finally made my first open source contribution that I am proud of. Well not my first contribution and I'm proud of most of my work, but this was the first "real" one for me.

At ExactTarget (where I work) we use FuelUX for our front-end components. FuelUX extends Bootstrap, adding UI components that I/we use in our everyday development.

While I was working on a project something frustrated me. It frustrated me so much I knew I needed to do something. So I forked our repo and went to work.

The Problem...

...is that Bootstrap's dropdown menus always display themselves below the clicked element. When an element is positioned near the bottom of the page or the dropdown is too big, it will run off the page.

For our datagrid this is a HUGE problem (since most of them are stretched to the bottom of the page).

My Solution

To combat this "problem" I created a javascript file that highjacks the click events on the elements with data-toggle="dropdown". After highjacking the click, it makes a few calculations and will decide where to place the dropdown.

My first working-draft made calculations using the window as the containing element. But, what happens when a containing element has an overflow value not set to "visible"? Using the window would not work in this case.

To fix this, I cycle through the clicked element's parents, choose the closest element whose CSS overflow value is not "visible," and set this to be the container which the calculations are based on.

How to enable

  1. Include the JS and LESS files (gists below)
  2. Add data-direction to the same element that has data-toggle and set it to a value below:
    • up = will place dropdown above clicked element
    • down = will place dropdown below clicked element (falls back to default bootstrap behavior)
    • auto = will intelligently decide where to place dropdown based on height of dropdown and distances above and below the clicked element

I put the gists below, or you could check it out the FuelUX repo (2.4.0-wip branch).

Maybe this will end up in Bootstrap one day. Or, maybe not since Bootstrap 3 will be mobile first. I guess we'll see.

NOTE: If the clicked element's parent's position is set to static this will ALTER the styles. This is because my positioning won't work correctly in this situation so I overwrite it to relative.

NOTE 2: This code could probably be cleaned up a little more, but that's for a later time.

Gists

 

I am a life-long learner, adventure seeker, and front-end developer for @ExactTarget