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.
João Nobre wrote:
Tried in Chrome and Microsoft Edge and in BOTH the issue is present.
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).
So, any suggestions on a solution? Or do you think the basic workaround I used is OK?
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; }
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
overflow-x: hidden
.Content.ThemeGrid_Wrapper
overflow-y: visible
overflow-y
auto
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.
overflow-x: visible
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; }