CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmodal-dialog
FlyingCat
FlyingCat

Reputation: 14270

How to build the modal in my case

I am using a bootstrap modal for my app. I have bunch of element inside my modal.

However, one of my element inside the modal is set as absolute position and the element is bigger than the modal. I want to show the element on top of the modal instead of being cut off inside the modal. I have tried the z-index but it doesn't work. Any suggestion? Thanks a lot!

modal html

<div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Test
            </div>
            <div class="modal-body">
               //....contents..
               <div class="option"> lots of stuff...</div> 
            </div>
        </div>
    </div>
</div>

css

.option{
    position: absolute;
    max-width: 600px;
}

It shows like

 --------------
|              |
|       -------|
|      |option |
|       -------|
|

but I want 

 --------------
|              |
|       --------------
|      |   option     |
|       --------------
|              |

Upvotes: 0

Views: 33

Answers (2)

J Prakash
J Prakash

Reputation: 1333

CSS:

.option{
    position: absolute;
    max-width: 600px;
}

it will work please check it .

Upvotes: 1

dzny
dzny

Reputation: 374

By default, the modal has "overflow:hidden". This property is causing large inner elements to cut off, instead of extending outside the bounds of the parent element. You can override bootstrap's style and use "overflow:visible", but this may have other negative side effects on the style.

Upvotes: 1

Related Questions