4 Replies ・ Started by JBRadio at 2016-04-04 15:49:44 UTC ・ Last reply by Kimtaro Admin at 2016-04-29 18:13:45 UTC

Jisho.org CSS Requests

Hi Jisho.org team!

First of all, thank you for creating a dictionary website we all love to visit often. While using Jisho.org in small widths, I noticed that some of the DOM elements have inline CSS properties that have weird user experience results.

When the browser/device width is below 640px (I personally use 495px and 335px), the "Links" div and "Links" dropdown div take up to 95% of the width screen. This property is hardcoded or inline style that is not relative to the parent (it is absolute). When your mouse is nowhere near the "Links" link, you can open up the dropdown. This doesn't appear to be an issue at full desktop width since the "Links" link is within its own column layout. When the width is smaller, the desktop column layout is changed and elements used are mixed with mobile layout presentation (responsive design).

I would like to ask that the developers at Jisho.org consider looking into removing some of the hard-coded or inline CSS style properties on their DOM elements for CSS class equivalents. This is the example that goes with the above paragraph:

<ul class="f-dropdown" id="links_drop_51859d3fd5dda7295401d71a" data-dropdown-content="data-dropdown-content" style="position: absolute; width: 95%; max-width: none; top: 86px; left: -99999px;" aria-hidden="true">
<li>Sentence search for 脹脛</li>
<li>Sentence search for ふくらはぎ</li>
<li>Sentence search for 脹ら脛</li>
<li>Sentence search for ふくら脛</li>
<li>Sentence search for 膨ら脛</li>
<li>Kanji details for 脹 and 脛</li>
<li>Edit in JMdict</li>

Note how the inline "style" attribute of the UL tag is used and how "position: absolute; width:95%" in particular take up too much room on a max-width display of less than 640px (where column layouts change to mobile layouts).

JBRadio at 2016-04-04 15:50:56 UTC

Testing if tags appear in forum submission.

JBRadio at 2016-04-04 16:19:15 UTC

Submitted an forum post for the issue of <tags> not showing up properly without the explicit use of & lt; and & gt;


JBRadio at 2016-04-04 16:23:39 UTC

An additional thought when reviewing DOM elements for inline style attributes, please note any Javascript code or server-side code that creates or generates HTML elements as they may directly write style attributes <tag style="..."> that will override classes and external CSS files (such as those used in themes and extensions/addons).

Kimtaro Admin at 2016-04-29 18:13:45 UTC

Thanks for the detailed analysis. I think the issue is coming from the layout framework that I use, Zurb Foundation. I need to update it to the latest version, and if the issue still persists I'll dig into it further.

to reply.