I am trying to get stylesheets working in the web browser. I have tried fully referencing stylesheets on the web (full url), referencing local stylesheets in the same folder as the database and placing a style tag in the header with the appropriate styling. None of these work for me. I can take the same html and place it in a BBEdit file and preview it as expected. I can reference images in the web browser but I cannot reference stylesheets.
The only way I can style html is to place the styles internal to the html within a tag e.g. style=“color=red;”.
Trival example of style in the header rather than reference to an external style sheet:
Style sheets in external files definitely work. The Panorama Help system references style sheets in separate files. Maybe if you posted the source of how you are including the style sheet someone here could see the problem.
Here is an excerpt from a Panorama help file, which references styles.css and print.css.
The following is strange but true. The web browser is running within a tabbed interface. I have been trying to get tab 1 to work for 2 days to no avail. After posting, I decided to use the other tabs as experiments. I got tab 6 to work with exactly the same html (copy and paste in anticipation of writing variations, but it worked immediately). It references a local css file and formats the web browser window (with a minor glitch due to other external references, but not an issue). I tried copying the code to tabs 2-5 and they work as expected. However, in tab 1 where I had been working, still doesn’t see the css file.
I wonder if the code was fine all along and only the tab is the issue. Sending you a copy of the file.
The tab panel is not the issue. If you open the forms separately, you’ll see that the problem happens in your Preview_Region 1 form whether it is displayed as part of the tab panel or separately.
I think the problem is that you set the Base URL for this web object to http://learn2grow.com, so that’s where it is looking for the CSS file. In the other forms, you left the Base URL empty, so it works (looks for the CSS file in the same folder as the database).
I also notice that your formula specifies a </style> tag with no preceding <style> tag, but that doesn’t appear to be the problem. I’m a bit rusty on this topic but I think you might want to correct that.
I just figured out what this style sheet problem is all about, as well as this related post.
The problem is when using Literal Mode with the Web Browser object. In this mode, Panorama thinks any text inside { and } characters is a Panorama formula. However, this is a problem if you have inline CSS, which also uses { and }, or embedded JavaScript, which also uses curly braces. These features were not working because Panorama was trying to merge in the formulas. Since the text inside the { and } was not a valid formula, it didn’t work.
The best solution is really to switch to formula mode. However, Panorama now checks for errors in merged formulas, and if it finds any, it disables all field and formula merging. In other words, if you have inline CSS or JavaScript that uses curly braces, merging will not work but the CSS/JavaScript will work. (In previous versions it was the opposite – merging would work but the CSS or JavaScript would not work.)
If you need to merge in data AND use inline CSS or JavaScript, use formula mode. I have updated the documentation to discuss this problem and the solution.
By the way, I didn’t set out to fix this old problem tonight. I was trying to use a web page with JavaScript, it wasn’t working, and after some false starts figured out what was going on. I then realized that this was the same problem that had been reported on this old topic (I did test to verify that it was the same problem).
So, if you want to use internal style sheets (or JavaScript) in a web browser object, you can start doing so right away. You don’t have to wait for the next release of Panorama X, just make sure to use Formula mode.