troubleshooting Question

Using toggleClass to resize Bootstrap columns

Avatar of Dilen Pat
Dilen Pat asked on
JavaScriptBootstrap
7 Comments1 Solution1101 ViewsLast Modified:
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');
                                                           
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}');
(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');

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?
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 7 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 7 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros