CODEWITHSUNDEEP
csstwitter-bootstrap
David Gourde
David Gourde

Reputation: 3914

Bootstrap form grid based on container size instead of screen size

I am trying to use bootstrap to fill a container depending on it's size. I am able to do it with the screen size, when the container is the whole page or the whole bootstrap modal (which is pretty much the same), as it does by default when using bootstrap. See this JSFiddle for an example of what I want (which is pretty much the default behavior).

My problem is when the container is something else, like a dhtmlx modal window. I am trying to still use col-*-* but it makes no sense as I am not trying to fit the screen but only the container. I tried with spans-* but I cannot get it to work properly.

Would you have an idea on how I could do the same but inside a specific container, like a dhtmlx window?

This code snippet is an example of code where I have a container (the dhtmlx modal window) and where I need to set a container for bootstrap and get a responsive grid based on the size of this container and not the screen.

var myForm, formData;
		var dhxWins, w1;
		function doOnLoad() {
			dhxWins = new dhtmlXWindows();
			dhxWins.attachViewportTo("vp");
			w1 = dhxWins.createWindow("w1", 10, 10, 300, 250);
			myForm = w1.attachHTMLString(
      	'<div class="container">' +
        	'<div class="form-group col-xs-12 col-sm-6">' +
        		'<label>label</label>' +
            '<div>' +
            	'<input class="form-control" type="text">' +
            '</div>' +
          '</div>' +
        '</div>'
      );
		}
doOnLoad();
div#vp {
  height: 600px;
  border: 1px solid #dfdfdf;
}
<link rel="stylesheet" href="https://2a6781b6e7331b7c52c1706cd28c7de3f641b52b.googledrive.com/host/0B4bedT44-LokVFBFUXlaVEthaFE?t=.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ecropolis.s3.amazonaws.com/ui/libs/moment.min.js"></script>
<script src="https://344bb70794e57c6753700eb885a1f4eb0c383612.googledrive.com/host/0B4bedT44-LokaV9tODJoX29BVFk"></script>

<div id="vp"></div>

I have been researching on this question for a couple of days, trying lots of things but achieving nothing.

If you have an idea, please help.

Upvotes: 3

Views: 831

Answers (1)

David Gourde
David Gourde

Reputation: 3914

I could not find a way to do this in an elegant way, so I did it the hard way. This is the solution I will use (and that works).

I wrote an example were I change the classes as I need for how I use bootstrap in my form, but you can easily adapt this to your own needs.

window.attachEvent("onResizeFinish", function(obj){
    deleteClassCol();
    if (obj.getDimension()[0] < 768)
    {
      $('.form-group').addClass('col-xs-12');
      $('.label-control').addClass('col-xs-12');
      $('.theInput').addClass('col-xs-12');
    }
    else if (obj.getDimension()[0] < 992)
    {
      $('.form-group').addClass('col-xs-6');
      $('.label-control').addClass('col-xs-2');
      $('.theInput').addClass('col-xs-10');
    }
    else if (obj.getDimension()[0] < 1200)
    {
      $('.form-group').addClass('col-xs-4');
      $('.label-control').addClass('col-xs-2');
      $('.theInput').addClass('col-xs-10');
    }
    else
    {
      $('.form-group').addClass('col-xs-3');
      $('.label-control').addClass('col-xs-2');
      $('.theInput').addClass('col-xs-10');
    }
});

function deleteClassCol(){
    [".form-group", ".label-control", ".theInput"].forEach(function(theClass) {
    $(theClass).removeClass (function (index, css) {
        return (css.match (/(^|\s)col-\S+/g) || []).join(' ');
        });
    });
}

Upvotes: 0

Related Questions