I have a navbar which contains some useful buttons and information. I don't want it to be sticky or something like this, I just want it to be on the top.
I have a problem with the scroll appearing on my page because:
I have this navbar
I sometimes want to center some things on page, therefore I use tricks like height: 100%
The rest of the question is me explaining myself but you can see exactly what I mean here: https://codesandbox.io/s/vigilant-fast-wtoc5:
the scroll appears
the content is not centered until I scroll
The expected output for me is: the content below the navbar takes the space it needs to the end of the page's height (without adding more height and scroll) and is centered (vertically and horizontally) - within its own div.
So let's go into the details:
This is the navbar:
const AppBar = styled.header`
color: white;
margin-bottom: 0.1rem;
width: 100%;
position: sticky;
`;
It's styled-components syntax but you know the drill, it's a header with this style. Anyway, this page header is rendered above anything else, it's present on every page. The problem that I have is:
When I have a page with like one <span> centered on it (so not too much of content), the page renders with a scroll, because the navbar has its height, so I can scroll as much as it takes to cover it up fully (and no more).
This is a problem for me since when I don't scroll, the text is not centered on the page. And if I do, then it's centered, but I don't want to have to scroll to see the desired output.
Anyway, this are my global styles:
html, body, #root {
height: 100%;
margin: 0;
}
And this is how I center text on the page (this is the style of the div in which span is put):
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
I know I can do position: fixed but then if some page is not centered (its content should appear just below the navbar) then its content is getting covered by the page header.
So my question is: Is there a way to have this navbar not add a scroll to my page (I imagine it would be like painted "over" the page?) or somehow center my pages differently (when I want to) to make this centering work with the navbar present as it is now?
P.S I use React but I composed this example in plain HTML&CSS.
I modified some of your code(in your link). I hope this is what you want and be helpful to you.
html,
body {
height: 100%;
margin: 0;
display: flex; /* add this */
flex-direction: column; /* add this */
}
.navbar {
background-color: blue;
color: white;
margin-bottom: 0.1rem;
width: 100%;
height: 300px;
position: sticky;
flex-shrink: 1; /* add this */
}
.center {
font-size: 5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/*height: 100%;*/
flex-grow: 1; /* add this */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="navbar"></header>
<div class="center">Centered content</div>
</body>
</html>
Related
Assuming I have a folowing code - fiddle - with font-size attribute set for <html> tag. This styling along with header and footer is generated via js script which cannot be removed. This is already existing page for a long time.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="bootstrap4.css">
<link rel="stylesheet" href="myCustomCss.css">
<link rel="stylesheet" href="cssLoadedByJs.css">
</head>
<body>
<div>
Header (need to stay as it is now with smaller font)
</div>
<div class="content"> <!-- (need to reset it 100%, so content will be sized as I want...) -->
Content
<h2>
H1 here
</h2>
</div>
<div>
Footer (need to stay as it is now with smaller font)
</div>
</body>
</html>
Css file injected by remote js (cssLoadedByJs.css) - cannot remove it, need to stay:
html {font-size: 62.5% !important;}
myCustomCss.css - what I was trying to do:
html .content {
/* font-size: 100% !important; */
/* font-size: unset; */
/* font-size: 16px; */
}
How to reset font-size attribute for content div only and preserve header and footer as it is?
I've tried to set font-size: unset; or font-size: 100% for content div but no result. font-size: 16px let me render text in 16px as I want, but h2 still has only 20px insted of 32px (due to this sizing for html tag, bootstrap use 2rem for h2). Anyway I believe that there is better way than just hardcoded pixel size. Possible to do this somehow? Pls check fiddle for better understanding and tests...
I'm not sure why exactly are you using font size on html tag directly but maybe the following hack can help overcome your problem.
html > body > div.content,
html > body > div.content * {
font-size: 137.5%;
}
I seriously advise not using this approach and styling specific elements instead.
Check this: https://jsfiddle.net/5jdrta16/1/
I took the font-size... important setting off of the <html> and applied it to the <body> element (without important). I also moved all the styling into the CSS.
.content {
font-size: 30px; /* I used 30px vs. 16px to more clearly illustrate that it's applied */
}
body {
font-size: 62.5%;
}
What about:
.content, .content * {
font-size: initial;
}
I have been trying to use particle effect in the background and have some text centred in that div and have the particle effect in the background.
The javascript files refer to the particleJS files which you can find here.Github ParticleJS.
But Im just not able to centre it in the middle, is it because JS is rendering it simultaneously is there a way I can do it.
Link to codepen
body{
margin:0px;
padding: 0px;
}
canvas{
display:block;
height: 100%;
vertical-align:bottom;
}
#particles-js{
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
#name{
color: white;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" href = "particle.js"></script>
<link rel="stylesheet" media="screen" href="style.css">
<title>Linko</title>
</head>
<body>
<div id="wrapper">
<div id="particles-js">
<script src="particles.js"></script>
<script src="app.js"></script>
<div id="name">
<p>Hello there</p>
</div>
</div>
</div>
</body>
</html>
You can add position: absolute; to the #name div for him to go above the canvas.
Then change align-content:center by align-items:center in #particles-js div.
Here is a updated codepen :)
https://codepen.io/anon/pen/vqWePJ
The position:absolute is needed because HTML element by default (posistion:static) are positioned as a flow, one after another in their parents, so you can't have one overlapping another. Adding the position:absolute to one of the element will remove it from this flow, and position it as if it was alone in his parent, so now it can overlap the others.
You can see this link for more complet explanations on CSS positionning.
https://www.w3schools.com/css/css_positioning.asp
For the align-content/align-items issue, align-content is used for multi line alignement, and align-items for alignement in the inverse of the flex box direction.
The naming here is discutable and a bit confusing since justify-content is used for single line alignement in the flex box direction I think, but I was not here during this discussion, they probably had a reason to do it this way.
You can see this question What's the difference between align-content and align-items? for more details on that.
Try:
#name{
color: white;
align-self: center;
}
This will cause the 'name' div to be horizontally centered inside of the 'particles-js' div.
Let look at the following codes as example.
var tst;
tst = document.getElementsByClassName("tst");
tst.style.backgroundColor = "#008000";
tst.style.marginTop = "50px";
tst.innerHTML = "Testing an element.";
body {
font-size: 0px;
padding: 0px;
margin: 0px;
width: 100%;
overflow-x: hidden;
}
.tst {
font-family: Arial;
font-size: 20px;
color: #FFFFFF;
text-align: center;
background-color: #FF0000;
padding: 10px;
margin: 10px auto 0px auto;
width: 200px;
display: block;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="tst"></div>
<script src="./js_style.js"></script>
</body>
<html>
Now my question is, in which order browser will execute this codes,
like,
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)
5. Styles in JavaScript
or in different order?
And how can we change the order?
Thanks Everyone.
CSS is not executed. It's just a set of rules that dictates what an element should look like.
So yes, the order you specified is the right order, but that doesn't necessarily mean that a later style overrules an earlier one.
Most important here, is the specificity of the CSS selector. For instance a CSS selector with a class name (like .tst) is more specific than a selector with a tag name (like div). So if you would have both selectors, and both of them setting the color of your test div, then the color of .tst would be used over the other.
But when selectors are of the same specificity, the last one that is encountered is used, so there may be a later one in the same style sheet, or in a different external style sheet. When evaluating this, the order you mentioned is important.
However, that specificity merely affects the internal and external style sheets. When you have inline styles, they always overrule the styles in the style sheet.
the same applies to the JavaScript code, since it just changes the inline style of the element.
I have a scrollable div in td. It appears fine in Chrome however becomes really small in IE and Firefox but the height of the row stays the same. I have tried to change overflow:auto to overflow:hidden as suggested by some of the previous answers but nothing seem to work.
Additionally added <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to support browswer compatibility but still didn't work.
Height of the table row:
#inrm .quotelog {
height: 200px;
}
scrollable div
#inrm .scrollable {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: auto;
}
Inserting the div in HTML as
<tr class="quotelog">
<td>
<div class="scrollable"><%=rsOrderView("orderlog")%></div>
</td>
</tr>
Any suggestion or pointers would be appreciated.
I've been reading around Stack Overflow and searching on Google for a reliable way to hide the toolbars on iOS 7 as the old scroll trick no longer works.
Based on this: http://mihhaillapushkin.wordpress.com/2014/01/20/stop-navigation-bars-from-appearing-in-iphone-ios7-safari/
I've tried the following:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<style type="text/css">
*
{
padding: 0;
border: 0;
outline: 0;
margin: 0;
}
html,
body
{
width: 100%;
height: 100%;
overflow: hidden;
}
div.content
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 320px;
height: 480px;
background: orange;
}
#scroller {
height: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
overflow: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
}
</style>
</head>
<body class="default">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
setInterval(function(){
if((window.orientation == 90 || window.orientation == -90) && window.innerHeight != window.outerHeight) {
$('#scroller').show();
} else {
$('#scroller').hide();
}
}, 1000);
</script>
<div class="content">
<div id="scroller" style="z-index: 100000;position: fixed;top:0;left:0;right:0;bottom:0;">
Scroll up!
</div>
</div>
</body>
</html>
But scrolling up never actually hides the scrollbars. The #scroller is hiding and showing if the toolbars are visible or not, so half of it works, but just not the hiding unless I bounce the content into the toolbar, but if I scroll then the toolbars appear again.
Have I misunderstood the implementation?
If you want to hide the Safari Address bar you need to add this meta tags
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
The status bar can be hidden in iOS 7.1 and above with this meta tag
<meta name="viewport" content="minimal-ui”>
Okay, here is an answer from the author.
I have not dived into your code block, but just to clarify what I've told about in that post.
Firstly, I have shown an example of a game that has adopted an overlay that forces the player to scroll up until the bars go away. After the game detects that bars are no longer visible it locks scrolling until the player triggers navigation bars again, forcing him to go through the loop again.
Secondly, I have revealed a trick that for some reason deactivates navigation bar triggering ONLY for the top part of the screen. The bottom still triggers them as usual, so the the overlay I mentioned earlier is still needed. Thus this is a half-solution for the problem, but it is still better than nothing.
IMHO, the combination of those 2 approaches yields a good-enough solution for games and other applications that need full-screen without the need for scrolling.