Databases
StackOverflow2013
Postsdbo
POUsing CSS to make a <li> two rows tall?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing CSS to make a <li> two rows tall?
    primarykey
    data
    text
    <p>I have a set of records that I display with a formview and then page through one at a time. Several of the fields have lengths that vary wildly, and often cause the fields to wrap onto a second row. Currently as you page through the records, the visual appearance of the formview changes based on the length of those fields, and the wrapping causing the page to get taller and shorter in turn. I'm not really a big fan of the page dimensions changing, and so would like to fix that.</p> <p>Here is what I currently have for the css:</p> <pre><code>.CommitmentInfo { margin: 0px; padding: 0px; vertical-align: middle; text-align: left; float:left; list-style:none; } .CommitmentInfo li { width: 300px; } .CommitmentInfo li.b { width: 150px; } </code></pre> <p>Then the code it's being used with:</p> <pre><code>&lt;ol class="CommitmentInfo"&gt; &lt;li&gt;&lt;asp:Label runat="server" Text='&lt;%# "&lt;b&gt;Vendor Name:&lt;/b&gt;" + Eval("ven_name") %&gt;' /&gt;&lt;/li&gt; &lt;li&gt;&lt;asp:Label runat="server" Text='&lt;%# "&lt;b&gt;Stock Item:&lt;/b&gt;" + Eval("cmt_stock_code") %&gt;' /&gt;&lt;/li&gt; &lt;li&gt;&lt;asp:Label runat="server" Text='&lt;%# "&lt;b&gt;Item Description:&lt;/b&gt;" + Eval("inv_description") %&gt;' /&gt;&lt;/li&gt; &lt;/ol&gt; &lt;ol class="CommitmentInfo"&gt; &lt;li&gt;&lt;asp:Label runat="server" Text='&lt;%# "&lt;b&gt;Agent Name:&lt;/b&gt;" + Eval("cmt_agent") %&gt;' /&gt;&lt;/li&gt; &lt;li&gt;&lt;asp:Label runat="server" Text='&lt;%# "&lt;b&gt;Sales Rep:&lt;/b&gt;" + Eval("slm_name") %&gt;' /&gt;&lt;/li&gt; &lt;li&gt;&lt;asp:Label runat="server" Text='&lt;%# "&lt;b&gt;Documentation:&lt;/b&gt;" + GetDocument(Eval("doc_description"), Eval("cmt_document")) %&gt;' /&gt;&lt;/li&gt; &lt;/ol&gt; &lt;ol class="CommitmentInfo"&gt; &lt;li class="b"&gt;&lt;asp:Label runat="server" Text='&lt;%# "&lt;b&gt;Qty Changed:&lt;/b&gt;" + Eval("cmt_changed", "{0:d}") %&gt;' /&gt;&lt;/li&gt; &lt;li class="b"&gt;&lt;asp:Label runat="server" Text='&lt;%# "&lt;b&gt;Last Update:&lt;/b&gt;" + Eval("cmt_added", "{0:d}") %&gt;' /&gt;&lt;/li&gt; &lt;/ol&gt; </code></pre> <p>There are three columns from three lists. The elements that need to be double-row are the first and third of the first column, and the third of the second column. I'm thinking the solution would be to apply a new class to those particular list elements, but I haven't been able to find anything for making list elements a fixed number of rows. Suggestions?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USBen
    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
    1. VO
      singulars
      1. POUsing CSS to make a <li> two rows tall?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POUsing CSS to make a <li> two rows tall?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POUsing CSS to make a <li> two rows tall?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI don't know what your page looks like, but try (1) don't use fixed width (at least not in pixels) and (2) try changing ``line-height`` of the particular elements?
      singulars
      1. POUsing CSS to make a <li> two rows tall?
      1. USErica Xu
    2. COTheorizing here: There isn't per-say a way to set a number of rows on an LI like you could set a number of columns in a table cell with colspan for example. But, to fashion something ourselves. If you give the LI's a height of 2em, that would be the height of two lines of text dependent on the pixel size of your text. so 2em of a font that is 12px would be 24px. This doesn't account for line height, but you could calculate that in and come up with a number of roughly 2.5em?
      singulars
      1. POUsing CSS to make a <li> two rows tall?
      1. USMichael
    3. COI would recommend looking at something like `height: 2em;`. This will set the height to 2 lines high
      singulars
      1. POUsing CSS to make a <li> two rows tall?
      1. USJacob Tomlinson
 

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