Contact us
Jump to content

hide scroll bar of a basic container

Alex Huguet Perez

By Alex Huguet Perez
in WebFOCUS

 Share
Go to solution Solved by David Beagan ,

Recommended Posts

Alex Huguet Perez Rookie

Alex Huguet Perez

Posted
Posted

Hello everyone.
I'm trying to hide the vertical scroll bar that appears in a basic page container. I try to do it by CSS with the following code.

.mainkpi {
  border-radius: 25px;
  align-content: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}
.mainkpi::-webkit-scrollbar {
  display: none;
}
.mainkpi {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

 

Thank you very much for your collaboration.

Link to comment
Share on other sites
  • Solution
David Beagan Community Regular

David Beagan

Posted
  • Solution
Posted (edited)

I tried your CSS in Designer and it worked. I created a fex like this: 

-HTMLFORM BEGIN
<!DOCTYPE html>
<html>
<head>
<style>
.mainkpi {
  border-radius: 25px;
  align-content: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}
</style>
</head>
<body class=mainkpi>
<h1>Semicritics</h1>
<p>3</p>
<h1>Semicritics</h1>
<p>3</p>
<h1>Semicritics</h1>
<p>3</p>
<h1>Semicritics</h1>
<p>3</p>
<h1>Semicritics</h1>
<p>3</p>
<h1>Semicritics</h1>
<p>3</p>
<h1>Semicritics</h1>
<p>3</p>
<h1>Semicritics</h1>
<p>3</p>
<h1>Semicritics</h1>
<p>3</p>
</body>
</html>

In Designer (Assemble Visualizations) it looks like this (no scrollbars even though content extends beyond the height of the container) :

image.png.4a941e5a4e69f2bfc57a1f0fab90c8a3.png

Initially I didn't use the:

 -ms-overflow-style: none;

part of your CSS because it was causing problems. Then I saw it was causing an error because the fex was trying to interpret it as a dialogue manager command.
Then I rearranged the code so that the dash was not the first non-blank character in the line and it was ok.

 

 

Edited by David Beagan
Link to comment
Share on other sites
Alex Huguet Perez Rookie

Alex Huguet Perez

Posted
  • Author
Posted

David.

Indeed, your solution works perfectly. You have added html code in the fex using HTMLFORM BEGIN. I was trying to do it directly in the CSS section of the Assemble Visualizations, where the border-radius: 25px does have an effect, for example, but not the overflow: hidden.
Do you know why adding the CSS in the corresponding section of the Assembre Visualizations doesn't work?

Thanks a lot.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...
© 2024 Cloud Software Group, Inc. All rights reserved.