I follow this example
https://developer.mozilla.org/en/docs/Web/CSS/scroll-behavior
But it does not work, page is reloaded. I need only to scroll, instead of reload.
Actually i would like to scroll all body to the certain id item.
// html5
<nav>
<a href="#page-1" rel='no-refresh' >1</a>
<a href="#page-2" rel='no-refresh' >2</a>
<a href="#page-3" rel='no-refresh' >3</a>
</nav>
<scroll-container>
<scroll-page id="page-1" >1</scroll-page>
<scroll-page id="page-2">2</scroll-page>
<scroll-page id="page-3">3</scroll-page>
</scroll-container>
// css3
a {
display: inline-block;
width: 50px;
text-decoration: none;
}
nav, scroll-container {
display: block;
margin: 0 auto;
text-align: center;
}
nav {
width: 339px;
padding: 5px;
border: 1px solid black;
}
scroll-container {
display: block;
width: 350px;
height: 200px;
overflow-y: scroll;
scroll-behavior: smooth;
}
scroll-page {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 5em;
}
This feature is only fully supported by Firefox 36 currently. Neither Internet Explorer or Safari support this feature at all.
To make it work with Chrome or Opera, you will need to go into your browser settings and enable the "Smooth Scrolling" or "Enable experimental web platform features" flag.
Side Note: The page you linked to contains information about browser compatibility for future reference. This code should not be used for production environments due to the lack of implementation across browsers.
If you want to add smooth scrolling to a production environment I would recommend a javascript based implementation for now.
Related
Only when I use microsoft edge on mobile I have this problem. I use the following css for those buttons:
.footer-wrapper a i[class^="cfi"] {
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
vertical-align: middle;
}
It's something I miss? Or there is any way to use devtools on mobile? Because when I use any user agent on my laptop everything seems to be fine.
I don't have the full context, seeing the HTML would be helpful. However, the easiest way to do that would be to flex-center them.
.footer-wrapper a i[class^="cfi"] {
display: flex;
align-items: center;
justify-content: center;
}
I'm using chrome both on my laptop and on my iphone.
I created a simple example that demonstrates the problem: https://s3.us-east-2.amazonaws.com/asteroid-public/test/test.html
Try viewing that page on your desktop/laptop. The messages render correctly, not overlapping each other. Even when you use the DevTools to view the page as if you are viewing on a mobile device, it still works fine on the laptop. Now, try viewing it on your chrome app on your mobile phone. The messages all overlap each other and so it is hard to read.
Here are some screenshots showing the difference:
Why is this happening and how do I fix it on mobile?
It looks like your .chat .message css properties are causing this. I understand what you tried to do by doing this:
.chat .message {
margin: 4px 16px;
white-space: nowrap;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
However what is causing your problem seems to be the display property. I hope that helps.
.chat .message {
margin: 4px 16px;
white-space: nowrap;
//display: flex;
//flex-direction: row;
align-items: center;
position: relative;
}
I suggest making all div class="message" include a div class="inner". In this way, you can have your div class="inner" at a width: 80%; and display: block;, and your messages have width: 100%; and height: auto;. You can set alignment rules on div class="message" by using .message[origin-me] and .message[origin-them] to set where the div class="inner" aligns. I hope this helps!
My website gets completely messed up in < ie8. Specifically my header just disappears, any ideas?
header{
width: 100%;
height: 140px;
background: #FFFFFF;
margin: 0px;
float: left;
}
h1{
color: #FFFFFF;
font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif
}
.headerInner{
width: 96%;
height: 88%;
background: #00AA4F;
margin: 10px 2%;
text-align: center;
}
IE8 and older versions don't support HTML5, so it doesn't know about the existence of a header element, therefore it doesn't render it. You can use a div instead of the header element or you can add this script here, which adds HTML5 support for IE8: https://github.com/afarkas/html5shiv. But for IE7 and older I don't think it will help you. I you need to support IE7 and older don't use HTML5 elements.
I'm having a hard time aligning some text inside a element styled with display: table-cell. It's just a tab, and I want it to support multiline text. To get the vertical-align: middle; right we need to display it as a table-cell and this is fine mostly, but not here.
On first load it looks like this in chrome. As you can see it's not really in the middle at all.
The very strange thing is, if you open up dev tools and change the line-height from 1 to 2 and then back to 1 it looks fine, like this:
Now if I change line-height to 0 and then back to 1 it looks like this:
How can I make it look good at page load? Is this a known issue?
It looks fine in Firefox, it seems to be chrome only issue.
Heres the CSS for the tab:
.tab-controller__item {
display: inline-table;
border-radius: 6px 6px 0 0;
margin-right: 6px;
position: relative;
overflow: hidden;
vertical-align: middle;
background-color: #717171;
}
.tab-controller__item__link {
color: #fff;
text-decoration: none;
text-transform: uppercase;
padding: 0 2em;
display: table-cell;
line-height: 1;
height: 48px;
vertical-align: middle;
position: relative;
}
and the HTML is pretty basic:
<a class="tab-controller__item__link" href="#">
<span class="icon-star"></span>Kampange<br>& Bonus
</a>
When using display: table-cell, you must have a parent container with display: table or display: inline-table.
In this case, it would be inline-table as your tabs are in a horizontal layout.
.tab {
background-color: #F8AF46;
display: inline-table;
}
Demo : http://jsfiddle.net/Paf_Sebastien/t5pnLe33/
I'm playing around with display: inline-flex css property and see completely different behaviour for the same layout in Firefox and Chrome:
Here's how blocks are stacked in Firefox:
And here's how it looks like in Chrome:
So, Firefox is working as expected (at least by me), and Chrome increases the width of container for some misterious reason.
My question is - what behaviour meets specification and how I can make Chrome to render blocks just like Firefox does.
For the sake of self-completeness, here's css code from codepen snippet I've provided link to:
body {
font-family: Century Gothic;
}
.adder {
display: inline-block;
vertical-align: top;
}
.stage {
height: 200px;
background: linen;
overflow: visible;
display: inline-flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
}
.job {
height: 50px;
width: 100px;
background: white;
color: black;
border: 1px solid black;
}
.job:nth-child(2n) {
background: black;
color: white;
border-color: white;
}
I took the time and went over to CodePen, turns out your problem lies in the css, If you change "display:inline-flex;" to "display:flex;" AND "align-items:flex-start;" to "align-content:flex-start;". I have tested the code and it definitely works on all but safari, I have tested every way I can think of to get it to work, but to no avail.
Athena
P.S. On a side note your missing a semicolon in your JS...