CODEWITHSUNDEEP
csstwitter-bootstrap
David Gourde
David Gourde

Reputation: 3914

Use parent div size for Bootstrap responsive grid system

I need to use bootstrap 12 columns grid to get a responsive form based on the parent div's size.

As an exemple, whatever the size of the screen, the content need to see the div A's width and base the bootstrap's responsive design on that width.

My goal is to base my responsive design on the size of a modal window (in dhtmlx). If the user resize the modal window, the row should follow the rules (e.g. col-xs-12, col-sm-6, etc, but based on the size of the modal window, not the screen).

This fiddle show a modal window with some bootstrap form inside. I need the form to be responsive to the size of the modal form, not the screen size.

class="col-xs-12 col-sm-6"

Upvotes: 13

Views: 8875

Answers (2)

Julesezaar
Julesezaar

Reputation: 3396

I just managed to make the grid system inside a modal act responsive to the modal's breakpoints in Bootstrap 4 with scss. Since the modal's max-width is responsive itself on some breakpoints, we need to generate new css on those breakpoints for that specific modal size (sm, md, lg, xl) which just overrules the Bootstrap's css media queries

Just copy/paste everything into a separate scss file, activate it and you are good to go

// This is a stripped version of the original "make-grid-columns" mixin from Bootstrap
@mixin make-modal-grid-columns($breakpoints) {
    @each $breakpoint in map-keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);
        @include media-breakpoint-up($breakpoint, $breakpoints) {
            @for $i from 1 through $grid-columns {
                .col#{$infix}-#{$i} {
                    @include make-col($i, $grid-columns);
                }
            }
        }
    }
}

$breakpoint-sm: 576px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

.modal {
    // Overrules all .col css inside .modal-sm to a single col
    .modal-sm {
        @include make-modal-grid-columns((
            xs: 0
        ));
    }

    // modal-md (no specific class is also modal-md)
    @include make-modal-grid-columns((
        sm: $breakpoint-sm
    ));

    .modal-lg {
         @include make-modal-grid-columns((
             md: $breakpoint-lg
         ));
     }

    .modal-xl {
        @include make-modal-grid-columns((
            md: $breakpoint-lg,
            lg: $breakpoint-xl
        ));
    }
}

FYI: it generates 350 lines of code

Can be tested with this (paste it in your html somewhere)

<div class="modal" style="display: block;">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-12 col-sm-6">test</div>
                </div>
            </div>
        </div>
    </div>
</div>

In your devtools it must look like this: This means:

  • In a small modal "modal-sm" on a large screen we want col-12 to take over from the original col-sm-4 (which normally says that if screen width > 576px it must be 33% width, but since we are in a much smaller modal, we want our div to be 100% even if the screen is large) Devtools screenshot

Upvotes: 3

David Gourde
David Gourde

Reputation: 3914

As @makshh mentionned in the comment, it does not seem to be possible to do this right now. The only way I found is from another stack overflow question by @tsdexter:

$(document).ready(function(){
  $('.somecontainer').on('resize',function(){
    if ($('.somecontainer').width() < 640) {
        $('.somecontainer').addClass('m');
    } else {
        $('.somecontainer').removeClass('m');
    }
  });
});

Upvotes: 7

Related Questions