Migration to Titanium and styling

[patrick1645350822]

@Sean and Servoy,
Thanks for the webinar about the migration sessions this week..

As expected and you also explained there were some issue's around styling (just followed your lead) and with SPM (I got a lot of warning and errors about duplicate, just removed them all, also from disk and reinstalled and that dit the job).

The strange thing now is everything looks to work fine if you launch and work with the application:

01.png

But when you do a browser refresh all styling is gone:

02.png

Any thoughts?

Kind regards,
Patrick Marelis

[jcompagner]

that should not happen, can you show this in a sample and make a case?
when you do a browser refresh the less/css should just be pushed again, there shouldn't be any difference

[patrick1645350822]

Hi Johan,

I figured it out. It caused by a pice of the code (from the sample solution). There is an overwrite to custom styles where still the reference was made to the 'old' *.less file instead of the *_ng2.less file.

Code: Select all


function overrideStyleColors(mainColor, secondaryColor) {
   var newColorStyle = {
      'MAIN-COLOR': mainColor,
      'SECONDARY-COLOR': secondaryColor
   }

   // set the preferred colors
   var mediaOriginal = solutionModel.getMedia('SileramTemplateOriginal_ng2.less');
   var cssText = mediaOriginal.getAsString();

   // override css
   cssText = utils.stringReplaceTags(cssText, newColorStyle);
   var media = solutionModel.getMedia('SileramTemplate_ng2.less');
   media.setAsString(cssText);

   application.overrideStyle('SileramSolution_ng2.less', 'SileramTemplate_ng2.less');
}


Kind regards,

Patrick Marelis

[jcompagner]

then the question is more why didn't that show up at first sight....

[patrick1645350822]

That is indeed a good question.

I did some debugging and it does run nicely true the code the first run. But not when I do a page refresh in the browser. So to be honest I have no idea but is fixing the issue.
As I mentioned it is part of your standard example so maybe you can have a go with it yourselves?

[jcompagner]

it is logical that it only runs once.
because this is onsolutionopen and that just registers the override

application.overrideStyle('SileramSolution_ng2.less', 'SileramTemplate_ng2.less');

so every time we want to output 'SileramSolution_ng2.less' we output 'SileramTemplate_ng2.less'

[patrick1645350822]

Hi,

Oké that makes that clear but not your question: more why didn't that show up at first sight....
But no longer a issue for me anymore.

I found two other items in the styling of ag-theme-servoy.
The right columns are not fully revealing

grid.png

The sidenav when collapsing is showing a scroll:

navleft.png

Is this something I should look into or do you pick this up and comes with a new style update?

[jcompagner]

for NGGrid that is not styling that is a layout issue that we don't see

for the Sidenav i dont know also looks more like layout instead of styling

So for both issues we need cases with a sample that demonstrates the issue

[patrick1645350822]

The think I know is when working on the none titanium version it works. What am I missing then.

cols.png

I will try to build a small solutions with these issue's some were this week..

[patrick1645350822]

Just found one more.

In the titanium version the Grid does not scroll from left to right.

[Gabi Boros]

there is an issue related to auto-size-columns-to-fit in the latest released NG Grids (both in ng and ti clients) - that will be fixed in the next release (this week) - it could be that you see the same issue

[patrick1645350822]

Hi all,

What do I know now:
One:
In my code I have a part to suppressColumnFilter. If you use this the columns does not show op anymore.
var toolPanelOptions = plugins.ngDataGrid.createToolPanelConfig();
toolPanelOptions.suppressColumnFilter = true;

Two
If you have 2 menu items in your sidenav with icons then when collapsing the menu the second (and third and and so on) get extra spacing in between them. Easy to reproduce. That causes with me the extra scroll due to the fact that the icons did no longe fit.

Three
Gridscoll / auto resize: I do only have this in titanium. But will check with the new version.

[patrick1645350822]

Hi,

Sorry to inform you but both issue's remain after the grid-update. Still no scroll from left to right in the grids and extra horizontal spacing in collapsed menu:

pre-titanium:

pre-tita.png

Titanium:

tita.png

[jcompagner]

so make a case with a sample

[patrick1645350822]

Here you can see that the height-spacing of the icons in the sidenav is changing when collapsing in tintanium.
The second one is non-titanium

sidnav_spacing.png

Grid example will cost me some more time.