Upgrade to Build 3670.4684 causes list title and column spacing issues

[gfspeter]

Good afternoon.

I just installed the Alpha Anywhere 3670.4684 (June 13 2016) patch (updated from 2999.4519 July 28, 2015) on both my development machine and my development server.

I have a single UX component with several active panel cards that uses list controls and JavaScript for all of the functionality. The application has been functioning perfectly for several months using the 2999.4519 build from July of 2015.

Since the update to 3670.4684, all of my list controls are experiencing some strange spacing either in the headings or in the columns. My component uses a local copy of the IOS7 CSS files which I have replaced with the new files from the 3670.4684 update. I have recalculated all of the controls in the component and published it to Live Preview etc.

Heading Issues
The headings example involves a list that I have on a debugging/maintenance panel showing employee information used by the application. The list is 1125px wide. Inspection with the Chrome debugger in working preview shows that the list has been "published" to the working preview server with a container width for the column titles of 2649px, more than double the actual width of the list. This causes the entire row of titles to be skewed to the right, starting at approximately the center of the visible list. In the first screen shot, you can see how the offending element extends well beyond the right edge of the panel card

List Titles Skewed 01.gifList Titles Skewed 02.gif

The same behavior occurs when I use live preview and when I publish the component to my development server and open it with the Chrome browser. A "preview" of the list using the List Control Builder shows the titles centered over the columns as they should be. Since this behavior seems to be computed on the way to the server, there is nothing I can find to turn on or off or modify.

Column Spacing Issues
In the column spacing example below, the titles are manually set using HTML code in the "Fixed header HTML" property. The sub-total lines are manually calculated in the "Group breaks definition" property. Both of these are spaced as they should be and as they were under the 2999.4519 build.

However, the actual positions of the data in the detail rows are all skewed to the right by several px.

Column Positions Skewed 01.gif

No amount of tweaking of the iOS7 List CSS definitions will move the columns back into line with the titles as they were before.

As the component is not that complex, I was expecting a straight forward transition from one V12 build to the most recent one.

Any suggestions would be appreciated.

Thanks in advance,
Peter

[lauraRedway]

Re: Upgrade to Build 3670.4684 causes list title and column spacing issues

Bump

Having this issue myself since that build and it continues to my current one 4095_4816.

Did you find a way to resolve this?

[Steve Workings]

Re: Upgrade to Build 3670.4684 causes list title and column spacing issues

I've been having that problem with the heading for some time - many months. I can't tell you when it began, and I never found the real cause. Further, I figured it was a problem within my CSS somewhere (large, complicated site) so never reported as a "bug".

You can fix the heading, however, with this in the UX onInitializeComplete event. Name your list appropriately, and the width to fit your needs (usually the LIST width).

$ss('{dialog.componentname}.V.R1.LIST1.CONTROL.CHEADER.GROUP', {width: '980px'});

A couple times I found I needed to add it to another event or two to keep it in place.

Not ideal, doesn't address the cause, but does put things back where they belong.

[CharlesParker]

Re: Upgrade to Build 3670.4684 causes list title and column spacing issues

I also had an issue with list controls on updating - what I found was sloppy list layout on my part that Alpha was over looking but now doesn't so for instance if I did this
{field1}
{field2}

It would render each on it's own line, however AFTER updating I had to put

{field1}<br>
{field2}

To get field two moved to the second line.
Now, I do not know if that is the case in your list control layout but you may want to take a look at it specifically to see where everything is falling out and to what length you have it set (flex1???) You may need to specify the list width...

[lauraRedway]

Re: Upgrade to Build 3670.4684 causes list title and column spacing issues

Thanks Steve,

That code worked me.

True that it doesn't address the cause, but because I didn't make any changes to my List designs as well as this affects 1 of 4 lists on the same UX is why I didn't think it was my code issue.

None the less, Thanks again :)

[CharlesParker]

Re: Upgrade to Build 3670.4684 causes list title and column spacing issues

Doesn't adding a specific width to the heading and or column in the list control accomplish the same thing? I am just curious as I have had no such similar issue where I set a specific width and it was ignored.

[lauraRedway]

Re: Upgrade to Build 3670.4684 causes list title and column spacing issues

Hi Charles,

What happens is the values I set in the List builder are overwritten with a new value when it loads into the browser.

Just like what Peter describes in his original post, I set a width for the List but when it is published or previewed in the browser, in my case 1000px is added to the value.
So the specific width of 791px is changed to 1791px in the browser.

Steve's code corrects the issue by changing the width value after the page has loaded.

It is a strange issue honestly, because I have 4 lists on my UX with the same width/height and number of columns, spacing etc. But only one list has this issue.

[CharlesParker]

Re: Upgrade to Build 3670.4684 causes list title and column spacing issues

Ok, that is weird...thanks for clarifying that. Have you sent in a test case to Alpha?

[lauraRedway]

Re: Upgrade to Build 3670.4684 causes list title and column spacing issues

Nah, I haven't yet but as soon as I get a chance I will.

I'll add an update here with what the response is so it can help others :)

[gfspeter]

Re: Upgrade to Build 3670.4684 causes list title and column spacing issues

Laura-Kae: Thanks for picking this up and moving it ahead some. I am still having the problem in 3962_4772 (4.3.1) and other than Steve's code above, I have not found a resolution. Where did you place Steve's code so it will update your list to the correct width?

Steve: Your code

$ss('{dialog.componentname}.V.R1.LIST1.CONTROL.CHEADER.GROUP', {width: '980px'});

works if I run it directly from a button but I cannot get it to work automatically

If I put the code behind a button directly on the panel where the list is, the list updates to the correct layout immediately upon clicking the button.

If I put the code behind a button on another panel to get the list formatted correctly before switching to the panel where the list exists, the list does not format properly on the first pass. If I then switch away from the list panel and then back again, the list headings will be formatted correctly (i.e. some sort of delayed refresh of the list).

Any suggestions?

Peter

[lauraRedway]

Re: Upgrade to Build 3670.4684 causes list title and column spacing issues

Hi Peter,

Yes I experience same, the code only works from button click.

I have 2 panel cards on my UX, with the list being on the second card. When I click the button to switch focus to the second card (with the list) I have to add some code to delay the firing of $ss('{dialog.componentname}.V.R1.LIST1.CONTROL.CHEADER.GROUP', {width: '980px'}); until after the page has completed loading. I find that all other events cause the code to run too quickly which is then overwritten by the incorrect width loaded onto the page.

Here is what I put on my button that switches panelcards:

{dialog.object}.refreshListData('List1');
{dialog.object}.panelSetActive('CARD2');

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

sleep(1);
$ss('{dialog.componentname}.V.R1.LIST1.CONTROL.CHEADER.GROUP', {width: '980px'});

[Steve Workings]

Re: Upgrade to Build 3670.4684 causes list title and column spacing issues

It generally works well for me on the client-side onInitializeComplete. But sometimes with really dynamic pages that's not enough so other events are fair game -- it's not a big resource consumer but you still don't want to just dump it all over the place.

- Steve

[gfspeter]

Re: Upgrade to Build 3670.4684 causes list title and column spacing issues

Thanks for all the input and code samples. I had a few minutes this morning to try implementing your code Laura-Kae. I'm afraid that no matter where I put it or how long a sleep time I applied, the list controls in question refused to abide by the width reset.

However, I also noticed that even though I had indicated that the overall label for the list should be above the list and left-aligned, the label was also being centered incorrectly.

So I applied a "Style" property of text-align: left; in the Field Label section on the list control page and an "in-line style" of text-align: left; on the list properties page and magically the list label and all of the columns and column headings aligned themselves as they should.

I'm not sure where Alpha was getting the crazy container width for the column titles of 2649px in my original post, but these two settings have restored the same column title container to the proper width of 1125px as specified. Perhaps leaving them blank in the latest versions somehow causes some inheritance issues.

At this point, the issue has been resolved and again, thanks for all of your contributions.

Peter