Hello,
would like to know if the scroll bar (default on the right side) can be hidden with option in config, style or CSS stylesheet?
The canvas site contains an oh-canvas-item.
The oh-canvas-item contains the widget.
The widget contains an f7-page.
And on this f7-page I would like to hide the scroll bar.
I dont really know where to declare the hide option and which option.
Picture below.
Regards,
Daniel.
The css style you want to change is overflow:
Most likely you want to change this for the root component of the widget, but without seeing all the code this is just a guess.
Hello @JustinG
the widget is almost identical to vertical/vertiCal_Openhab at main · medomatto/vertical · GitHub
Just added some customizable props for things like text align, text color, font size and weight, more days to display. But the basic structure is identical.
I already tried with navbar element option but worked out, that this is not the right solution I am searching for. Does not have any visual aspect change.
For my canvas page, I posted the extract below:
config:
fixedType: canvas
grid: 10
gridEnable: true
hideNavbar: true
hideSidebarIcon: true
label: overview
layoutType: fixed
scale: false
screenHeight: 1920
screenWidth: 1080
showFullscreenIcon: false
sidebar: true
style:
--f7-block-padding-horizontal: 0px
--f7-navbar-height: 0
blocks: []
masonry: null
grid: []
canvas:
- component: oh-canvas-layer
config:
preload: true
slots:
default:
- component: oh-canvas-item
config:
h: 160
w: 260
x: 20
y: 20
slots:
default:
- component: oh-clock-card
config:
dateFontSize: 42px
dateFormat: DD.MM.YYYY
datePos: below
showDate: true
timeFontSize: 66px
timeFontWeight: bold
timeFormat: HH:mm:ss
- component: oh-canvas-item
config:
h: 180
w: 770
x: 300
y: 20
slots:
default:
- component: widget:Timeline-multiple-4person-Test
config:
fontColorHeadlinePerson1: lightblue
fontColorHeadlinePerson2: lightblue
fontColorHeadlinePerson3: pink
fontColorHeadlinePerson4: pink
fontColorTimePerson1: lightblue
fontColorTimePerson2: lightblue
fontColorTimePerson3: pink
fontColorTimePerson4: pink
fontSizeEventLabel: 16px
fontSizeHeadline: 24px
fontSizeTime: 17px
fontWeightEventLabel: "400"
fontWeightHeadline: "200"
fontWeightTime: "600"
person1: Daniel
person2: DanielSport
person3: Anika
person4: AnikaSport
textAlign: left
OK, that’s a little different. The widget you’ve got has an f7-page as the root component, but the f7 library will automatically add an additional element between that and the children components with a special class page-content. It’s that element where the scroll bar is added so you have to disable overflow scrolling on that element. The easiest way to do that is to add an additional directive to the stylesheet property that’s already defined for the f7-page of the widget:
component: f7-page
config:
style:
--f7-card-bg-color: transparent
noBorder: true
noShadow: true
stylesheet: >
.timeline-item-content {
flex: 1 1 10%;
}
.page-content {
overflow: hidden;
}
A word of caution: the scroll bar is only there because some content is, in fact, spilling beyond the bottom of the space. If you just disable the scroll bar instead of working out why the content is that long, you run the risk of losing information or functionality when something you want winds up hidden.
You are right.
So a slim and inconspicuous would be the better way than completely hidden I guess.
Like this one here.
/* Customize website's scrollbar like Mac OS
Not supports in Firefox and IE */
/* total width */
.scrollbar::-webkit-scrollbar {
background-color:#fff;
width:16px
}
/* background of the scrollbar except button or resizer */
.scrollbar::-webkit-scrollbar-track {
background-color:#fff
}
.scrollbar::-webkit-scrollbar-track:hover {
background-color:#f4f4f4
}
/* scrollbar itself */
.scrollbar::-webkit-scrollbar-thumb {
background-color:#babac0;
border-radius:16px;
border:5px solid #fff
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background-color:#a0a0a5;
border:4px solid #f4f4f4
}
/* set button(top and bottom of the scrollbar) */
.scrollbar::-webkit-scrollbar-button {display:none}
/* div box */
body{background-color:#babac0}
.scrollbar {
height: 75vh;
width: 25vw;
min-width: 150px;
background: #fff;
overflow-y: scroll}
.overflow{min-height: 100vh}
Guess so?
component: f7-page
config:
style:
--f7-card-bg-color: transparent
noBorder: true
noShadow: true
stylesheet: >
/* Customize website's scrollbar like Mac OS
Not supports in Firefox and IE */
/* total width */
.scrollbar::-webkit-scrollbar {
background-color:#fff;
width:16px
}
/* background of the scrollbar except button or resizer */
.scrollbar::-webkit-scrollbar-track {
background-color:#fff
}
.scrollbar::-webkit-scrollbar-track:hover {
background-color:#f4f4f4
}
/* scrollbar itself */
.scrollbar::-webkit-scrollbar-thumb {
background-color:#babac0;
border-radius:16px;
border:5px solid #fff
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background-color:#a0a0a5;
border:4px solid #f4f4f4
}
/* set button(top and bottom of the scrollbar) */
.scrollbar::-webkit-scrollbar-button {display:none}
/* div box */
body{background-color:#babac0}
.scrollbar {
height: 75vh;
width: 25vw;
min-width: 150px;
background: #fff;
overflow-y: scroll}
.overflow{min-height: 100vh}
Tried this in the widget, but unfortunately I dont get this new custom scrollbar visible.
component: f7-page
config:
style:
--f7-card-bg-color: transparent
noBorder: true
noShadow: true
stylesheet: >
.timeline-item-content {
flex: 1 1 10%;
}
/* total width */
.scrollbar::-webkit-scrollbar {
background-color:#fff;
width:16px
}
/* background of the scrollbar except button or resizer */
.scrollbar::-webkit-scrollbar-track {
background-color:#fff
}
.scrollbar::-webkit-scrollbar-track:hover {
background-color:#f4f4f4
}
/* scrollbar itself */
.scrollbar::-webkit-scrollbar-thumb {
background-color:#babac0;
border-radius:16px;
border:5px solid #fff
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background-color:#a0a0a5;
border:4px solid #f4f4f4
}
/* set button(top and bottom of the scrollbar) */
.scrollbar::-webkit-scrollbar-button {display:none}
/* div box */
body{background-color:#babac0}
.scrollbar {
height: 75vh;
width: 25vw;
min-width: 150px;
background: #fff;
overflow-y: scroll}
.overflow{min-height: 100vh}
I don’t believe that anything has a class of scrollbar so you are not applying these directives to any element on the page. The element with the page-content class is the one that gets the scrollbar when your content gets too long, so that is the element you want to target with your css selector.
Yes, indeed. What a foolish try…
Thank you very much @JustinG
This below is excellent for me.
component: f7-page
config:
style:
--f7-card-bg-color: transparent
noBorder: true
noShadow: true
stylesheet: >
.timeline-item-content {
flex: 1 1 10%;
}
.page-content::-webkit-scrollbar {
background-color:transparent;
width:16px
}
.page-content::-webkit-scrollbar-track {
background-color:transparent
}
.page-content::-webkit-scrollbar-track:hover {
background-color:transparent
}
.page-content::-webkit-scrollbar-thumb {
background-clip: content-box;
background-color:#babac0;
border-radius:16px;
border:5px solid transparent
}
.page-content::-webkit-scrollbar-thumb:hover {
background-clip: content-box;
background-color:#a0a0a5;
border:4px solid transparent
}
.page-content::-webkit-scrollbar-button {
display:none}
body {
background-color:#000
}
.page-content {
overflow-y: scroll
}
.overflow {
min-height: 100vh
}