Search code examples
yiiyii-extensions

changing height and width of modal in yiistrap

How can I change the height and width of modal window in yiistrap extension bootstrap.widgets.TbModal. One way is changing height and width parameters in bootstrap.css .modal-container but that will change the height and width of all modal windows. I want to change the height and width of only one modal windows while for other modals it should default one. How can I achieve this?

Solution

  • Simply specify the width of the modal with CSS of your own (don't forget to also set margin-left to negative half the width so that the modal appears centered on screen).

    For example, you could apply an additional class to the modal:

    $this->widget('TbModal', [
    'htmlOptions' => ['class' => 'modal-wide']
]);

    and use this CSS:

    .modal.modal-wide { width: 800px; margin-left: -400px }

    Or you could even use inline styles:

    $this->widget('TbModal', [
    'htmlOptions' => ['style' => 'width: 800px; margin-left: -400px']
]);