Skip to Main Content
Forums

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

Editable Interactive Grids (APEX 5.1) width overflowing region

Py.P0Mar 24 2017 — edited Aug 10 2017

Hi everyone,

I'm working in APEX 5.1 with Editable Interactive Grids and I keep encountering a problem that may be CSS-related: every time I create an Editable Interactive Grid, the last column (from left to right) goes outside the grid's region, creating a very ugly effect, as you can see in this screenshot:

overflow.jpg

If I manually resize the width of one or more columns, I'm able to "force" the table to stay inside its region, but the colored columns name row bar is still rendered outside the region border, as you can see here:

overflow2.jpg

If I alter the page's zoom the table is rendered perfecty and it doesn't overflow its bounds (see next image), but after a page refresh the problem reappears, and saving the grid configuration in the primary report doesn't help.

ok.jpg

I created a simple app in my Apex workspace to reproduce the problem, here's the link (no login required): https://apex.oracle.com/pls/apex/f?p=85753:1:8782473367832:::::

Just scroll the horizontal bar to the right and you'll see the overflow effect.

This problem appears even in tables with just 2-3 columns.

This problem happened on Firefox 52.0.1, Chrome 56.0.x, Edge 38.14393.0.0.

The interesting fact is that on Microsoft Explorer 11 the problem doesn't happen, and the table is perfectly rendered.

Thanks in advance for your help,

Filippo

Comments

Mahmoud_Rabie

Hi Flippo

I hope the following answered threads help you

How to control interactive grid columns width?

Interactive grid width - scrollbar

Regards

Mahmoud

Py.P0

Hello Mahmoud,

thank you for your reply!

Unfortunately the solutions you addressed me are not working (or just partially, but thank you anyway for answering):

using the solution of the first thread ( On IG page go to Actions -> Columns -> Minimum Column Width (Pixel) and set small values for all columns present in your grid. Then click Save Button) works only in some cases, and it quickly becomes unpractical as the number of columns get bigger (I have a discrete amount of 30+ columns tables);

using the solution linked in the second thread (Interactive Grid column widths | HardLikeSoftware) helps partially: I'm able to avoid the tables overflowing from the grid region, but the colored row bar is still rendered outside the region (as shown in the second image in the first post).

Regards,

Filippo

-W.

Hello Filippo,

I have noticed the same rendering problem which creates the horizontal scrollbar.

The problem is caused by setting "IG-Attributes: Heading: Fixed to Region".

I opened a SR on Metalink for this issue.

Kind regards,

Tom W.

Py.P0

Hi Tom,

thank you for your info, would you kindly keep me updated about your SR?

Many thanks fro your help,

best regards,

Filippo

tinkerbell

Does anyone has any new info on how to solve this issue?

Py.P0

Hi tinkerbell,

unfortunately I don't have news, at the moment I used Tom's suggestion to change the IG Attribute "heading" value. It helped a lot, but I'm still hoping for a fix/solution

John Snyders-Oracle

This is a known bug. See also this thread Interactive Grid - Universal Theme - Display Issue

Regards,

-John

tinkerbell

Thank you John,

Issue in other thread is simmilar. In meantime, I found this combination to be working fine and removing mentioned problem.

Lazy Loading : Yes

Header > Fixed to: None

Grizzled 
tinkerbell wrote:
Lazy Loading : Yes
Header > Fixed to: None

That didn't work for me but this did: resize every column in the grid by dragging the handle in the column header which removes the overflow and then save the default report.

Anton Gredziuk

Our local workaround was to add an inline CSS at page level that did width = 100% .

#NomRep_ig > div.a-IG-header.js-stickyWidget-toggle {

    width:100% !important;

}

NomRep is the Static ID we added to the report section, in this case.

Just add the _ig to your static ID instead.

Solution was from Quintin Stephenson.

We will revisit it in 5.1.1. and later patches to see when it is no longer needed.

1 person found this helpful
John Snyders-Oracle

For reference the bug number is 25681997.

The CSS workaround given above doesn't work for me when I tried it.

This can be reproduced with the sample IG app page Scroll with Maximize. More noticeable if you change the alignment of last column to end.

I found this workaround. Add to page attribute JavaScript: Execute when Page Loads

setTimeout(function() {

    apex.region("people").widget().interactiveGrid("resize");

}, 250);

Change people to your IG region static id.

Regards,
-John

1 person found this helpful
1 - 11
Locked Post
New comments cannot be posted to this locked post.

Post Details

Locked on Sep 7 2017
Added on Mar 24 2017
#apex-5-1, #apex-discussions, #interactive-grid
11 comments
10,266 views