We Keep Coding

JS, I want to make a button that opens the navigation over whole screen

*Edit: Everyone is disliking this post :(
So I want a button (I'll make a hamburger text) and when I click the button I want the whole page (the navigation element) to become (100% width and 100 height and I'll put flex in it) the navigation menu and when I click the button again the navigation element disappears.
What I want to know:
How do I do the CSS so that the navigation element opens over everything else?
position:absolute?
(After I know how to put the navigation element over everything else -
Maybe display: none on the navigation page and somehow put it over everything when I change display: visible with JS?)
Where can I find JS (because I don't know it yet) to edit CSS of the navigation element on click?
Something like this from W3, but I will probably need to change the diplay from none to visible and back again:
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

In order to set your navigation into full screen, you should use position:fixed property of css. In order to properly hide and show the navbar you should toggle the class of the element instead of directly applying the display style. Take a look at below example to understand it better -
let btn = document.getElementById('btn');
let nav = document.getElementById('nav');
btn.addEventListener('click', function(){
//event listener toggling the active class
if(nav.classList.contains('active')){
nav.classList.remove('active'); //remove active class if already added
} else {
nav.classList.add('active'); //add active class if not added
}
});
html, body{
height: 100%;
width: 100%;
}
nav{
display: none; /*default in hidden state*/
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
color: white;
}
nav.active{
display: inline-block; /*visible if nav element contains active class, applied via JavaScript code*/
}
#btn{
position: fixed;
top: 40px;
left: 10px;
z-index: 100;
}
<nav id="nav">
Full screen content
</nav>
<button id="btn">toggle full screen element</button>
<p>Some static content</p>

Try to add css position:absolute; and z-index=99 to your navigation element and toggle its display with onclick.

How to hide dropdown behind top menu?

z-index doesn't seem to work for an open dropdown.
When a user clicks a dropdown first and then hovers top menu (which is a div with position absolute and high z-index), the open dropdown still shows on top of the top menu. I want it to hide beneath the menu.
How can I hide the open dropdown? (without using javascript)
EDIT: Not possible, see How to select options overlapping an absolute positioned DIV?
I have made a fiddle that should illustrate the problem: https://jsfiddle.net/9m84dv6h/2/
Here's the code (when the top menu is open):
HTML:
<div id="topmenu"></div>
<br>
<div class="dropdown">
<select>
<option>1</option>
<option>1</option>
<option>1</option>
</select>
</div>
CSS
#topmenu {
position:absolute;
min-height:80px;
width: 15px;
background: red;
z-index: 50;
}
select {
z-index: 10;
position: relative;
}
.dropdown {
z-index: 10;
position: relative;
}

I think it's browser controlled item that will always appear on top. Try using some plugin like selec2 or chosen for custom dropdown that you can fully control

angular-ui-select broken with bootstrap form-inline

There were several threads about getting inline-form label to be inline with angular-ui-select, and I have managed to get that label inline, but still looks like angular-ui-select width is broken in form-inline.
I have created Plnkr to demonstrate that.
I have added css code
.form-inline .ui-select-container .ui-select-toggle,
.form-inline .ui-select-container .ui-select-search {
width: 100%;
}
.form-inline .ui-select-container {
display: inline-block;
vertical-align: middle;
width: auto;
}
So that label is inline with select box, but select does not take same width as inputs, and if you press on select box, then select expands in same width as input bellow.
Question is, how to make angular-ui-select same width as input bellow, so there is no shrink/expand effect on select box, when activating it.
I will add screenshots, that shows, how it acts now:
Select in inactive state
Select in active state
As you can see, element width is changing on click, but how to make it same as input bellow, as input bellow is taking width dynamically ?

I had the same issue in some projects I developed and I was always setting a min-height. I think I found a solution.
Just added
.form-inline .ui-select-container input.form-control.ui-select-search.ng-hide {
display: block !important;
visibility: hidden;
height: 0;
border: 0;
padding: 0;
}
http://plnkr.co/edit/b1CfIHdDEu4qBsxHeEzc

Dropdown on focus not positioning itself above following div

I've got a drop down div on focus of a <input type='text'> box as follows
http://jsfiddle.net/Newtt/7ffdF/
I need the dropdown box to appear above the container-box div that follows the search box. Currently it's pushing the div downwards. Is there a way I can make this text box behave like a select tag without having to use the select tag.
My CSS for the dropdown div is
display:none;z-index:200;
On focus of the search box, the div appears using:
$('#text-box').focus(function(){
$('.dropdown').show();
});
I also need the div to disappear on removing focus.
Summarizing, I've got two questions:
Regarding the positioning of the drop box
Toggling of the dropdown on and off focus of the search box.
Thanks!

You can use position:absolute; for the dropdown. And also use Jquery event blur on text field to hide it
JS FIDDLE DEMO
JS
$(document).ready(function(){
$('#text-box').focus(function(){
$('.dropdown').show();
});
$('#text-box').blur(function(){
$('.dropdown').hide();
});
});
CSS
.container-box {
height:400px;
width:400px;
background: #ccc;
}
.dropdown{
display:none;
position:absolute;
z-index:200;
}
.dropdown ul {
padding :0;
background : #ddffaa;
}
Styling the drop-down is in your hands :)

You can use position: absolute; to stop the dropdown from being in document flow, so it doesn't interrupt other elements.
You can also use .blur() for what to do when there's no focus.
http://jsfiddle.net/7ffdF/12/
CSS:
.dropdown {
display: none;
z-index: 200;
position: absolute;
background-color: #eee;
width: 400px;
}
And jQuery:
$('#text-box').blur(function() {
$('.dropdown').hide();
});

Set the div position to absolute....
div.dropdown{
width:170px;
border:1px solid #ccc;
position:absolute;
background-color:#fff;
}
I set up a good example for you on this JS Fiddler

Trying to right-align a pop-up element in Javascript

I am trying to align pop-up elements in a header element in a table. Eventually the pop-up elements will provide functionality like sorting and filtering for my table.
Per default the pop ups align themselves to the left, but I would like to align them to the right :
My CSS code looks like something like this :
.Table .Popup {
position:absolute;
z-index:9999;
}
I would like to use the relative position instead of absolute (ie.relative to the header item), but I am not sure how. If I use absolute, doesn't that interfere with any other parent containers that have position set to absolute?
JSFiddle : http://jsfiddle.net/XJXuR/9/
Does anyone know how this can be done? JQuery or Javascript is fine. Thx.

Just add this CSS code:
tr.TableHeaderLabels td {
position: relative;
}
.Table .Popup {
right: 0;
}
I tried it on your jsFiddle and it works as expected :)
EDIT: Forked the original jsFiddle with my code: http://jsfiddle.net/p3khu/1/

Is this what you're looking for? http://jsfiddle.net/Vf2Td/
.Table .TableHeader td{
border:1px solid red;
margin:0;
padding:0;
position: relative;
}
.Table .Popup {
position:absolute;
z-index:9999;
right: 0px;
}
Give the parent div the position relative. Then the popup which is a child needs a right: 0px; so that it hugs the right of the parent container.

Assuming that you are have relative position on the cells containing two, three, four, etc... you can just add right: 0; to your css above and that should right align them.