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>
Related
How can i prevent the text going below the button when it gets too large?
HTML
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#500;900&display=swap"
rel="stylesheet">
</head>
<html>
<body>
<div class="app">
<div class="container">
<h1>Shopping List</h1>
<input type="text" placeholder="Add an item" id="item-input"/>
<button id="item-button">Add</button>
<ul id="items">
<li><button class="remove">X</button>Hamburger</li>
<li><button class="remove">X</button>Milk</li>
</ul>
</div>
</div>
</body>
</html>
This is what is happening
Text going under the button
And this is the CodePen
https://codepen.io/ReaperClown/pen/oNZprmY
Change break-word to break-all:
li {
margin: 0.5em 0;
word-break: break-all;
}
Should do the trick..
#items li {
display:flex;
word-break: break-all; // Not needed but might fix the overflow issue later on
}
You can specify whether line breaks should appear wherever your <li> text would overflow its content box with word-break. Using word-break: break-all; on your <li> elements will make sure that line breaks appear when a list item has a long line of text and overflows its content box.
body {
padding: 0;
margin: 0;
background-color: #101011;
font-family: "Raleway", sans-serif;
}
.app {
position: relative;
}
.container {
background-color: #a8bfb6;
position: absolute;
padding: 1em 2em;
width: 400px;
left: 0;
right: 0;
margin: auto;
top: 50vh;
transform: translateY(-50%);
}
h1 {
text-transform: uppercase;
letter-spacing: 4px;
color: #2b2b2e;
}
ul {
list-style: none;
padding: 0;
}
li {
margin: 0.5em 0;
word-break: break-all;
}
#items {
display: table-cell;
}
.remove {
border: none;
background-color: #f4d58d;
margin-right: 5px;
cursor: pointer;
word-wrap: inherit;
position: relative;
}
#item-button {
cursor: pointer;
background-color: #f4d58d;
border: none;
padding: 0.5em;
}
input {
border: none;
padding: 0.5em;
}
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#500;900&display=swap" rel="stylesheet">
</head>
<html>
<body>
<div class="app">
<div class="container">
<h1>Shopping List</h1>
<input type="text" placeholder="Add an item" id="item-input"/>
<button id="item-button">Add</button>
<ul id="items">
<li><button class="remove">X</button>Hamburger</li>
<li><button class="remove">X</button>Milk</li>
<li><button class="remove">X</button>abschbaskjhdbaksdhjbalskdjabsdklahbsdlkajsbdalksjdbalksdj</li>
</ul>
</div>
</div>
</body>
</html>
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%.
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
Here is what it looks like:
If I remove the image, the text centers perfectly:
#A.B
I mean, it worked... Sort of.
I am having some problems with the image pushing the title to the right, as you can see, it's not exactly centred.
HTML:
<!doctype html>
<head>
<meta charset="UTF-8">
<meta name"description" content"Mobile Cat Grooming Service">
<meta name"keywords" content"Cat, Grooming, Service, Colchester">
<meta name"author" content"Jordan Downs">
<title>Index</title>
<link rel="stylesheet" type="text/css" href="master.css"/>
<script type="text/javascript">
function changeFontSize(element, step) {
var el = document.getElementById(element);
var curFont = parseInt(window.getComputedStyle(el).fontSize, 10);
el.style.fontSize = (curFont + step) + 'px';
}
</script>
<script>
function changecolor(code) {
document.body.style.backgroundColor=code
}
</script>
</head>
<h2>
<center>
<button type="button" onClick="changeFontSize('content', 2);">A+</button>
<button type="button" onClick="changeFontSize('content', -2);">A-</button>
<script language="javascript" type="text/javascript"></script>
<form>
<input type="button" name="Button1" value="Default" onclick="changecolor('white')">
<input type="button" name="Button1" value="Scheme 1" onclick="changecolor('#FE2EF7')">
<input type="button" name="Button1" value="Scheme 2" onclick="changecolor('#FA58D0')">
<input type="button" name="Button1" value="Scheme 3" onclick="changecolor('#B404AE')">
</form>
</center>
</h2>
<body>
<div id="page">
<header>
<img src="Images/catlogo.jpg" alt= "logo"/>
<h1><center>Mobile Cat Grooming Service</center></h1>
</header>
<nav>
<ul>
<li><a alt="Home button" href="index.html">Home</a></li>
<li><a alt="History page button" href="history.html">History</a></li>
<li><a alt="Appointment page button" href="appointments.html">Appointments</a></li>
<li><a alt="Contact us page button" href="contactus.html">Contact us</a></li>
</ul>
</nav>
</head>
CSS:
body {
font-family: arial, helvetica, sans-serif;
line-height: 1.8em;
zoom: 150%;
}
#page {
margin:2% auto;
width: 100%;
overflow: hidden;
}
header {
float: left;
clear: both;
width: 96%;
color: #fff;
background-color: #660066;
padding: 1%;
margin-left: 1%;
}
header img {
float: left;
width: 12%;
height: 12%;
background: #660066;
}
h2 {
float: left;
margin-bottom: -1%;
width: 96%;
color: #fff;
background-color: #660066;
padding: 1%;
margin-left: 1%;
border-bottom: 2px solid;
border-color: #Cc3399;
}
nav {
font-family: "Times New Roman";
position: relative;
margin: auto;
padding: 0;
list-style: none;
width: 100%;
height: 100%;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
text-decoration: none;
padding: 5px 0;
width: 100px;
background: #Cc3399;
color: #eee;
float: left;
text-align: center;
border-left: 1px solid #fff;
}
nav ul li a:hover {
background: #660066;
color: #fff;
}
I suspect there is something we're not seeing as your existing code seems to be fine although I have removed the center tag which has been deprecated and substituted text-align:center.
If it still doesn't center in your FULL HTML, then we need to examine the remainder of the code.
header {
float: left;
clear: both;
width: 96%;
color: #fff;
background-color: #660066;
padding: 1%;
margin-left: 1%;
}
header img {
float: left;
width: 12%;
height: 12%;
background: #660066;
}
header h1 {
text-align: center;
}
<header>
<img src="http://placekitten.com/g/200/300" alt= "logo"/>
<h1>Mobile Cat Grooming Service</h1>
</header>
try this
header {
float: left;
clear: both;
width: 96%;
color: #fff;
background-color: #660066;
padding: 1%;
margin-left: 1%;
position:relative;
}
header img {
width: 12%;
height: 12%;
background: #660066;
position:absolute;
left:0;
top:0;
}
There are a few different ways to do this, you could use position:absolute; in your image or a more extendable way would be something like this:
<header>
<img src="Images/catlogo.jpg" alt= "logo"/>
<h1 class="centerTitle">Mobile Cat Grooming Service</h1>
</header>
css:
centerTitle {
width: 100%;
text-align: center;
margin-left: -12%;
}
I'm not sure how you want your image aligned compared to the page and/or the header but the reason the image is pushing your h1 over is because it is being floated and therefore taken out of the normal document flow. The h1 lines itself up as if the floated image wasn't there. The reason the h1 is shift over is that the space it takes up is still respected even though it is taken out of the normal document flow.
I can make further suggestions once I know the desired layout.
EDIT 1
I would probably use absolute positioning to solve this.
<header>
<img src="http://lorempixel.com/150/200/city">
<h1>Your Title Here</h1>
</header>
header {
text-align: center;
position: relative;
}
header img {
position: absolute;
top: 0;
left: 0;
z-index: 1; /* use this if you're having stacking issues */
}
Here is a jsFiddle demonstrating the above code: http://jsfiddle.net/3h5zdzbr/1/
The problem that i am facing is that text inside the a tag is not adjusting on a single line.
Here's my html.
<html>
<head>
<link rel="stylesheet" href="style5.css" type="text/css">
</head>
<body>
<div id="outer">
<ul>
<li class="current">Home</li>
<li>content</li>
<li>search</li>
<li>more</li>
</ul>
<div id="homepage">
Set as Homepage
</div>
<div id="clear">
</div>
</div>
<div id="wrapper">
<div id="pic">
<img src="logo.png">
<div id="content">
<p> Secure Search </p>
</div>
</div>
<div id="forms">
<form>
<input type="text" name="submit" size="70" style="font-size:20pt;"/>
</form>
<div id="pic_2">
<img src="powerd-by-google.png">
</div>
</div>
<div id="footer">
© 2012 - We Respect your Privacy - About AVG Secure Search
</div>
</div>
</body>
</html>
and here's my css.
body
{
margin: 0;
padding: 0;
background-color: white;
}
h1,h2,h3
{
margin: 0;
padding: 0;
}
p,ul,ol,li
{
margin: 0;
padding: 0;
}
#outer
{
background-color: rgb(67,68,71);
}
#outer ul
{
list-style: none;
margin-left: 5px;
border-left: 1px solid;
}
#outer li
{
float: left;
}
.current
{
background-color: rgb(56,63,137);
}
#outer a
{
width: 90px;
display: block;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-weight: bold;
color: white;
border-right: 1px solid;
padding: 5px;
}
#outer a:hover
{
color: black;
background-color: white;
}
#outer .current a:hover
{
color: white;
background-color: inherit;
}
#homepage a
{
float: right;
font-weight: none;
color: white;
background-color: rgb(67,68,71);
display: inline;
text-transform: lowercase;
border-right: none;
}
#homepage a:hover
{
color: white;
background-color: inherit;
}
#clear
{
clear: both;
}
#wrapper
{
width: 960px;
margin: 0 auto;
overflow: auto;
}
#pic
{
margin-top: 100px;
margin-left: 389px;
position: relative;
}
#content
{
position: absolute;
top: 60px;
left: 90px;
}
#forms
{
margin-top: 50px;
position: relative;
}
#pic_2
{
position: absolute;
top: 0px;
left: 867px;
}
#footer
{
width: 500px;
margin: 375px auto 0px;
}
#footer a
{
text-decoration: none;
}
now the problem is with the a tag in the homepage div, i have tried very hard but i have no idea why its text is not adjusting on a single line instead it seems to creep up on multiple lines.
Any suggestions in this matter would be really helpful.
thank you.
I'm assuming you're talking about the 'set as homepage' button.
If so, The issue is that your css is writing a fixed with to the element inherited from #outer a which is making that element 90px wide.
You can fix this by simply adding the css style width: inherit; to #homepage a
Example:
http://jsfiddle.net/2jByx/1/
You need to add width to the "set as homepage" element
#homepage a {
.....
width: 120px; //added width
}
Take a look at here, http://jsfiddle.net/VkmHr/
is that you looking for?