Hide scrollbar / make scrollbar more inconspicuous in widget with f7-page?

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}
1 Like

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
    }