Feature request: ability to append extra css to the ejss.css file
Cleon Teunissen
29 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
