Search code examples
angularjsangular-ui-bootstrapangular-bootstrap

UI-Bootstrap, adjust modal dimensions according to contained image


I am using component based architecture and want to show bootstrap modal which gets adjusted to image height and width.

Most of the forums suggested to use height and width in percent but this will not going to help as image size can vary.

Has anyone achieved this?


Solution

  • There's a simple solution for this. first of all you will need to override the modal's width property (height is auto adjustable and shouldn't be a problem), the modal window uses the .modal-dialog class, so use !importent to override width

    .modal-dialog {
        width: fit-content !important;
    }
    

    content-box will adjust the width according to what the element contains.

    here's a demo