CODEWITHSUNDEEP
javascriptw3-css
Andrea
Andrea

Reputation: 19

change div width when sidebar is hidden... with javascript

hey I am writing a little website and I am using w3css that I find very simple and nice.

I have the body with max-width:100%;; a sidebar class="w3-hide-small" with width: 15%; and a main with margin-left:15%; width:85%;

But when the sidebar is hidden on small screen, the main is still 85% and it remains a 15% white on the right of the browser.

I think that I shall do it with javascript cause w3css and I thought this code, but for sure it is full of error.

var Sidebar = document.getElementById('theSidebar');
if (Sidebar.visibility === hidden){ 
document.getElementById('theMain').style.width = '100%'
document.getElementById('theMain').style.margin-left = '0px'}

But...... it just does not work :D

Suggestions?

Hoping that I described the issue well.

Bye!!!

Andrea

Upvotes: 0

Views: 690

Answers (1)

Andrea
Andrea

Reputation: 19

The problem was that I had a blank space when I resized the screen to phone width. That's because I set the style of the main division <div class=w3-main style="margin-left: 15%; width:85%" > that is 100 - 15 = 85. I was thinking to use a javascript function.

But, as suggested by David Thomas, I avoided javascript to make the thing in a easier way using css grid. I resolved the question writing:

<html>

<head>
  <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
</head>

<body class="w3-content" style="max-width:100% !important;">

  <div class="w3-sidebar w3-hide-small w3-green" style="width:15%; z-index:3;">
  </div>

  <div class="w3-main w3-rest w3-red" style="margin-left:15%;">
    SOMETHING TO WRITE HERE...........
  </div>

</body>

And even I think that it may be not the perfect solution by me, the thing works and now when I visualize in phone screen, hiding the sidebar, the right white margin disappears and remains the color red.

I thank everyone who answered me.

Andrea

Upvotes: 0

Related Questions