I've made a custom horizontal scrollbar in elementor with custom css, it works for desktop view but it doesn't work for mobile view, what am I missing? the following is the custom css that I use
.scroller-card {
display: flex;
flex-direction: column;
min-width: 300px;
flex-basis: 300px;
border-radius: var(--whiskey-radius);
margin: 8px;
padding: 16px;
color: var(--whiskey-color);
background-color: var(--whiskey-panel-background);
transition: all 150ms ease-out;
}
.scroller-cards {
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
transform-style: preserve-3d;
perspective: 800px;
padding: 24px 0;
}
*, *:before, *:after {
box-sizing: auto;
}
.scroller-cards::-webkit-scrollbar {
-webkit-appearance: none;
width: 5px;
height: 5px;
}
.scroller-cards::-webkit-scrollbar-thumb {
border-radius: 0;
background-color: #0F2B4A;
background: #0F2B4A;
border-radius: 16px;
opacity: .5;
}
Here are the results
I'm still new to coding so please help
Remove flex-wrap on screen below 1024px.
Reason: On screen below 1024px, cards moved on next line and content width of container is not greater than you container max width. That's why scroll is not applying
Your code doesn't work on both Firefox desktop and Firefox mobile.
You're setting the scrollbar width to zero in this line:
scrollbar-width: none;
Later you're setting the scrollbar width here:
.scroller-cards::-webkit-scrollbar {
-webkit-appearance: none;
width: 5px;
height: 5px;
}
But because FF does not support -webkit-scrollbar your code doesn't work.
See ::-webkit-scrollbar on caniuse.com
Related
To keep the inner of the cards the same length I am using CSS height:100% and display:table. In CHROME and EDGE it works OK. But it does not work in Mozilla Firefox. The inner pulls out of its parent.
More details in this yt video https://youtu.be/6uO-9UNGXFw
Here is my code https://codepen.io/Dvorakova/pen/yLOjqeP
.card>div {
height: 100%;
display: table;
}
Thank you for your help.
Remove the rule of height: 100% from the .card > div
Remove the rule of display: table from the .card > div
Add diplay property of 'flex' or 'grid' to your .card CSS class.
.card > div {
padding: 2rem;
background-color: rgba(255,255,255,.5);
box-shadow: 0 0 2rem rgba(0,0,0,.1);
border-radius: 1.5rem;
text-align: center;
}
.card {
background: #f55053;
background: linear-gradient(45deg,#f55053 0,#f9a18a 100%);
border-radius: .75rem;
padding: .75rem;
transition: all .3s ease;
display: flex;
}
Add this style to card class
.card {
display:grid;
height: auto;
}
And add height:-webkit-fill-available; instead of height:100% from card>div
.card>div {
height:-webkit-fill-available;
}
Codepen Demo
How would you go about creating something like this:
The idea is you've got a horizontal scrollable section, and wanting to show the scrollbar underneath. But, you only want the scrollbar to be the width of the main container, centered to page.
Linked below a jsfiddle of how I've approached it, but no luck with trying to keep the scrollbar only centered. Tried using a max-width, but doesn't seem to have any affect. Any ideas?
.scroll-wrapper {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 24px;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
width: 16px;
}
&::-webkit-scrollbar-track {
background: #eee;
// you'd think max-width or something here would be the solution
}
&::-webkit-scrollbar-thumb {
background-color: red;
border-radius: 20px;
border: 4px solid #eee;
}
}
.scroll-wrapper > *:first-child {
margin-left: 80px;
}
.scroll-item {
flex: 0 0 auto;
margin-right: 16px;
}
https://jsfiddle.net/tzdcay9r/1/
I solved it… can use margins on the scrollbar-track 🤦♂️
https://jsfiddle.net/8snuamhv/1/
&::-webkit-scrollbar-track {
background: #eee;
margin-left: 80px;
margin-right: 80px;
}
Or if you want something a bit more dynamic, for example to match a container size, you can use a calc() function to work out the margin values.
$containerSize: 1120px;
&::-webkit-scrollbar-track {
background: #eee;
border-radius: 20px;
margin-left: calc((100vw - $containerSize) / 2);
margin-right: calc((100vw - $containerSize) / 2);
#media (max-width: $containerSize) {
margin-left: 16px;
margin-right: 16px;
}
}
While implementing a simple toggle control I encountered a problem that only seems to appear in Safari. The same code works fine in Firefox and Chrome.
.mgs.huge {
font-size: 36pt;
}
input.mgs.toggle {
display: none;
}
label.mgs.toggle {
display: flex;
flex-direction: row;
align-items: center;
width: max-content;
position: relative;
--toggle-color: 49, 112, 212;
}
/* The toggle background. */
label.mgs.toggle::before {
display: inline-block;
content: "";
height: 12px;
width: 23px;
border: 1px solid rgba(var(--toggle-color), 1);
background-color: rgba(var(--toggle-color), 0.75);
border-radius: 25pt;
margin-right: 4px;
}
label.mgs.toggle.huge::before {
height: 35px;
width: 69px;
}
/* The circle (handle) in the toggle - unchecked, standard size. */
label.mgs.toggle::after {
flex: 0 0 auto;
align-self: center;
content: "";
position: absolute;
width: 12px;
height: 12px;
left: 1px;
background-color: white;
border-radius: 50%;
transition: left 0.2s;
}
label.mgs.toggle.huge::after {
width: 35px;
height: 35px;
}
input:checked.mgs.toggle.huge + label::after {
left: 35px;
}
<input type="checkbox" class="mgs toggle huge" readonly="" id="toggle6" value="">
<label for="toggle6" class="mgs toggle huge">Huge</label>
In Safari the white knob doesn't align vertically. By specifying a top value you can align it manually (in this case by adding 11px top to label.mgs.toggle.huge::after), but unfortunately this shows another problem: Firefox doesn't use the same vertical offset as Chrome and Safari do: the circle is offset subtly by half a pixel or so.
Hence I would prefer a solution where Safari does the automatic vertical centering, as it is supposed in this flex-box layout.
Here's also a fiddle to play with: https://jsfiddle.net/3Ltkwaux/.
I have a problem with a border in Chrome. The green border has some grey lines.
Firefox: not visible -> ok!
Chrome: not visible but visible in the dev tools, mobile phone.
Chrome on my phone: visible
Here is a screenshot that shows my problems!
https://abload.de/img/cssiee7s.jpg
1) When you go to http://www.seelenpuls.at/hpneu/m_biografie_leander_de.php
there are two small grey lines
2) When you go to http://www.seelenpuls.at/hpneu/m_neues_de.php there are even more problems.
3) The menu button has an orange border (mobile only) ... and I don't know why as there is no such color in my CSS.
Please help!
Here's the code. The bold part is the border that causes the problems.
* { padding: 0; margin: 0; }
body
{
font-family: sans-serif, Verdana, Arial;
color: #000000;
background-color: #556B2F;
}
#center {
position: relative;
width: 350px;
height: 630px;
box-sizing: border-box;
margin: 5px auto 0px auto;
}
#logo {
position: absolute;
width: 350px;
height: 220px;
background-color: #ffffff;
box-sizing: border-box;
background-image: url("img/m_bg_c.jpg");
background-repeat: no-repeat;
background-size: 350px 220px;
}
#navi
{
position: absolute;
top: 175px;
width: 60px;
height: 40px;
font-size: 16px;
color: #000000;
background-color: #ffffff;
margin-left: 10px;
}
#header
{
position: absolute;
top: 187px;
width: 238px;
height: 30px;
font-size: 16px;
color: #000000;
left: 85px;
}
#content
{
position: absolute;
top: 218px;
width: 350px;
box-sizing: border-box;
color: #000000;
background-color: #ffffff;
font-size: 14px;
overflow: auto;
padding-left: 5px;
padding-right: 5px;
**border-bottom: 5px solid #556B2F**;
}
Ok so there is a couple of things that are going on in your css.
White lines
For your content div, I would use a width of 100% for mobile devices now, as you scale to tablets and desktops you can change to a more fixed or fluid width. I would also remove the border bottom property. This is not fully extending to the width of the content box and I am unsure if it has to do with the border-sizing property you are using. I would also apply the border-sizing this way so it is applied to every element in your html
* {
box-sizing: border-box;
}
Orange border - this is caused by the :focus pseudo css property of the button you are using, you can remove it this way
button:focus {
outline: none;
}
CSS Normalize or CSS Reset - consider using one of these stylesheets in your website. They help you rendering all elements more consistently through all browsers. This will save you the time of remove the :focus property, like I mentioned above in any project moving forward. Most popular CSS frameworks utilize this to normalize basic styles.
Link to Normalize.css
I'm writting an opesource filemanager in c++ (with css stylesheet) who can be accessed trough a web browser.
I have a layout problem when long text is beside some icons :
the same image with more colors (for helping to read the stylesheet) :
revelant css code :
.rowLayout{ /* the gray row */
display: table;
background-color: #bbbbbb;
width:100hw;
min-width:100hw;
max-width:100hw;
}
.rowLayout img { /* icon */
display: table-row;
background: #ff0000;
max-width: 50px;
max-height: 50px;
min-width: 50px;
min-height: 50px;
position: absolute;
left: 67%;
-webkit-transform: translateX(67%);
transform: translateX(67%)
}
.img-txt { /* the text beside the icon */
background-color: #ffaaaa;
display: table-row;
text-align: center;
max-width:120px;
word-wrap:break-word;
position:absolute;
vertical-align: top;
}
.contentLayout { /* rows container */
background-color: #ffffff;
display: block;
overflow: hidden;
overflow-y: auto;
border-style: solid;
border-width: 1px;
border-color: #c4c1bd;
width: calc(100% - 30px)
padding: 10px 10px 10px 20px;
min-height: 50px; /* do not touch me */
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* special item, stretch through the code to avoid the icons evenly positioned */
.unusedSpace-box{
width:0;
min-width:0;
max-width:0;
height:0;
min-height:0;
max-height:0;
}
if you check .img-txt you'll see I should have some pink color somewhere. That color disapear when I add to much rows. For example with less rows :
in blue is what I want, the red arrows on the last picture means I want to paste at the top of the div.
Since the code is generated via C++, I don't have html but the one I can see from firefox :
n.b. : the <p></p>are irrevelant, they should not be there it was a try. There or not, that changes nothing.
if anything else would be revelant, just tell.