Lists names are broken with visible scrollbar

Question

I've some troubles with this dropdown. http://jsfiddle.net/vnr0rbuu/2/

If you use your trackpad or apple mouse, you have invisible scrollbar by default, and it works for it! But if you use another mouse or a PC for example, you have every scrollbars visible and here my li doesn't apply correctly my inline-block's style.

Any idea ?

My HTML :

    <ul class="app-dropdown">
        <li class="app">
            <ul class="app-list">
                <li class="app-name">
                    <p>Android Application With a real long name</p>
                </li>
                <li class="app-icon">
                    <img src=""/>
                </li>
            </ul>
        </li>
        <li class="app">
            <ul class="app-list">
                <li class="app-name">
                    <p>Fucking shit</p>
                </li>
                <li class="app-icon">
                    <img src=""/>
                </li>
            </ul>
        </li>
    </ul>

And my CSS :


    .app-dropdown {
        display: block;
        position: absolute;
        min-width: 160px;
        max-width: 300px;
        max-height: 350px;
        margin: 15px;
    }

        .app {
            display: block;
            padding: 15px 25px;
            border-bottom: 1px solid #F4F4F4;    
            vertical-align: middle;
            text-align: right;

        }

            .app-list {
                display: inline-block;
            }
            .app-name {
                padding-right: 5px;
                display: inline-block;
                vertical-align: middle;
            }
                .app-name p { /* Truncate long name */
                    max-width: 150px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            .app-icon {
                display: inline-block;
            }
                .app-icon img {
                    border-radius: 3px;
                    display: inline-block;
                    vertical-align: middle;
                }

The scrollbar here is being drawn by the native system. On OS X 10.7-10.9 the scrollbars auto hide by default. On OS X 10.10 they are always the visible and the same on Windows platforms. What do you mean by “your inline-block style”? What are the list items supposed to look like? — Zaqx
@Zaqx I mean every app name need to inline with the picture. But when scrollbar are always visible, long name are broken. It needs to be like that : cl.ly/image/1z2X0S1J0L1V And with scrollbar, I've that : cl.ly/image/260G3m0P0q0W — AntoinePlu
Increase the min-width on your .app-dropdown in your CSS? Example — Malcolm
You're right @Malcolm but if my app name are shorter, my dropdown is too large : cl.ly/image/232W2Z3o2V1x — AntoinePlu

Zaqx Zaqx · Accepted Answer · 2014-08-22T18:13:15

Ok. Real quick, I wish I had more time to explain this to you. It’s important that you be mindful of how you use HTML. It’s a markup language. If the internet is a collection of information, HTML is a standardized way of categorizing what text is what kind of information. Use it properly. A list inside of a list for a UI that is just a single list does not make sense. Below is some more appropriate markup.

HTML

<ul class="app-dropdown">
  <li>
      <label>Android Application With a real long name</label>
      <img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
  </li>
  <li>
      <label>Fucking shit</label>
      <img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
  </li>
  <li>
      <label>Short Name</label>
      <img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
  </li>
  <li>
      <label>Short Name</label>
      <img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
  </li>
  <li>
      <label>Short Name</label>
      <img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
  </li>
  <li>
      <label>Short Name</label>
      <img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
  </li>
  <li>
      <label>Short Name</label>
      <img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
  </li>
  <li>
      <label>Short Name</label>
      <img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
  </li>
  <li>
      <label>Very long long long app name</label>
      <img src="http://cl.ly/image/3I2I2a0i3Z2g/overview-3.png"/>
  </li>
</ul>

Your CSS for this is below. I’ve added some comments inline but please Google everything I’m doing. Do a search for MDN <CSS property> || <HTML property> to see very good documentation on HTML/CSS/JS code (e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/calc).

Additionally you can use caniuse.com to check platform support for new things (e.g. http://caniuse.com/#search=calc).

CSS

* { margin:0; padding:0 }

body {
  font-family: "Open Sans", sans-serif;
}

ul {
  /* this should only ever be applied to ul elements */
  list-style: none;
}

.app-dropdown {
    min-width: 160px;
    max-width: 300px;
    /* your height presumably will not change so
       you are only adding complexity by giving it
       a min-max. */
    height: 350px;

    margin: 15px;

    border: 1px solid #d7d7d7;
    border-radius: 4px;
    box-shadow: 0 6px 10px rgba(0,0,0,.125);

    overflow: hidden;
    overflow-y: scroll;
}

.app-dropdown li {
  /* display:block prevents list items from flowing
     horizontally with the .app-dropdown is very wide
     or list items very narrow */  
    display: block;    
    white-space: nowrap; /* look this up on mdn */
    padding: 15px 25px;
    /* google box-sizing. it’s needed for the label
       width calculation below. */  
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    text-align: right;
    width: 100%;
}

.app-dropdown label {
    padding-right: 5px;
    display: inline-block;
    vertical-align: middle;

    /* Truncate long name */
    /* width == available space minus width of image */
    width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-dropdown img {
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
}

Finally use a demo platform that auto updates as you type. Jsbin, CodePen, Dabblet are all better than JsFiddle, but there are many many more.

Demo: http://jsbin.com/luviya/2/edit

Lists names are broken with visible scrollbar

1 Answers