Dilen Pat

asked on 3/19/2017

Using toggleClass to resize Bootstrap columns

I have a webpage which has two main divs. One for a small 'control panel' on the left (takes up a quarter of the space), and a larger main table on the right (takes up three quarters of space). To accommodate different screen sizes, I've incorporates boostrap columns e.g. <div className="control-panel col-lg-3 col-md-3 col-sm-3 col-xs-3" id="control-panel">

This mostly works. If I dynamically resize the browser, this is as expected.

Moving on, I've created a toggle button whose click event hides this control panel div (and is expected to resize the main table from 9 columns to the full 12 columns).

Right now for the resizing of the main table, in the click function i just have:

 $('#theMainTable').toggleClass('col-lg-12 col-lg-9');

Open in new window

This will toggle between 9 column width and 12, but this will only work on a large screen that isn't resized.
If I dynamically resize the browser to anything else, this will not work.

My assumption is I need some way to toggle multiple screen combos like:

 $('#theMainTable').toggleClass('[b]{col-lg-12 col-md-12 col-sm-12 col-xs-12}[/b] {col-lg-9 col-md-9 col-sm-9 col-xs-9}');

Open in new window

(although the above seems to only work for small resolutions)

the best i can try is:

		$('#theMainTable').toggleClass('col-lg-12 col-lg-9');
		$('#theMainTable').toggleClass('col-md-12 col-md-9');
		$('#theMainTable').toggleClass('col-sm-12 col-sm-9');
		$('#theMainTable').toggleClass('col-xs-12 col-xs-9');

Open in new window

but this doesnt work dynamically. i.e. it works for any resolution you resize to, so long as you refresh the page first

any help?

BootstrapJavaScript

Last Comment

Julian Hansen

8/22/2022 - Mon

Julian Hansen

3/20/2017

Don't worry about the md sm and lg styles - just do xs - seeing as they are all the same 12:9 it makes no difference
CSS

<style type="text/css">
.master-panel {
  background: blue; 
  color: white;
  padding: 20px;
}
.control-panel {
  background: red; 
  color: white;
  padding: 20px;
}
</style>

Open in new window

HTML

  <div class="row">
    <div class="col-xs-9 master-panel">
      I am the master
    </div>
    <div class="col-xs-3 control-panel">
      I am the control panel
    </div>
  </div>
  <button class="btn btn-primary">Toggle</button>

Open in new window

jQuery

<script>
$(function() {
  $('button').click(function() {
    $('.control-panel').toggle();
    $('.master-panel').toggleClass('col-xs-9 col-xs-12');
  });
});
</script>

Open in new window

Working sample here

Dilen Pat

3/20/2017

ASKER

What would need to be done if they're not all 12:9? For example, stretching the browser too much (e.g. over two screens) makes the control panel look too large and bulky so for lg it may need to be reduced to 2 or 1

Julian Hansen

3/20/2017

Then we would probably need to look at a solution that adds and removes classes manually rather than using toggle class.

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat

William Peck

Dilen Pat

3/20/2017

ASKER

I've seen example code that replaces toggleclass with some sort of add/removeclass. They're usually used in conjunction with if statements. But then surely that would be no different to my previous example? It won't work when dynamically resizing the browser window. It'll only work when you stop resizing the window and then refresh the page

  
                $('#theMainTable').toggleClass('col-lg-12 col-lg-9');
		$('#theMainTable').toggleClass('col-md-12 col-md-9');
		$('#theMainTable').toggleClass('col-sm-12 col-sm-9');
		$('#theMainTable').toggleClass('col-xs-12 col-xs-9');

Open in new window

ASKER CERTIFIED SOLUTION

Julian Hansen

3/21/2017

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Dilen Pat

3/21/2017

ASKER

it seems the toggle class originally used was actually working, but a JQuery somewhere else was interfering. Once I commented it out, it worked. Thanks for the help

Julian Hansen

3/21/2017

You are welcome.

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.