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-widthworks as intended but the variable--nav-widthdoesn't work even though both are literally the same usages.
1 answers
solution1
2 ACCPTED 2021-12-24 07:48:23
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS calc not working for <td> width
setting width with calc() in [ngStyle] with angular variable not working
Setting width of a div with CSS not working
CSS calc percentage width and division
Internet Explorer CSS width: calc()
CSS calc width and height values
CSS calc() in border-width?
css calc() is not working in opera
CSS -calc() or JQuery calc() not working for top
Setting input width with calc does not work as expected
Related Tags