How can I style horizontal scrollbar by CSS?
::-webkit-scrollbar {
height: 4px; /* height of horizontal scrollbar ← You're missing this */
width: 4px; /* width of vertical scrollbar */
border: 1px solid #d5d5d5;
}
since logically one cannot force a vertical scrollbar to be a certain height (since dictated by the positioned parent) - therefore such height property is to target the horizontal's scrollbar height - and vice-versa (width for the width of the vertical scrollbar.).
Remove horizontal scrollbar on Shiny UI's input
You need to include custom CSS instructions at the head of the UI part.
library(shiny)
ui <- fluidPage(
# Include custom CSS
tags$head(
tags$style(HTML('.shiny-split-layout>div {overflow: hidden;}')),
),
sidebarLayout(
sidebarPanel(
sliderInput("input1", "input1", min = as.Date("2020-02-03"), max = as.Date("2020-12-30"),
value = c(as.Date(Sys.Date()), as.Date("2020-12-30"))),
hr(),
splitLayout(checkboxGroupInput("input2", "input2", choices = c("a", "b")),
verticalLayout(checkboxInput("input3", "input3")))),
mainPanel()))
server <- function(input, output, session) {
}
shinyApp(ui, server)
horizontal scrollbar
change your code into this:
<html>
<body>
<div style ="width: 20px; height:30px; border:1px solid black; overflow-x:scroll">
<!-- various of text here that can makes it go out the border-->
</div>
</body>
</html>
MacOS Chrome horizontal scrollbar not disappearing
This is Chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=914844#c36
Many people are adding white space of scrollbar size (25px) to prevent scrollbar from obscuring content.
It is workaround and can be considered only as a temporary solution though.
How remove the horizontal scroll bar in tailwind css?
I'm currently experimenting as well with the scroll snap feature and tailwindcss in general. I got rid of the scroll bar with adding an additional CSS class as I haven't found yet the corresponding tailwind class.
/* Hide scrollbar for Chrome, Safari and Opera */
.container-snap::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.container-snap {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
So with regard to your code the scroll bar will dissappear when you add the .container-snap class to the ul element:
<div class="relative mt-32">
<h1 class="text-5xl font-extrabold tracking-tight text-center underline capitalize decoration-emerald-400">Get away this winter</h1>
<ul class="container-snap mt-10 pb-8 px-[50vw] w-full flex gap-8 snap-x overflow-x-auto self-center">
<li class="snap-center">
<div class="relative flex-shrink-0 max-w-[95vw] overflow-hidden rounded-3xl">
<img src="https://images.unsplash.com/photo-1542144612-1b3641ec3459?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt="" class="absolute inset-0 object-cover object-bottom w-full h-full " />
<div class="absolute inset-0 w-full h-full bg-gradient-to-br from-black/75"></div>
<div class=" relative h-96 w-[768px] p-12 flex flex-col justify-between items-start">
<div>
<p class="font-medium text-stone-50">Destination</p>
<h2 class="w-2/3 mt-3 text-3xl font-semibold tracking-tight text-white">amit deka</h2>
</div>
<a href="#" class="px-4 py-3 text-sm font-medium bg-white rounded-lg text-slate-900"> browse</a>
</div>
</div>
</li>
<li></li>*4 times
</ul>
How to change the width of horizontal scrollbar track?
Something like this?
.slider {
width: 100%;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
margin-bottom:50px;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.slides::-webkit-scrollbar {
width: 10px;
height: 20px;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
border: 1px solid #ccc;
max-width: 60% !important;
margin-left:25vw;
margin-right:25vw;
}
.slides::-webkit-scrollbar-track-piece {
max-width: 200px;
background-color: #337ab7;
height: 200px;
}
.slides>div {
scroll-snap-align: start;
flex-shrink: 0;
width:70%;
max-width: 70%;
/* height: auto; */
height: 500px;
/* For Temp */
margin-right: 50px;
margin-bottom:50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
<div class="slides">
<div id="slide-1">
1
</div>
<div id="slide-2">
2
</div>
<div id="slide-3">
3
</div>
<div id="slide-4">
4
</div>
<div id="slide-5">
5
</div>
</div>
</div>Related Topics
Vertically Center Constrained Image in Bootstrap Thumbnail
Flying-Saucer/Itext PDF in Servlet Not Finding CSS File
Get a Div to Go Across The Whole Page
How to Make a Div Have a Fixed Size
How to Center an Image in Bootstrap
The Name 'Media' Does Not Exist in The Current Context
Canvas Distorts Drawing. How to Get The Scale Factor Between The Set Size and The Styled Size
What Version of Foundation Is Used in Cakephp3
Styling Web Resources in Dynamics Crm 2016 Supported
How to Make Div Same Height as Parent (Displayed as Table-Cell)
CSS Filter Invert Rule Breaking Fixed Position on Chrome 68
Button Border Radius and Cursor
Div Height:100%; Not Working with Display:Table-Cell;
CSS3 Gradient with Transparency Not Displaying Correctly in Safari
CSS Apply Styling to All Elements Except Those in The Last Row