Issue
I have a Navigation bar at the top of the browser window with different dropdown menus. A few are on the left, a few on the right.
The Problem:
If the Content of the Dropdown is large, it automatically extends the div where it's contained within. This only becomes a Problem as soon as it goes off screen.
The Code:
:root {
/* Theme */
--theme_color: #fff;
--theme_color_select: #BBB;
--theme_text: #000;
--theme_text_select: #444;
--theme_shadow: #0004;
--theme_shadow_select: #4444;
}
/* Taskbar */
#taskbar {
position: sticky;
display: flex;
justify-content: space-between;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 3em;
width: 100%;
background-color: var(--theme_color);
box-shadow: 2px 2px 2px 2px var(--theme_shadow);
z-index: 1;
}
#taskbar .dropdown-name {
line-height: 3em;
min-width: 4em;
text-align: center;
vertical-align: middle;
}
#taskbar .button {
padding: 0;
border: 0;
/* width: 4em; */
}
#taskbar .dropdown-content {
background-color: var(--theme_color);
box-shadow: 0px 0px 4px 4px var(--theme_shadow);
border: 4px solid #0000;
border-radius: 4px;
}
/* Dropdowns */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 2;
flex-direction: column;
max-width: 50vw;
}
.dropdown-name {
cursor: default;
-webkit-user-select: none;
user-select: none;
}
.dropdown:hover .dropdown-content {
display: flex;
}
.dropdown:hover .dropdown-name {
background-color: var(--theme_color_select);
}
<header id="taskbar">
<section id="taskbar_left">
<div class="dropdown">
<div class="dropdown-name">UwU</div>
<div class="dropdown-content">
<button>Create Column</button>
<button>Button 2 uwuuwuuwuuwuuwuwuwuwuwuuwuwuwuwuuwuwuwuuwuwuuwuuwu</button>
<button>Button 3 h</button>
</div>
</div><div class="dropdown">
<div class="dropdown-name">UwU</div>
<div class="dropdown-content">
<button>Create Column</button>
<button>Button 2 uwuuwu</button>
<button>Button 3 h</button>
</div>
</div>
</section>
<section id="taskbar_right">
<div class="dropdown">
<div class="dropdown-name">UwUwUwUwUwUwU</div>
<div class="dropdown-content">
<button>Create Column</button>
<button>Button 2 uwuuwuuwuuwuuwuwuwuwuwuuwuwuwuwuuwuwuwuuwuwuuwuuwu</button>
<button>Button 3 h</button>
</div>
</div>
</section>
</header>
My Attempts:
- I added to the CSS
#taskbar_right .dropdown-content {transform: translate(calc(4em - 100%), 0);}
to move every dropdown content contained in the right Taskbar to be moved. However, if the Text of the class "dropdown-name" is bigger than 4em it isn't perfectly aligned to the right side anymore. - I also tried using the left, right, top and bottom CSS, but that doesn't work, because the dropdown-content is absolutely positioned, so it just gets completely messed up.
What I need:
A "Simple" way of shifting the content the exact amount to the left it goes off screen. It would be best if the solution only includes CSS, or if it's impossible, then JavaScript. No jQuery, the Rest of my code works without it.
PS: The CSS is just a portion of all the 340 Lines of CSS, here it only contains the most Relevant.
PPS: The text inside the button elements is just for testing purposes.
PPPS: Where do I add Code Snippets? There's no button for it. There's only "Link, Blockquote, Code Block, Image, Table". There's no 6th button... am I missing something?
Solution
Position the right taskbar's dropdown content to the right.
#taskbar_right .dropdown-content {
right: 0;
}
:root {
/* Theme */
--theme_color: #fff;
--theme_color_select: #BBB;
--theme_text: #000;
--theme_text_select: #444;
--theme_shadow: #0004;
--theme_shadow_select: #4444;
}
/* Taskbar */
#taskbar {
position: sticky;
display: flex;
justify-content: space-between;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 3em;
width: 100%;
background-color: var(--theme_color);
box-shadow: 2px 2px 2px 2px var(--theme_shadow);
z-index: 1;
}
#taskbar .dropdown-name {
line-height: 3em;
min-width: 4em;
text-align: center;
vertical-align: middle;
}
#taskbar .button {
padding: 0;
border: 0;
/* width: 4em; */
}
#taskbar .dropdown-content {
background-color: var(--theme_color);
box-shadow: 0px 0px 4px 4px var(--theme_shadow);
border: 4px solid #0000;
border-radius: 4px;
}
#taskbar_right .dropdown-content {
right: 0;
}
/* Dropdowns */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 2;
flex-direction: column;
max-width: 50vw;
}
.dropdown-name {
cursor: default;
-webkit-user-select: none;
user-select: none;
}
.dropdown:hover .dropdown-content {
display: flex;
}
.dropdown:hover .dropdown-name {
background-color: var(--theme_color_select);
}
<header id="taskbar">
<section id="taskbar_left">
<div class="dropdown">
<div class="dropdown-name">UwU</div>
<div class="dropdown-content">
<button>Create Column</button>
<button>Button 2 uwuuwuuwuuwuuwuwuwuwuwuuwuwuwuwuuwuwuwuuwuwuuwuuwu</button>
<button>Button 3 h</button>
</div>
</div><div class="dropdown">
<div class="dropdown-name">UwU</div>
<div class="dropdown-content">
<button>Create Column</button>
<button>Button 2 uwuuwu</button>
<button>Button 3 h</button>
</div>
</div>
</section>
<section id="taskbar_right">
<div class="dropdown">
<div class="dropdown-name">UwUwUwUwUwUwU</div>
<div class="dropdown-content">
<button>Create Column</button>
<button>Button 2 uwuuwuuwuuwuuwuwuwuwuwuuwuwuwuwuuwuwuwuuwuwuuwuuwu</button>
<button>Button 3 h</button>
</div>
</div>
</section>
</header>
Answered By - Joseph Webber
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.