Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Typeahead dropdown is cutoff in modal (in 2.2.2) #6344

Closed
vladar opened this Issue · 14 comments
@vladar

In 2.2.2 typeahead dropdown is inserted after input (vs appended to body). But since .modal-body has relative position and dropdown - absolute position - it is truncated in modal.

See test case at http://jsfiddle.net/t4f2g/2/

@reaperhulk

The same issue also exists for popovers (see: http://jsfiddle.net/9dHpw/5/)

@Yohn

this was from a recent change to the modals css by adding position: relative; to the modal-body (reference #5991) to allow the dropdown or popover to scroll with the modal-body when it is being scrolled..
I was trying to figure out another fix for this, but havent found a good one yet.

@zo103181

I found that if you set the .modal-body { overflow: visible } this should fix the typeahead truncate issue. (http://jsfiddle.net/MgcDU/1048/)

I am still not sure about the popovers.

@reaperhulk

Setting overflow: visible does make the popovers work as well. I've added this as a workaround in my own code with no issues, but it's certainly possible that it causes other issues I'm not aware of.

@vladar

{ overflow:visible } will mess up the dialog when inner content is too large to fit into .modal-body (e.g. http://jsfiddle.net/72tNC/), so this solution won't work for everybody.

@zo103181

@vladar You are correct. I am new to Bootstrap / Github and still attempting to grasp how everything works.

I've added following css to correct the inner content so it fits inside the modal, but now the typeahead items dont display properly (http://jsfiddle.net/72tNC/6/)

.modal-body .typeahead {
overflow: visible;
}

@jfirebaugh

Did typeahead use to append to body? If so, why was it changed? That's the only way I know of to get the correct z-index and overflow behavior.

@TheCloudlessSky

@jfirebaugh Yup - 1747caf

I agree that it's a totally lame change since it introduced such a headache with modals.

@jamwaffles

If you're happy with hiding any overflowing content, this is a dirty fix for the issue. This is hardly user-friendly, though Typeahead works in my testing.

TWBS

.modal-body {
    overflow: visible;
}

.modal-footer {
    position: relative;
    z-index: 1;
}
@mdo
Admin
mdo commented

Punting as a won't fix as we're going to completely redo modals for v3. Until then, please use any of the fixes mentioned above that work for you. Thanks!

@mdo mdo closed this
@Glideh

@jamwaffles your css does not fix the vertical overflow when .modal-body contains too many inputs.
I think .modal-body should still be overflow-y: auto.
It seems like the only way to manage it is to append the typeahead to the body instead.

@TheCloudlessSky

@Glideh - I agree. The CSS doesn't really work for us either since our modals use scrollbars inside of the .modal-body.

I wish @mdo and @fat would still support the 2.x and not leave all of us behind that can't necessarily upgrade to 3. At least fixing some of these bugs would be enough.

@lockheedman

I've modified _show method of DropdownView like this to get it working:

    var $parent = this.$menu.closest('.twitter-typeahead');
    .$menu.css({
        display : 'block',
        top     : $parent.offset().top + $parent.outerHeight(),
        left    : $parent.offset().left,
        position: 'fixed'
    });
@cvrebert cvrebert locked and limited conversation to collaborators
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Something went wrong with that request. Please try again.