APS Excellence in Physics Education Award
November 2019

Education Prize Logo
Science SPORE Prize
November 2011

NSF Logo
The Open Source Physics Project is supported by NSF DUE-0442581.

Feature request: ability to append extra css to the ejss.css file post and replies

Return to the Feature request: ability to append extra css to the ejss.css file thread
Login to post to this thread

Feature request: ability to append extra css to the ejss.css file - March 15 at 4:37:PM
Cleon Teunissen
27 Posts

The following remarks are about the simulation 'Lagrange point'.

I need to attach multiple files, but as far as I know this discussion platform supports only attaching a single file, so I have gathered the multiple files in a zip file, Lagrange_point_multiple_files.zip
To see the various files I refer to please open the multiple files zip file

(To avert possible confusion: inside the file Lagrange_point_multiple_files.zip there is a file called Lagrange_point.zip)

The Lagrange point simulation that I created requires additional CSS code in order for the User Interface to display correctly.

The image 01_screenshot_firefox.png shows how the simulation displays in Firefox without the additional CSS code.
Four of the seven input fields have a red shadow around them; it's a false positive problem. Suppressing that false positive red shadow requires additional CSS code.

The image 02_screenshot_Chromium.png shows how the simulation displays in Google Chromium without the addtional CSS code.

Both Firefox and Google Chrome have the following behaviour: input fields with the property "type=number" get a socalled 'spinner'; two arrows to adjust the value in the input field. (In Google Chrome the spinner becomes visible 'on hover') Suppresssing the spinners requires additional CSS code.

The zip-file 'Lagrange_point.zip' contains all the simulation files; the .xhtml file and in the subdirectory _ejs_library/css the altered ejss.css file.

I have also included the lagrange_point.ejss file
(A simulation generated from this file will lack the necessary additional CSS code.)

Please note:
The documentation of the User Interface is not on the 'Description' tab, instead the documentation is in plain text. To read the documentation go to the 'Model' tab, then the 'Custom' tab, then the 'Documentation' tab.

About the size of the containers of the checkboxes:  
The containers of the checkboxes have a lot more height than the buttons. That makes the User Interface look clumsy.
The image 04_screenshot_Chromium_developer_tools.png shows how that height difference comes about.

EJSS is programmed to embed checkboxes in the HTML/CSS element fieldset fieldset
The browser rendering engines are programmed to add a lot of padding to that element, in total 16 pixels of padding. This padding cannot be undone; the properties of the element fieldset are *not* accessible.

I have included a .txt file containing the additional CSS code in the multiple files zip

Attached File: lagrange_point_multiple_files.zip

Replies to Feature request: ability to append extra css to the ejss.css file

Re: Feature request: ability to append extra css to the ejss.css file - March 16 5:56:PM
Cleon Teunissen
27 Posts

Erm... it has been pointed out to me that EJsS does have a provision to use a modified .css file. The dialog box for that is the 'Information about' dialog that is accessed from the Description tab. (Screenshot of the 'Information about' dialog box is attached.)

So how come I was unaware of this? Well, I never opened the EJsS 'information about'  dialog box. I don't use auxillary files. None of my EJS simulations make use of external source. It's appealing to me to be able to say to others: grab the .ejs file and open it in EJS: there's the simulation.

Attached File: screenshot_information_about.png

The OSP Network:
Open Source Physics - Tracker - EJS Modeling
Physlet Physics
Physlet Quantum Physics