CSS Custom combobox issue

CSS Custom combobox issue - html

I need a custom combo box. So, I implemented with ul. The problem is I can't get combo box list opens on top by clicking the button. While showing ul, it moves button to bottom of the webpage.
Code:
ul{
width: 100px;
background-color: rgb(224, 224, 224);
border-radius: 4px;
border: 1px solid black;
padding: 0;
margin: 0;
}
ul li{
list-style: none;
cursor: pointer;
padding: 4px 10px;
}
li:hover{
background-color: white;
}
div{
width: 100%;
height: 40px;
background-color: bisque;
}
section{
height: 400px;
background-color: #525252;
}
button{
width: 100px;
height: 100%;
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<p>Some content</p>
</section>
<div>
<ul>
<li>Parrot</li>
<li>Dog</li>
<li>Cat</li>
<li>Squirrel</li>
<li>Otter</li>
<li>Cow</li>
<li>Goat</li>
<li>Finch</li>
</ul>
<button onclick="showPop()">Pet</button>
</div>
<script>
let ul = document.getElementsByTagName('ul')[0]
onload = function(){
ul.style.display = 'none'
}
function showPop(){
if(ul.style.display == 'none'){
ul.style.display = 'block'
}else{
ul.style.display = 'none'
}
}
</script>
</body>
</html>
Here, I want to keep the ul inside the body.div. I just want to make it pop up like combo box with custom position. Please refer attached images.
Current Design:
I want it be like:
How can I make it with CSS? Thank you all in advance...

Try this:
ul{
width: 100px;
background-color: rgb(224, 224, 224);
border-radius: 4px;
border: 1px solid black;
padding: 0;
margin: 0;
position: absolute;
bottom: 40px;
z-index: 9;
}
ul li{
list-style: none;
cursor: pointer;
padding: 4px 10px;
}
li:hover{
background-color: white;
}
div{
width: 100%;
height: 40px;
background-color: bisque;
position: relative;
}
section{
height: 400px;
background-color: #525252;
}
button{
width: 100px;
height: 100%;
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<p>Some content</p>
</section>
<div>
<ul>
<li>Parrot</li>
<li>Dog</li>
<li>Cat</li>
<li>Squirrel</li>
<li>Otter</li>
<li>Cow</li>
<li>Goat</li>
<li>Finch</li>
</ul>
<button onclick="showPop()">Pet</button>
</div>
<script>
let ul = document.getElementsByTagName('ul')[0]
onload = function(){
ul.style.display = 'none'
}
function showPop(){
if(ul.style.display == 'none'){
ul.style.display = 'block'
}else{
ul.style.display = 'none'
}
}
</script>
</body>
</html>

Try to use position absolute for your list and set position relative for ul parent.
ul {
width: 100px;
background-color: rgb(224, 224, 224);
border-radius: 4px;
border: 1px solid black;
padding: 0;
margin: 0;
bottom: 40px;
left: 0;
position: absolute;
}
ul li {
list-style: none;
cursor: pointer;
padding: 4px 10px;
}
li:hover {
background-color: white;
}
div {
width: 100%;
height: 40px;
position: relative;
background-color: bisque;
}
section {
height: 400px;
background-color: #525252;
}
button {
width: 100px;
height: 100%;
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<p>Some content</p>
</section>
<div>
<ul>
<li>Parrot</li>
<li>Dog</li>
<li>Cat</li>
<li>Squirrel</li>
<li>Otter</li>
<li>Cow</li>
<li>Goat</li>
<li>Finch</li>
</ul>
<button onclick="showPop()">Pet</button>
</div>
<script>
let ul = document.getElementsByTagName('ul')[0]
onload = function() {
ul.style.display = 'none'
}
function showPop() {
if (ul.style.display == 'none') {
ul.style.display = 'block'
} else {
ul.style.display = 'none'
}
}
</script>
</body>
</html>

I have modified your CSS little bit. Please check the snippet.
let ul = document.getElementsByTagName('ul')[0]
onload = function(){
ul.style.display = 'none'
}
function showPop(){
if(ul.style.display == 'none'){
ul.style.display = 'block'
}else{
ul.style.display = 'none'
}
}
ul{
width: 100px;
background-color: rgb(224, 224, 224);
border-radius: 4px;
border: 1px solid black;
padding: 0;
margin: 0;
position: absolute;
bottom: 40px;
}
ul li{
list-style: none;
cursor: pointer;
padding: 4px 10px;
}
li:hover{
background-color: white;
}
div{
width: 100%;
height: 40px;
background-color: bisque;
}
section{
height: 400px;
background-color: #525252;
}
button{
width: 100px;
height: 100%;
margin: 0;
position: relative;
display: inline-block;
}
.dropup{
position: relative;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<p>Some content</p>
</section>
<div class='dropup'>
<ul>
<li>Parrot</li>
<li>Dog</li>
<li>Cat</li>
<li>Squirrel</li>
<li>Otter</li>
<li>Cow</li>
<li>Goat</li>
<li>Finch</li>
</ul>
<button onclick="showPop()">Pet</button>
</div>

Related

How to make new text apear after the header (not underneath it), while keeping the shape of the header?

I made a header, and it was all looking good until I decided to add more text there, because the text went behind the header, and I don't want that to happen. I know that I can just use something like top: 100px on the text in the CSS file, but I wanna know a proper solution to this.
// html
<!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="template.css">
</head>
<body>
<div class="heading">
<a class="logo" href="home">go back</a>
<a class="sign_in" href="sign_in">sign in</a>
<a class="sign_up" href="sign_up">sign up</a>
</div>
<h1>Hello there</h1>
<h1>Hello there</h1>
<h1>Hello there</h1>
</body>
</html>
// CSS
.heading {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100px;
background: teal;
font-size: 30px;
}
a.logo {
top: 25px;
padding: 5px;
left: 30px;
position: fixed;
text-decoration: none;
color: white;
}
a.logo:active, a.logo:visited, a.logo:link {
background-color: dodgerblue;
}
a.logo:hover {
background-color: navy;
}
a.sign_in {
top: 25px;
padding: 5px;
right: 200px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_in:active, a.sign_in:visited, a.sign_in:link {
background-color: dodgerblue;
}
a.sign_in:hover {
background-color: navy;
}
a.sign_up {
top: 25px;
padding: 5px;
right: 50px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_up:active, a.sign_up:visited, a.sign_up:link {
background-color: dodgerblue;
}
a.sign_up:hover {
background-color: navy;
}
html {
background-color: rgb(175, 220, 235);
}
I tried using different positions, but I would either have this problem again, or the header wouldn't be touching the side of the website.

Switch the .heading to be position: sticky. This allows it to still take up space don't he page, while staying at the top when the user scrolls.
Margin: You can add margin: -10px; to the .heading to allow it to still touch the edges of the screen. Then add width: calc(100% + 20px); so it still takes up the whole width.
.heading {
top: 0;
left: 0;
position: sticky;
margin: -10px;
width: calc(100% + 20px);
height: 100px;
background: teal;
font-size: 30px;
}
a.logo {
top: 25px;
padding: 5px;
left: 30px;
position: fixed;
text-decoration: none;
color: white;
}
a.logo:active, a.logo:visited, a.logo:link {
background-color: dodgerblue;
}
a.logo:hover {
background-color: navy;
}
a.sign_in {
top: 25px;
padding: 5px;
right: 200px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_in:active, a.sign_in:visited, a.sign_in:link {
background-color: dodgerblue;
}
a.sign_in:hover {
background-color: navy;
}
a.sign_up {
top: 25px;
padding: 5px;
right: 50px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_up:active, a.sign_up:visited, a.sign_up:link {
background-color: dodgerblue;
}
a.sign_up:hover {
background-color: navy;
}
html {
background-color: rgb(175, 220, 235);
}
<!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="template.css">
</head>
<body>
<div class="heading">
<a class="logo" href="home">go back</a>
<a class="sign_in" href="sign_in">sign in</a>
<a class="sign_up" href="sign_up">sign up</a>
</div>
<h1>Hello there</h1>
<h1>Hello there</h1>
<h1>Hello there</h1>
</body>
</html>

use position:sticky all element have default margin and padding it's better to assign all element margin to 0 by
* {
margin: 0
}
we will get more control when we design or you can add margin:0 to specific class which is having margin
* {
margin: 0
}
.heading {
top: 0;
left: 0;
position: sticky;
width: 100%;
height: 100px;
background: teal;
font-size: 30px;
display: block
}
a.logo {
top: 25px;
padding: 5px;
left: 30px;
position: fixed;
text-decoration: none;
color: white;
}
a.logo:active,
a.logo:visited,
a.logo:link {
background-color: dodgerblue;
}
a.logo:hover {
background-color: navy;
}
a.sign_in {
top: 25px;
padding: 5px;
right: 200px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_in:active,
a.sign_in:visited,
a.sign_in:link {
background-color: dodgerblue;
}
a.sign_in:hover {
background-color: navy;
}
a.sign_up {
top: 25px;
padding: 5px;
right: 50px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_up:active,
a.sign_up:visited,
a.sign_up:link {
background-color: dodgerblue;
}
a.sign_up:hover {
background-color: navy;
}
html {
background-color: rgb(175, 220, 235);
}
<!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="template.css">
</head>
<body>
<div class="heading">
<a class="logo" href="home">go back</a>
<a class="sign_in" href="sign_in">sign in</a>
<a class="sign_up" href="sign_up">sign up</a>
</div>
<div>
<h1>Hello there</h1>
<h1>Hello there</h1>
<h1>Hello there</h1>
</div>
</body>
</html>

My Website is "overlaying" on the bigger screen

So i made a Watchlist which is actually just a picture gallery and a menu right now. but on the second, the bigger screen the pictures are overlaying my menu.
https://imgur.com/a/FUycbCo
well i think that its because i used px instead of % or smth like that so i tried changing it but the problem is finding out where. some of the tags dont even work with % for some reason. also im not even sure that thats the problem. thats just a guess from me.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>HTML</title>
</head>
<body>
<div class="menu">
<button class="untermenu">TV</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
<button class="untermenu">Anime</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/A121lm-WoYL._AC_UY218_.jpg" alt="Shadowhunters">
<div class="desc"><p>Staffel 2/3<br>Folge 20/20<br>am schauen</p></div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/81b+18Wg5dL._AC_UY218_.jpg" alt="Brooklyn Nine Nine">
<div class="desc"><p>Staffel 5/6<br>Folge 22/22<br>am schauen</p></div>
<script>
var untermenu = document.getElementsByClassName("untermenu");
var i;
for (i = 0; i < untermenu.length; i++)
{
untermenu[i].addEventListener("click", function()
{
this.classList.toggle("active");
var untermenuContent = this.nextElementSibling;
if (untermenuContent.style.display === "block")
{
untermenuContent.style.display = "none";
}
else
{
untermenuContent.style.display = "block";
}
});
}
</script>
</body>
</html>
CSS:
body
{
background-color: #e2e2e0;
}
h1
{
font-family: Arial, "Times new roman";
position: relative;
left: 170px;
}
.menu
{
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 50px;
}
.menu a, .untermenu
{
padding: 8px 15px 10px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
cursor: pointer;
}
div.gallery
{
position: relative;
left: 9%;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 230px;
}
div.gallery:hover
{
border: 1px solid #777;
}
div.gallery img
{
width: 100%;
height: 10em;
}
div.desc
{
padding: 15px;
text-align: center;
background-color: white;
}
p
{
padding: 0;
margin: 0;
line-height: 1.5;
}
.menu a:hover, .untermenu:hover
{
color: #f1f1f1;
}
.untermenu-links
{
display: none;
background-color: #262626;
}
.active
{
background-color: #093802;
color: white;
}
#kleiner
{
font-size: 15px;
}
i expect it to look nice
it doesnt look nice.

I would suggest you to post the whole HTML and CSS somewhere here or maybe on share a codepen, so that we can debug your code.
Also, I would suggest you to use grid and flex for making layouts for your website. For example I can see that your design structure can we implemented using basic grid and flex . The implementation in your case would be basic and it would be a good start for you. Consider learning them.
I have made changes in your code, added flex and grid. I have also implimented a responsiveness code, so that if the screen size reduces things still look good.
https://codepen.io/bhanusinghR/pen/LYPbazK?editors=1100
Code used:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>HTML</title>
</head>
<body>
<div class="body-wrapper">
<div class="menu">
<button class="untermenu">TV</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
<button class="untermenu">Anime</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
</div>
<div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/A121lm-WoYL._AC_UY218_.jpg" alt="Shadowhunters">
<div class="desc"><p>Staffel 2/3<br>Folge 20/20<br>am schauen</p></div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/81b+18Wg5dL._AC_UY218_.jpg" alt="Brooklyn Nine Nine">
<div class="desc"><p>Staffel 5/6<br>Folge 22/22<br>am schauen</p></div>
</div>
</div>
CSS
body
{
background-color: #e2e2e0;
padding:0px;
margin:0px;
}
.body-wrapper{
display: grid;
grid-template-columns: 18% auto;
grid-template-rows:auto;
}
h1
{
font-family: Arial, "Times new roman";
position: relative;
left: 170px;
}
.menu
{
min-width: 100%;
top: 0;
left: 0;
background-color: #111;
padding-top: 50px;
height: 100vh;
}
.menu a, .untermenu
{
padding: 8px 15px 10px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
cursor: pointer;
}
div.gallery
{
position: relative;
left: 9%;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 230px;
}
div.gallery:hover
{
border: 1px solid #777;
}
div.gallery img
{
width: 100%;
height: 10em;
}
div.desc
{
padding: 15px;
text-align: center;
background-color: white;
}
p
{
padding: 0;
margin: 0;
line-height: 1.5;
}
.menu a:hover, .untermenu:hover
{
color: #f1f1f1;
}
.untermenu-links
{
display: none;
background-color: #262626;
}
.active
{
background-color: #093802;
color: white;
}
#kleiner
{
font-size: 15px;
}
#media only screen and (max-width: 600px) {
.body-wrapper {
display: flex;
flex-direction: column;
}
.menu {
height:100%;
padding-top: 0px;
display: flex;
}
}
I have created your layout using basic simple use of grid and flex.

HTML input element not taking 100% width

My angular code on gitHub is using ngRoute, where the page1.html gets loaded in ngView.
I have input element in page1.html with its css set to 100% thus is expected to fill the width of the view but it is only taking about 70% or so.
If the main element width set to 100%, the footer buttons disappear, image 2.
Not sure why? Thanks
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 1%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
main, .mainMenu {
position: absolute;
top: 2.5em;
}
main {
z-index: -2;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer > button {
font-size: 1em;
padding: 0.5em 1em;
}
input {
font-size: 1em;
padding: 0.25em;
margin: 0.25em;
width: 100%;
}
header, footer {
background-color: white;
}
.horizontal-style {
display: table;
width: 100%
}
.horizontal-style li {
display: table-cell;
padding: 2px;
}
.horizontal-style button {
display: block;
border: 1px solid black;
text-align: center;
background: #dfdfdf;
}
footer button {
width: 100%;
border-radius: 6px;
font-size: 1.5em;
}
.mainMenu {
padding-left: 1em;
background-color: #dfdfdf;
width: 70%;
border-radius: 0 6px 10px 0;
}
ul {
list-style-type: none;
}
ul li img {
vertical-align: middle;
padding-right: 0.25em;
}
a {
display: block;
padding: 1em 0em;
}
// page1.html
<section>
<input type="text" placeholder="page1-input1">
</section>
// index.html
<!doctype html>
<html lang="en" ng-app="appModule">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
<base href="http://localhost:63342/students/">
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>-->
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
<script src="services/routing.js"></script>
<script src="services/menuToggle.js"></script>
<script src="controllers/menuToggleCtrl.js"></script>
<script src="controllers/mainMenuCtrl.js"></script>
<script src="controllers/page1Ctrl.js"></script>
<script src="controllers/page2Ctrl.js"></script>
</head>
<body>
<header ng-controller="MenuToggleCtrl">
<button class="menuLeft" type="button" ng-model="clicked" ng-click="menuToggle()">☰</button>
<label id="pageTitle" class="pageTitle">Select item from list</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section class="mainMenu" ng-controller="MainMenuCtrl" ng-if="!clicked">
<ul>
<li ng-repeat="item in menuItems">
<a href="#/{{item.name}}">
<image ng-src="images/{{item.image}}.png"></image>
{{item.name}}
</a>
</li>
</ul>
</section>
<main ng-view></main>
<footer ng-controller="MenuToggleCtrl" ng-if="clicked">
<ul class="horizontal-style">
<li><button type="button">NO</button></li>
<li><button type="button">EXTRA</button></li>
<li><button type="button">YES</button></li>
</ul>
</footer>
</body>
</html>

Try to set the min-width of the input field to 100% something like this in your CSS code:
input {
font-size: 1em;
padding: 0.25em;
margin: 0.25em;
width: 100%;
min-width: 100%; }
this should solve the issue when input is not getting 100% width of its parent.

The input element is getting inserted inside 'main' container. Hence, set the width to 100% for the main tag.
main, .mainMenu {
position: absolute;
top: 2.5em;
width: 100%;
}
Here is the fix
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 1%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
main, .mainMenu {
position: absolute;
top: 2.5em;
width: 100%;
}
main {
z-index: -2;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer > button {
font-size: 1em;
padding: 0.5em 1em;
}
input {
font-size: 1em;
padding: 0.25em;
margin: 0.25em;
width: 100%;
}
header, footer {
background-color: white;
}
.horizontal-style {
display: table;
width: 100%
}
.horizontal-style li {
display: table-cell;
padding: 2px;
}
.horizontal-style button {
display: block;
border: 1px solid black;
text-align: center;
background: #dfdfdf;
}
footer button {
width: 100%;
border-radius: 6px;
font-size: 1.5em;
}
.mainMenu {
padding-left: 1em;
background-color: #dfdfdf;
width: 70%;
border-radius: 0 6px 10px 0;
}
ul {
list-style-type: none;
}
ul li img {
vertical-align: middle;
padding-right: 0.25em;
}
a {
display: block;
padding: 1em 0em;
}
// index.html
<!doctype html>
<html lang="en" ng-app="appModule">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
<base href="http://localhost:63342/students/">
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>-->
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
<script src="services/routing.js"></script>
<script src="services/menuToggle.js"></script>
<script src="controllers/menuToggleCtrl.js"></script>
<script src="controllers/mainMenuCtrl.js"></script>
<script src="controllers/page1Ctrl.js"></script>
<script src="controllers/page2Ctrl.js"></script>
</head>
<body>
<header ng-controller="MenuToggleCtrl">
<button class="menuLeft" type="button" ng-model="clicked" ng-click="menuToggle()">☰</button>
<label id="pageTitle" class="pageTitle">Select item from list</label>
<button class="menuRight" type="button">⋮</button>
</header>
<!--
<section class="mainMenu" ng-controller="MainMenuCtrl" ng-if="!clicked">
<ul>
<li ng-repeat="item in menuItems">
<a href="#/{{item.name}}">
<image ng-src="images/{{item.image}}.png"></image>
{{item.name}}
</a>
</li>
</ul>
</section>
-->
<main ng-view>
<section>
<input type="text" placeholder="page1-input1">
</section>
</main>
<footer ng-controller="MenuToggleCtrl" ng-if="clicked">
<ul class="horizontal-style">
<li><button type="button">NO</button></li>
<li><button type="button">EXTRA</button></li>
<li><button type="button">YES</button></li>
</ul>
</footer>
</body>
</html>

Well you mainMenu is set to width 70% and when you assign a child of mainMenu width 100% it takes the whole width of its parent, so eventually your input will be long as you parent container which means 70%. If you want it to be 100% of the screen you have to make the mainMenu 100%.

angular ngHide on a button leaves space where it was

In the footer of this html file, I have 3 buttons.
The first image shows how the 3 buttons are arranged.
The second image shows is when the footer middle button is commented out.
The third image is when ng-hide="true" on the middle button.
How can I have no space between the No and YES buttons when the middle is ngHide(n)? Thanks
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 1%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
main, .mainMenu {
position: absolute;
top: 2.5em;
}
main {
z-index: -2;
width: 100%;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer > button {
font-size: 1em;
padding: 0.5em 1em;
}
section {
text-align: center;
}
input {
font-size: 1em;
padding: 0.25em;
margin: 0.5em;
width: 90%;
}
header, footer {
background-color: white;
}
.horizontal-style {
display: table;
width: 100%
}
.horizontal-style li {
display: table-cell;
padding: 2px;
}
.horizontal-style button {
display: block;
border: 1px solid black;
text-align: center;
background: #dfdfdf;
}
footer button {
width: 100%;
border-radius: 6px;
font-size: 1.5em;
}
.mainMenu {
padding-left: 1em;
background-color: #dfdfdf;
width: 70%;
border-radius: 0 6px 10px 0;
z-index: -1;
}
ul {
list-style-type: none;
}
ul li img {
vertical-align: middle;
padding-right: 0.25em;
}
a {
display: block;
padding: 1em 0em;
}
<!doctype html>
<html lang="en" ng-app="appModule">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
<base href="http://localhost:63342/students/">
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>-->
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
<script src="services/routing.js"></script>
<script src="services/menuToggle.js"></script>
<script src="controllers/menuToggleCtrl.js"></script>
<script src="controllers/mainMenuCtrl.js"></script>
<script src="controllers/page1Ctrl.js"></script>
<script src="controllers/page2Ctrl.js"></script>
</head>
<body>
<header ng-controller="MenuToggleCtrl">
<button class="menuLeft" type="button" ng-model="clicked" ng-click="menuToggle()">☰</button>
<label id="pageTitle" class="pageTitle">Select item from list</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section class="mainMenu" ng-controller="MainMenuCtrl" ng-if="!clicked">
<ul>
<li ng-repeat="item in menuItems">
<a href="#/{{item.name}}">
<image ng-src="images/{{item.image}}.png"></image>
{{item.name}}
</a>
</li>
</ul>
</section>
<main ng-view></main>
<footer ng-controller="MenuToggleCtrl" ng-if="clicked">
<ul class="horizontal-style">
<li><button type="button">NO</button></li>
<li><button type="button">EXTRA</button></li>
<!--<li><button type="button">EXTRA</button></li>-->
<!--<li><button type="button" ng-hide="true">EXTRA</button></li>-->
<li><button type="button">YES</button></li>
</ul>
</footer>
</body>
</html>

Hide the entire li by applying ng-hide to li element.
<li ng-hide={{expression}}><button type="button">EXTRA</button></li>
NOTE: You can also use ng-if instead of ng-hide which will completely remove the <li> from DOM and can prove performant with large content inside the container.

I have checked your code this is fine. you are hiding the below button
<button type="button">EXTRA</button>
You need to hide full below li
<li><button type="button">EXTRA</button></li>
This works fine.

When you hide the button alone, still the li is visible and some of the styles added to li creates some spacing between two buttons.
Hide the entire li by applying ng-hide to li element.
<li ng-hide="true"><button type="button">EXTRA</button></li>

I cant move my contrent .... in my main?

EDIT#2: Fixed it i have added to my code position: absolute; top 130px; display:block; thanks for all respondes ... code on codepen was fixed too .. :D
EDIT: So i fixed the content-holder problem now i have a new one i cant move him inside my main .... i have been trying vertical align and it doesnt work Codepen: http://codepen.io/anon/pen/VvKdrL
My new code :
header>a
{
font-size: 38px;
font-weight: 500;
border-bottom: 1px solid #888;
text-align: left;
color: #555;
font-family: "Monserat";
}
header
{
border-bottom:1px solid #888;
}
main
{
height: 530px;
display: block;
margin-top: -40px;
}
ul
{
list-style-type: none;
}
li a
{
font-size: 22px;
font-family: Helvetica;
margin: 4px;
font-weight: 500;
font-family: "Roboto";
line-height: 34px;
color: #222;
}
a
{
text-decoration: none;
}
li::before
{
content: "➢";
}
.center
{
width: 960px;
margin: 0 auto;
}
.content-holder
{
position: absolute;
width: 250px;
height: 200px;
top: 130px;
background: #eee;
display: block;
z-index: 2;
}
.background
{
z-index: 1;
background-repeat: no-repeat;
}
.footer
{
border-top: 1px solid #888;
height: 20px;
content:
}
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:500,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="center">
Name
</header>
<main class="center sizemain">
<div class="background"></div>
<div class="content-holder">
<ul>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
</ul>
</div>
</main>
<footer class="footer">
</footer>
</body>
</html>
Thanks for respondes

You need to comment out both the margin-top and the margin. Margin applies 50px to every side.
.content-holder {
width: 250px;
height: 190px;
background: #eee;
/* margin: 30px; */
/* margin-top: 50px; */
vertical-align: 50px;
z-index: 2;
}
See: http://www.w3schools.com/css/css_margin.asp

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

CSS Custom combobox issue - html

Related

How to make new text apear after the header (not underneath it), while keeping the shape of the header?

My Website is "overlaying" on the bigger screen

HTML input element not taking 100% width

angular ngHide on a button leaves space where it was

I cant move my contrent .... in my main?

Categories

Resources