i’m in studio, designing a form. when i scroll all the way to the top, as you can see in screenshot 1, i cannot see or edit several of the objects, because they are cut off.
screenshot 2 shows you what this form looks like, rendered in preview
i wondered if maybe i had an issue with that particular web form but i see a similar issue, (but in the horizontal plane), with these buttons on the right side, on a different web form
Studio
Preview
Hello Mikey,
The issue you’re facing is most likely due to an incorrect overflow setting on the page.
Try setting it to auto or scroll.
Also, don’t forget to check the Outline section of your page, there, you can quickly locate and access each item you need by simply clicking on it.
overflow is set to auto
btw. the purple dot indicates the property is dirty, right? i just opened the webform in studio, and this is what was displayed. also, the “save all” button is disabled.
yes, you can, but that sort-of defeats the purpose of using a rad tool.
Yes, the purple dot indicates that the property’s value has been modified. You can reset it to restore the default value.
I get your point. The Outline can feel like a workaround in some cases. Still, it’s one of the fastest ways to jump directly to any element, especially in complex pages with many nested items.
Also, since the issue persists, it’s worth checking whether any other container has a hidden overflow applied, as this could be clipping the content.
Additionally, consider setting your page’s width and height to 100% instead of auto, so that the content is distributed across the entire page.
but the “save all” button is disabled, and, because of other issues with qodly, over the weekend, i wiped cookies & cache, and rebooted the server, so, when i loaded the page, this morning, none of those properties were changed.
If the “Save all” button was disabled and you already cleared cookies/cache and restarted the server, then those properties shouldn’t have been marked as changed.
It might be that the purple dot was triggered by a temporary state mismatch or a cached style reference in your page.
causing it to clip in studio (not preview)?
on one of the two forms (the one that, in studio, clips the buttons on the right), all of the other top-level elements on the page have an overflow of “visible”, except for one data table, which is “auto hidden”.
on the page that has the top clipped, all the overflows were “visible”. changing any of them to “auto” made the problem worse.
also, auto dimensions and 100% don’t seem to fix it, either.
Could you please share the name of the page where this clipping issue happens? We’d like to take a closer look and see what might be causing it.
the top cutoff is on “main”. the side cutoff is on “Shipments-CRUD”
Hello back,
For your “main” page:
- Set the your whole page’s justify-content property to flex-start.
This will align the content to the start of the page and fix the issue where part of the beginning is cut off.
For your “Shipments_CRUD” page:
- All parent Styleboxes that contain other content should have their width set to fit-content or to 100%. This allows the container to shrink or expand based on the size of its content, preventing unnecessary empty space or clipping.
- For the very first datatable, remove the
100%width setting. That value forces the table to stretch across the entire width of the container. Instead, leave it at its default width so it automatically adjusts to fit its content.
Hope this resolves the display issue.
the question is, why are we having this issue with studio (designing the form), but things seem to preview properly?
if there was an issue, i would expect it to occur in preview.
that does not fix it. an empty width, fit-content, and 100%all still cause the buttons to appear the same in studio
For the first issue, this is actually a bug. We’ve already reported it, and we’ll let you know once the fix is available. This is why you’re seeing the cut-off behavior in Studio.
For the second issue, it’s due to an incorrect CSS configuration (container sizing and DataTable width).
Did you also remove the 100% width from the DataTable?
The correct configuration would be:
- Set the parent StyleBox to fit-content.
- Remove the
100%width from the DataTable so it can size itself naturally.
Both changes need to be applied together for the layout to adjust properly in Studio.
That’s because the total width of your table’s columns exceeds the table’s overall width.
Also, the last column is set to auto width, which can push the layout beyond the container.
Try removing the auto width setting for that column and let me know if that helps fix the issue.
the width of the datatable is blank.
the last column is variable width because the data is variable width. i want the table to resize with the data.
The width of the datatable is blank, but if the total width of all columns exceeds the available space, the table will still overflow. In your case, having one or more columns set to auto width may be the root cause of this behavior, as it lets them expand beyond the container.
I checked your datatable and noticed that the last column, “Item List,” seems to have its width set to auto. If I’m mistaken, could you please double-check and maybe share a screenshot of the column settings? That’ll help confirm what’s happening.
the problem we are trying to fix is not a problem in preview. it is a problem in studio, just like the other one. in studio, the buttons are squished. in preview, it renders the way i want it to (first screenshot is studio, second is preview). no amount of increasing the work area in studio solves the issue. changing the various properties you have suggested unsquishes the buttons in preview, but all of them have bad impacts in preview.
One quick thing you could try, keep your stylebox that contains the buttons at a width of 15%, but also add a min-width: fit-content. This will ensure the button’s minimum width always matches its content, so it won’t get squished even when the available space is tight in the studio.
Since the Preview area is generally larger than the Studio canvas, it’s expected that elements may render differently, so it’s best to set CSS in a way that works well in both layouts.