Missing css when deployed

[alasdairs]

Hi all,

I have a server which is set up with my TiNG application, and when it's loaded on certain machines it seems like its missing lines of css. Things like the icons in the sidenav, or random buttons, etc. I'm not really sure how this could be happening.

Here's what the sidenav looks like:

Screenshot 2024-08-28 at 13.59.38.png (36.86 KiB) Viewed 596 times

Does anyone know what could be going wrong? I don't really know how I could go about solving something like this. It's never an issue on my machine, only on others.

Thanks,
Alasdair

[mboegem]

Hi alasdairs,

did you look at the browsers inspector to see if it's reporting any missing sources?
Wild guess is that you do an import of other css files and the path is wrong (might be good on developer, not when deployed)

[alasdairs]

Hi Marc,

The inspectors telling me that a couple of files are missing, wro/toastr.js.map, wro/bootstrap.min.css.map, wro/angular-sanitize.min.js.map. When I go into the deployed solution on my machine the solution works completely fine with no bugs and all the css still intact. This is the same for a couple of other computers, but the machines I need it to work on, it doesn't.

Thanks, Alasdair

[mboegem]

Hi alasdairs,

You can ignore the .map files absence, .map files are used for client side debugging.
I guess the only thing is try to workout where one of the missing icons is pointing to and try to access that manually, or do a close compare between developer and the deployed situation.
The only thing I know is that there are only few occasions where behaviour could not be explained.

[alasdairs]

Hi Marc,

I've sorted out the icons on the sidenav but am still having a bunch of issues with css/html throughout the applications. It seems to be certain components are not rendering the same on different machines. On my machine, a combobox is made up of a div, button and a span, whereas on another machine, it's made up of a div, div, and a span. The combobox itself if the first div, which I've given the styleclass 'base-dashboard-left-combo'. Here's my css:

Code: Select all

.base-dashboard-left-combo .bts-combobox {
   border: none;
   text-align: center;
   background-color: #222222 !important;
   color: #dbdbdb !important;
}


On my machine the button is being changed which seems to be the only way I can edit the css for the combobox, but on other machines, the div does not have the class 'bts-combobox'.

This is the same for a bunch of things like dropdowns, datagrids, tabpanels, etc..
I have just tried importing a fresh WAR file into the server and nothing changed. Im not really sure where to go from here, I'd be very grateful if you have any other ideas for me to try.

Thanks,
Alasdair

[mboegem]

Hi Alasdair,

what version of Servoy are you using?

In case v2024.3 or below: did you develop in NG and deployed TiNG or vice versa?

That would explain differences in DOM structure, directly related CSS you wrote for the version you developed on, can also fail.

[alasdairs]

Hi Marc,

Im working in 2023.12, and the solutionType is NG Client. I'm not sure how to check what version the application is deployed on in the server. The server log has a lot of 'ngclient's in it.

Thanks,
Alasdair

[mboegem]

Hi Alasdair,

when you export .war file from developer, the first checkbox you will encounter reads: Export NG1 Client resources.
In you case this needs to be ticked, otherwise you can only run TiNG once deployed.

When you launch the application in browser, the URL for NG will have 'solutions' in its path, for TiNG this is 'solution'
When inspecting the source, TiNG will have the body-tag and immediately below the app-root with the ng-version number.

Hopefully this gives you pointers to work this out.

[alasdairs]

Hi Marc,

I just realised I was connecting to /solution from my computer and /solutions from everywhere else.

Just checked another computer and everything seems to be working again.

Thank you!
Alasdair