I recently created an Angular project with a red navigation bar at the top of the page.
At the start the nav bar was directly at the top of the page but later on I realised that there was a small white space created above it.
I then discovered that I could highlight a part of the space and thought that it was not a CSS issue but rather a space placed by mistake.
Photo of white space:
White Space Above Navbar
Photo of console when I inspect the highlighted area:
Console: Inspect White Space
I think that the issue might be caused by the "  ;" but I don't know how to find it in my HTML files.
Here is my index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MediStockWeb</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>
app.component.html:
<router-outlet></router-outlet>
app.component.scss:
.navbar {
background-color: #eb4848;
border: 1.5px solid black;
}
.nav-link {
color: black;
font-size: large;
margin-left: 3rem;
font-weight: 500;
font-size: x-large;
}
.navLogo {
padding: 5px;
}
table {
border: 2px solid #000;
th {
border: 2px solid #000;
background-color: #ec3c3c;
font-size: large;
font-weight: 550;
padding: 1rem;
text-align: center;
}
td {
border: 2px solid #000;
text-align: center;
padding: 10px;
}
}
input {
border: 1px solid #000;
}
select {
border: 1px solid #000;
}
.btn {
border: 0.25px solid #000;
}
label{
font-size: large;
}
.errorMessage {
color: red;
margin-top: 10px;
}
input.ng-invalid.ng-touched,
select.ng-invalid.ng-touched {
border: 1px solid red;
}
.mat-icon {
margin: 5px;
&:hover{
cursor: pointer;
color: rgb(94, 92, 92)
}
}
.nav-item {
&:hover{
cursor: pointer;
}
}
.modal-title {
font-size: 20px;
}
.modal-body {
font-size: 18px;
}
Any assistance would be appreciated!
I believe it's something in the component being displayed in your route or one of the scripts you include. It's not really good practice to place <link> elements in your body even if they are one of the body-ok types.
If I had to guess, I would say that you are including a script for ej2 somewhere in your build. It probably thinks it has to add the stylesheet <link> elements and does it inappropriately.
Related
Ok so I'm trying to program a bar that appears at the top of the webpage. On that bar I want there to be a title, a button, and an input/search bar. My problem is that the input keeps overlapping the button in the top bar. Please note that the bar at the top is a div. Here is the link to the page with the bug: Link to the page.
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Langmesh</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div id="topbardiv">
<h1 id="titletext">Langmesh</h1>
<button onclick="browse()" id="browsebutton">Browse</button>
<input type="text" id="searchbar" value="Search">
</div>
</body>
</html>
Here is the CSS code:
#titletext {
font-size: 50px;
font-family: "Brush Script MT", sans-serif;
}
#topbardiv {
background-color: darkorange;
text-align: center;
border: 10px solid lightgray;
}
#topbardiv h1,
#topbardiv button {
margin: 0px;
display: inline-block;
padding: 1em;
color: white;
-webkit-text-stroke: 1.5px #000000;
}
#browsebutton,
#searchbar {
height: 150px;
width: 100px;
font-size: 30px;
font-family: "Brush Script MT", sans-serif;
background-color: darkorange;
border: 0;
}
I have not added any Javascript yet.
If this is a stupid question with a simple answer and I'm just dumb, feel free to criticize me.
I tried using text a button and an input in the same div and used css to put them all right next to eachother and I expected that it would look like a bar at the top with a title a browse button and a search bar but instead the search bar and the browse button ended up overlapping.
I am using a Windows 10 OS and replit to program the page and a chrome web browser.
it's because you have set the width of the #browsebutton and #searchbar. Please unset it and it will work.
* {
margin: 0;
font-family: 'roboto';
}
.container {
text-align: center;
}
.container input {
border: none;
box-shadow: 0px 0px 2px;
height: 33px;
}
.container button {
border: none;
box-shadow: 0px 0px 2px;
height: 33px;
}
.container h1 {
}
.background_css {
width: 100%;
background: orange;
padding-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Langmesh</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container">
<div class="background_css">
<h1 id="titletext">Langmesh</h1>
<form method="POST" action="page.html" class="search_css">
<input type="search" placeholder="Search..."><button type="submit">Search</button>
</form>
</div>
</div>
</body>
</html>
Whenever I press the button it changes its radius and adds a white line under the box. The idea is that the button stays in the same shape that was before, the only difference should be the shadow dissapearing the way it already does.
.boton{
font-weight: bold;
margin: 20px;
padding: 5px;
background-color: white;
border-color: black;
color:black;
cursor: pointer;
border-radius:none;
box-shadow: 5px 6px rgb(0, 0, 0);
outline: none;
}
.boton:hover {
color:black;
transform: translateY(1px);
}
.boton:active {
outline: none;
padding: 5px;
color:black;
transform: translateY(6px);
box-shadow: none;
border-radius: none;
border-color: black;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<title>Hello, world!</title>
</head>
<body>
<button class="boton" href="#about">CLICK!</button>
</body>
</html>
Edit: The below solution causes accessibility problems for keyboard users who rely on a visual outline to know where on a page they are focused. Instead, consider adding onclick="this.blur(); to unfocus the button after clicking so that the outline doesn't appear after clicking but still appears when focusing on the button.
<button class="boton" href="#about" onclick="this.blur();>CLICK!</button>
Your problem appears to be fixed by adding outline: none; inline to the button. You have this specified in your CSS but it appears some browsers are overriding your specification.
<button class="boton" href="#about" style="outline: none;">CLICK!</button>
your problem is caused by bootstrap. add button:focus{outline:none!important}
.boton{
font-weight: bold;
margin: 20px;
padding: 5px;
background-color: white;
border-color: black;
color:black;
box-shadow: 5px 6px rgb(0, 0, 0);
outline: none;
}
.boton:hover {
color:black;
transform: translateY(10px);
}
.boton:active {
outline: none;
padding: 5px;
color:black;
transform: translateY(6px);
box-shadow: none;
border-radius: none;
border-color: black;
background-color:black;
}
button:focus{
outline:none!important;}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<title>Hello, world!</title>
</head>
<body>
<button class="boton" href="#about">CLICK!</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
display: block;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0]
alert(dis.style.display)
}
</script>
</head>
<body>
<div class="navbar">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
When the top left button is pressed, the alert popup box prints nothing indicating that navbar has no display. But navbar is a div element with display = block explicitly set in the CSS code.
You're not returning a value because the style attribute does not contain any value in this instance. If for example we move the display: block to the element as a style attribute like style="display: block" then it would return the value as you expect. See example provided, but the behavior is expected.
Hope this helps, cheers!
PS - a div is a block element by default, no need to define it in the css unless you're overriding the default for whatever reason.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0];
console.log(dis);
alert(dis.style.display);
}
</script>
</head>
<body>
<div class="navbar" style="display: block">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
Looks like you want to get the CSS computedStyle. You can use getComputedStyle to return an object containing the values of all CSS properties of said element.
getComputedStyle(dis, "display").display
Will return the display rule set in your elements css. As Chris W explained in the prior answer if you use el.style.display, it is looking for the inline style rule for display.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
display: block;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0]
alert(getComputedStyle(dis, "display").display)
}
</script>
</head>
<body>
<div class="navbar">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
I am very confused right now. I've used Os-animation before and I even copied the exact code from my other use of it, but I cannot get it to work on this page. Here is my HTML/CSS:
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #4074A0;
font-family: 'Open Sans', sans-serif;
border: none;
outline: none;
box-shadow: none;
}
* {
outline: none;
border: none;
box-shadow: none;
text-shadow: none;
}
main {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
}
p {
text-align: center;
font-size: 250%;
width: 100%;
color: white;
text-transform: uppercase;
text-shadow: 0px 3px #098FA8;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Testing</title>
<link rel="stylesheet" href="style.css">
<link href="css/animate.css" rel="stylesheet" />
<link href="css/waypoints.css" rel="stylesheet" />
</head>
<body>
<main class="os-animation" data-os-animation="bounceInDown" data-os-animation-delay="0s">>
<p>Hello!</p>
</main>
</body>
</html>
So, I am trying to get the 'Hello!' text to bounceIn from the top, I have previously done this and have even copied the code from that old document, however, it doesn't seem to want to work on this one.
I've done some looking online but there doesn't seem to be much about this topic.
Any help is appreciated!
Thank you.
I have a Bootstrap button, in which I overrode the styling in my stylesheet because I wanted to make the button dark, now the button has a hover effect from Bootstrap on it, how can I get rid of it? See the snippet below for the result:
.btn-dark {
min-width: 100px;
background-color: black;
color: white;
border-radius: 1px;
text-decoration: none;
opacity:1.0;
box-shadow:none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<i class="fab fa-telegram-plane"></i> SEND US A MESSAGE
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.btn-dark{
min-width: 100px;
background-color: black;
color: white;
border-radius: 1px;
text-decoration: none;
}
.btn:hover {
color: #fff !important;
text-decoration: none;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<i class="fab fa-telegram-plane"></i> SEND US A MESSAGE
</body>
</html>
fiddle:https://jsfiddle.net/1qmjw47o/
Try using the :hover selector and add more CSS to specify the exact transition designed.
.btn-dark:hover {
color: white;
}
You also need to override hover in the styling.
.btn-dark: hover {
//Your style
}
You can set the css on the element to pointer-events:none.
Look here.
Just use
.btn:hover {
}
and write the necesssary.
.btn-dark{
min-width: 100px;
background-color: black;
color: white;
border-radius: 1px;
text-decoration: none;
opacity:1.0;
box-shadow:none;
}
.btn-dark:hover {
color: #fff !important;
text-decoration: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<i class="fab fa-telegram-plane"></i> SEND US A MESSAGE
The way i do it is to disable a hover find your button and then put the hover color the same as the button color..
.e-btn.e-flat, .e-css.e-btn.e-flat {
background-color: #EB780A;
border-color: #EB780A;
}
and to disable the hover color - add hover at the end.
.e-btn.e-flat:hover, .e-css.e-btn.e-flat:hover {
background-color: #EB780A;
border-color: #EB780A;
}
A bit late but it can still help I guess!
In Bootstrap you can do this ro remove both hover and focus effects (just change the variables to match those of your Bootstrap vesrion):
.btn {
&:hover {
background-color: var(--bs-btn-bg);
color: var(--bs-btn-color);
}
&:focus {
background-color: var(--bs-btn-bg);
color: var(--bs-btn-color);
}
&.active {
&:hover {
background-color: var(--bs-btn-active-bg);
color: var(--bs-btn-active-color);
}
&:focus {
background-color: var(--bs-btn-active-bg);
color: var(--bs-btn-active-color);
}
}
}