Erik Bleifield
Rank: #692
152Views
4Comments
Solved
React Web: two scrolling issues
Question
OutSystems Widgets

Hi,

I am running into two annoyances in service studio 11.7.2 while developing in reactive web. 

(1) With tables that have many columns, I am unable to scroll to the right to see the right most columns after they start to scroll off of the screen. I often like to drop a button into the right most column, but now that is a little challenging to do...

(2) When creating a complex popup form with a page, I can not scroll to the bottom of it, once it is extended off of the screen. This makes it difficult to tweak anything at the bottom of the popup window.

In either case, I can work with the items in the widget tree, but I can never really see them until I publish. This issue is even made worse when working on a small laptop screen. It would be great if there was a way to zoom in and out of the UI pages from within service studio.

Does anyone have an easy workaround for this?

Thanks,

----Erik Bleifield

0
0
on 2020-04-20
Copy link to comment
J.
mvp_badge
MVP
Rank: #14
Solution

Hi Erik,


I agree there are some issues in React with styling in design time.

In general you can adjust the css in SS with effecting it runtime on the following manner by prefixing the attribute with -servicestudio:

for example, when you have a class which has a fixed position:

.myFixedContainer {
   background-color: #f00;
   position: fixed;
   -servicestudio-position: relative;
}

So, in servicestudio it will be relative and runtime it will be fixed.


It's quite handy, because it works for most attributes like color, display, position etc.

so you can really make acid-green colors within SS to find the important containers faster which are normally hidden for example ;)


so, for the popup-widget you need to add the following in your css

[data-popup-backdrop] {
    -servicestudio-position: relative;
}

This way, the backdrop and popup itself will act relatively in servicestudio.


I am not sure if this will help youi 100%, but you can see/toy with this to get what you want.


Good Luck,

J.

2
0
on 2020-04-23
Copy link to comment
Erik Bleifield
Rank: #692

Thanks so much, J. That css for the popup is solving my challenge perfectly. I will have to play more with the tables. Your response has made my day! Thanks so much!

----Erik

0
0
on 2020-04-23
Copy link to comment
Erik Bleifield
Rank: #692

This CSS is helping me too. The max-height and max-width help to override the popup size defaults. Change them according to your needs.

The popup-disable-scroll override improves the default behavior of forcing the popup to display back at the top of the window and locking out scrolling the window behind it. I find this overflow:visible setting to be much closer to the typical behavior I expect in a popup these days, especially if you are attempting to refresh a table behind the popup as you are appending items from the popup.

SyntaxEditor Code Snippet

.popup-dialog {
    max-width: 80%;
    max-height: 80%;
}

.popup-disable-scroll {
    overflow: visible;
}
0
0
on 2020-05-05
Copy link to comment
Erik Bleifield
Rank: #692

And here is the CSS override to get your react tables to scroll properly in service studio so you can see the right most columns, when they span beyond the expected table width. This was my first annoyance listed above...

html {
    -servicestudio-overflow: visible;
}
0
0
on 2020-05-05
Copy link to comment