calc() not working in css for setting width?

Question

I'm making a text editor with a sidd nav-var. When the mouse hovers on the nav-bar its width increases and the editor width decreases. But the width of the editor doesn't change even when the width variable created by me is changing.

Here is my program:

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200&display=swap');
:root {
  --nav-btn-width: 40px;
  --nav-width: calc(100% - 60px);
}

* {
  z-index: 1;
}

body {
  padding: 0;
  margin: 0;
  background-color: #c73737;
}

#navbar {
  position: absolute;
  height: 100%;
  width: 50px;
  max-width: 200px;
  background-color: #0068ad;
  display: flex;
  flex-direction: column;
  transition: 0.35s ease-in-out;
  padding-top: 10px;
  box-sizing: border-box;
  z-index: 2;
}

#navbar:hover {
  width: 200px;
  border-radius: 0 10px 10px 0;
  --nav-btn-width: 190px;
  --nav-width: calc(100% - 210px);
}

.nav-btn {
  width: var(--nav-btn-width);
  height: 40px;
  background-color: rgb(0, 184, 70);
  margin: 5px;
  cursor: pointer;
  border-radius: 50px;
  transition: 0.35s ease-in-out;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  padding-left: 7.5px;
  overflow: hidden;
  user-select: none;
  z-index: 10;
}

.nav-btn:hover {
  background-color: rgb(0, 255, 98);
}

#signout {
  position: absolute;
  bottom: 10px;
}

.nav-text {
  position: relative;
  top: 10px;
  font-size: 12pt;
  font-family: 'JetBrains Mono', monospace;
  font-weight: bold;
  text-align: center;
  padding-left: 10px;
}

#editor {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: var(--nav-width);
  background-color: rgb(78, 78, 78);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <div id="body-container" style="width: 100vh;height:100vh">
    <div id="navbar">
      <div id="create" class="nav-btn">
        <img src="add_black_24dp.svg" alt="" id="create-icon" class="nav-icons">
        <div id="create-text" class="nav-text">Create</div>
      </div>
      <div id="files" class="nav-btn">
        <img src="description_black_24dp.svg" alt="" id="files-icon" class="nav-icons">
        <div id="files-text" class="nav-text">My Files</div>
      </div>
      <div id="feed" class="nav-btn">
        <img src="article_black_24dp.svg" alt="" id="feed-icon" class="nav-icons">
        <div id="feed-text" class="nav-text">Feed</div>
      </div>
      <div id="challenges" class="nav-btn">
        <img src="task_black_24dp.svg" alt="" id="challenges-icon" class="nav-icons">
        <div id="challenges-text" class="nav-text">Challenges</div>
      </div>
      <div id="leaderboard" class="nav-btn">
        <img src="leaderboard_black_24dp.svg" alt="" id="leaderboard-icon" class="nav-icons">
        <div id="leaderboard-text" class="nav-text">Leaderboard</div>
      </div>
      <div id="notification" class="nav-btn">
        <img src="notifications_black_24dp.svg" alt="" id="notification-icon" class="nav-icons">
        <div id="notification-text" class="nav-text">Notifications</div>
      </div>
      <div id="chat" class="nav-btn">
        <img src="message_black_24dp.svg" alt="" id="chat-icon" class="nav-icons">
        <div id="chat-text" class="nav-text">Dev Chat</div>
      </div>
      <div id="settings" class="nav-btn">
        <img src="settings_black_24dp.svg" alt="" id="settings-icon" class="nav-icons">
        <div id="settings-text" class="nav-text">Settings</div>
      </div>
      <div id="signout" class="nav-btn">
        <img src="logout_black_24dp.svg" alt="" id="signout-icon" class="nav-icons">
        <div id="signout-text" class="nav-text">Sign out</div>
      </div>
    </div>
    <div id="editor"></div>
  </div>


  <!-- include script.js and styler.js -->
  <script src="script.js"></script>
  <script src="styler.js"></script>
  <script>
  </script>
</body>

</html>

As you can see there is a 10px gap b/w the nav-bar and the editor and I have also updated the values when it is hovered. But when the nav-bar is hovered the width of the editor doesn't change.

Similar question: link

I have also tried what is mentioned in the Similar question but still it doesn't work...

The variable --nav-btn-width works as intended but the variable --nav-width doesn't work even though both are literally the same usages.

A Haworth · Accepted Answer · 2021-12-24 07:48:23Z

On the hover you are defining a variable that only has scope within the navbar element.

To define a variable for the editor element select on navbar hover plus editor, this will select for the editor element which comes immediately after the navbar.

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200&display=swap');
:root {
  --nav-btn-width: 40px;
  --nav-width: calc(100% - 60px);
}

* {
  z-index: 1;
}

body {
  padding: 0;
  margin: 0;
  background-color: #c73737;
}

#navbar {
  position: absolute;
  height: 100%;
  width: 50px;
  max-width: 200px;
  background-color: #0068ad;
  display: flex;
  flex-direction: column;
  transition: 0.35s ease-in-out;
  padding-top: 10px;
  box-sizing: border-box;
  z-index: 2;
}

#navbar:hover {
  width: 200px;
  border-radius: 0 10px 10px 0;
  --nav-btn-width: 190px;
}
#navbar:hover + #editor {
  --nav-width: calc(100% - 210px);
}

.nav-btn {
  width: var(--nav-btn-width);
  height: 40px;
  background-color: rgb(0, 184, 70);
  margin: 5px;
  cursor: pointer;
  border-radius: 50px;
  transition: 0.35s ease-in-out;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  padding-left: 7.5px;
  overflow: hidden;
  user-select: none;
  z-index: 10;
}

.nav-btn:hover {
  background-color: rgb(0, 255, 98);
}

#signout {
  position: absolute;
  bottom: 10px;
}

.nav-text {
  position: relative;
  top: 10px;
  font-size: 12pt;
  font-family: 'JetBrains Mono', monospace;
  font-weight: bold;
  text-align: center;
  padding-left: 10px;
}

#editor {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: var(--nav-width);
  background-color: rgb(78, 78, 78);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <div id="body-container" style="width: 100vh;height:100vh">
    <div id="navbar">
      <div id="create" class="nav-btn">
        <img src="add_black_24dp.svg" alt="" id="create-icon" class="nav-icons">
        <div id="create-text" class="nav-text">Create</div>
      </div>
      <div id="files" class="nav-btn">
        <img src="description_black_24dp.svg" alt="" id="files-icon" class="nav-icons">
        <div id="files-text" class="nav-text">My Files</div>
      </div>
      <div id="feed" class="nav-btn">
        <img src="article_black_24dp.svg" alt="" id="feed-icon" class="nav-icons">
        <div id="feed-text" class="nav-text">Feed</div>
      </div>
      <div id="challenges" class="nav-btn">
        <img src="task_black_24dp.svg" alt="" id="challenges-icon" class="nav-icons">
        <div id="challenges-text" class="nav-text">Challenges</div>
      </div>
      <div id="leaderboard" class="nav-btn">
        <img src="leaderboard_black_24dp.svg" alt="" id="leaderboard-icon" class="nav-icons">
        <div id="leaderboard-text" class="nav-text">Leaderboard</div>
      </div>
      <div id="notification" class="nav-btn">
        <img src="notifications_black_24dp.svg" alt="" id="notification-icon" class="nav-icons">
        <div id="notification-text" class="nav-text">Notifications</div>
      </div>
      <div id="chat" class="nav-btn">
        <img src="message_black_24dp.svg" alt="" id="chat-icon" class="nav-icons">
        <div id="chat-text" class="nav-text">Dev Chat</div>
      </div>
      <div id="settings" class="nav-btn">
        <img src="settings_black_24dp.svg" alt="" id="settings-icon" class="nav-icons">
        <div id="settings-text" class="nav-text">Settings</div>
      </div>
      <div id="signout" class="nav-btn">
        <img src="logout_black_24dp.svg" alt="" id="signout-icon" class="nav-icons">
        <div id="signout-text" class="nav-text">Sign out</div>
      </div>
    </div>
    <div id="editor"></div>
  </div>


  <!-- include script.js and styler.js -->
  <script src="script.js"></script>
  <script src="styler.js"></script>
  <script>
  </script>
</body>

</html>

Thanks for the solution but I have a doubt, i.e., the same thing i have done for --nav-btn-width but that works fine, but why not this?
It’s to do with the scope of the variable. Where you were changing it affected only within the navbar element.

Collectives™ on Stack Overflow

calc() not working in css for setting width?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related