Conf5 - Content by Label macro - IE9 scrolling issue

[Iakov Dlikman]

Hello all,

when we create a list of pages with a certain label using the Content by Label Macro Confluence renders it with little scroll bars, which can distract the user (please see the green arrow).

Have you faced similar behavior and can recommend how to avoid it?

Many Thanks

Iakov

[Aleš Laňar · Accepted solution]

Hi lakov,

Try to fix it via stylesheets.

In admin console locate Look&Feel and there Stylesheet.

Next add class for this elements to hide scrollbars.

I guess it could be somethink like that:

.content-by-label{
 overflow:hidden !important;
}

Maybe you have to set it for overflow-y.

This will work in IE 9+.

I hope it will help you

[Iakov Dlikman]

Hi Ales,

thanks for your quick response.

Yes, the name of the class is '.content-by-label'. Can You explain to me what the property 'overflow' does?

Where would You recommend to read up on CSS properties?

I've tried your code and the following code so far:

.content-by-label{
 overflow-y: hidden !important;
}

Kind Regards

Iakov

[Aleš Laňar]

So it is ok? :) I hope that yes.

There are a lot of CSS, but for me is best this:

• Using Google Chrome for Developer Tools (others browser have i too, but Chrome is Chrome :) ). Here you can visit any element of page and find it in source code and on roght side are all styles which are used for selected element
• For all infos about CSS is best W3C School (www consorcium), on their site you can looking for all properties with examples. http://www.w3schools.com/cssref/default.asp

About overflow: By this you can said that how to show elements which are bigger than their containers. So when you have a div element with fix size and inner element what is bigger that parent div, then you can set overflow (set scrollbars mainly). I hope that you understand me :) But you can look for it on their site.

[Iakov Dlikman]

Hello Ales,

thank you for your answer and the links.

The code I'm using now looks like this:

.content-by-label > li {
 overflow: hidden;
}

It works perfectly in my personal space but doesn't seem to work in other spaces. Any idea?

/Iakov

[Aleš Laňar]

So then try to use developer tools in Chrome. Then you can see on right side of panel used CSS styles and there you can find that if it this applied or not.

If you using it in global stylesheet, keep using !important! :) Description of !important.

[Iakov Dlikman]

Hi Ales,

obviously this is the right track. Many thanks for your help.

If I find out what's exactly the trick I'll post it here.

KR

Iakov

[Aleš Laňar]

I am glad to help you :)

Have a nice day!

Ales