Databases
StackOverflow2013
Postsdbo
POline-height issue with <li> child elements
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POline-height issue with <li> child elements
    primarykey
    data
    text
    <p>I am having an issue with line-height on a list item.</p> <p>In a nutshell, we have a line-height assigned to the body, which the &lt;li&gt; obviously inherits. </p> <p>If I put a &lt;span&gt; inside the list item and specify a font-size that's smaller than the standard body font, the &lt;li&gt; keeps the line-height for the document, not for what the span actually is using.</p> <p>One thing to consider is that I'm very limited with what I can do with regards to the actual HTML, as this is HTML created by the ckeditor (wysiwyg) editor. If you open that editor, create some list items and then change the font size, this is what you get:</p> <pre><code>&lt;ul&gt; &lt;li&gt;&lt;span style='font-size:8px'&gt;Item 2 -- and some supporting text&lt;/span&gt; &lt;li&gt;&lt;span style='font-size:8px'&gt;Item 2 -- and some supporting text&lt;/span&gt; &lt;li&gt;&lt;span style='font-size:8px'&gt;Item 2 -- and some supporting text&lt;/span&gt; &lt;/ul&gt;​ </code></pre> <p>I can't really change what it outputs, but of course we can try and use CSS rules to control it.</p> <p>I put up a jsfiddle that illustrates the issue: <a href="http://jsfiddle.net/virtualpromote/pW47c/" rel="nofollow">http://jsfiddle.net/virtualpromote/pW47c/</a></p> <p>If you know of a way to make the &lt;li&gt; to base its line-height on the height of the &lt;span&gt; within it, that would be awesome.</p> <p>-- Javascipt is not an option to solve this problem. The HTML that's generated is actually passed onto an app that creates a PDF out of it on the fly, so that of course, can't parse any javascript rules that we could apply after the fact.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJosh
    1. USCoach John
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. CONot 100% sure but try adding display:block to the span elements and see if that helps.d
      singulars
      1. POline-height issue with <li> child elements
      1. USBilly Moat
    2. COADDENDUM: Adding display:block to the span (as suggested) works great in the jsfiddle that I originally setup. However, I forgot to put the list-style-type:disc in there for li like I have in my actual CSS. Putting that in there screws up the li because even though it knows that the span is a tiny font, it still wants to draw a huge dot. http://jsfiddle.net/virtualpromote/pW47c/17/
      singulars
      1. POline-height issue with <li> child elements
      1. USCoach John
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload