[Search and Autocomplete] Strange display of the search results having a scroll bar on the right

Hi!

Have you noticed this strange behavior when displaying the search results, as seen in the screen shot? On the right side it appears a scroll bar, but that it does not go to full height of the window.

On this example I am simply using the SilkUI Dublin Template (Version 3.1.7 for P10, 10.0.603.0). See the attached OML.

With the normal combo box of OutSystems this does not happen...

Thanks.

Cheers,

Tiago Bernardo

Hi Tiago,

Mayby its your browser version, I tried your sample (in 3 different browsers: IE, Firefox and Chrome) and had no problems:

Best regards,

João Nobre

Hi Joao,

Can you please tell which browser versions you have used so that he can try it?

Thanks and Regards,

Suraj Borade

Hi João,

In the test OML I had a second home screen, HomeScreen2, where I implemented a work around for this problem. Unfortunately it as an entry point which is set as default...

You should use the "HomeScreen.aspx", that one has the problem.

I have tried it in Chrome and Microsoft Edge and in BOTH the issue is present.

Cheers,

Tiago Bernardo

João Nobre wrote:

Tried in Chrome and Microsoft Edge and in BOTH the issue is present.

Cheers,

Tiago Bernardo

Suraj Borade wrote:

Hi Tiago and Suraj,

You are right, I only checked the default screen (the one with the workaround). Testing the screen without the workaroung I was able to reproduce the error on all the browsers that I tested it (IE, Firefox and Chrome).

Best regards,

João Nobre

Hi!

So, any suggestions on a solution? Or do you think the basic workaround I used is OK?

Cheers,

Tiago Bernardo

Hi,

The solution looks nice, although instead of cloning Layout_Dublin you could set the css on the eSpace (Tests) Layout adding:

.ThemeGrid_Wrapper {
    overflow-x: visible!important;
}

Best regards,

João Nobre

Hello Tiago.

This problem happens because the dublin layout defines an overflow-x: hidden in .Content.ThemeGrid_Wrapper. The problem with this is that you cannot have an overflow-x: hidden together with an overflow-y: visible, so the overflow-y falls back to auto, which adds a scroll. See: https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue/6433475#6433475

Note that this issue would happen with any component that uses an absolute positioned element that is bigger than the .Content container. It does not happen with the select because the select is a replaced element, and is drawn by the operating system.

Your solution, of adding overflow-x: visible is fine, but like João Nobre said, don't clone Dublin just because of that.

Another option would be having something similar to these styles, which would make sure that the autocomplete results fits into the container.

.Content 
  min-height: 400px;
}
.lfs-results-layer {
  max-height: 300px;
  overflow: auto;
}