How to style atom-select-list properly?


#1

In one of my packages, I’m using atom-select-list to create a list of items. For improved visual grepping I add icons and badges. Here’s the problem: the items are aligned differently across themes. Is it up to me to add custom styles or is there something wrong with my markup?

First attempt


HTML

<li>
  <div class="icon icon-database"></div>
  auto-update-plus.lastUpdateTime
  <div class="pull-right">
    <span class="badge badge-info">13 chars</span>
  </div>
</li>

One Light :+1:t3:

one-light-old

Atom Light :-1:t3:

atom-light-old

Material :-1:t3:

material-old

Second attempt


HTML

<li class="inline-block">
    <div class="icon icon-database">
        auto-update-plus.lastUpdateTime
        <div class="pull-right"><span class="badge badge-info">13 chars</span></div
    </div>
</li>

One Light :-1:t3:

one-light-new

Atom Light :+1:t3:

atom-light-new

Material :+1:t3:

material-new

I can’t say whether that suggests the second attempt is the right one and one-light-ui is buggy. Which would be sad, since it’s my default theme :smile:


#2

You could add a span or div around just the list item name. That would unify the behaviors across the different themes.

<li class="inline-block">
    <div class="icon icon-database">
        auto-update-plus.lastUpdateTime
    </div>
    <div class="pull-right"><span class="badge badge-info">13 chars</span></div>
</li>

#3

Unfortunately, this has the same outcome as my first attempt


#4

If you share the code, I’d be down for giving it a look and seeing if I can fix it.

Edit: That may have to happen later tonight, though. I’ve got to go to work soon.


#5

Thanks, I appreciate it. This is the file where it all happens


#6

There are two ways to fix it. The CSS way is by overriding the width (which is shrink-to-fit by default) on the div containing all the text, allowing the .pull-right element the space to do what it wants to do:

.local-storage-view .list-group .icon {
  width: 100%;
}

Or you can change line 33 of local-storage-view.coffee to place the badge outside of div.icon. Aesthetically, this feels like the better solution (one element per discrete piece of information).

html = "<div class=\"icon icon-#{item.icon}\">#{item.name}</div>#{badge}"

#7

I guess it’s gonna be custom CSS As before, the HTML either works in the One themes only or in the rest (which I’d see as an indicator that the One themes are buggy). Thanks for giving it a shot!


#8

(Just as a follow-up if anybody will every run into the same problem)

I have found the answer after looking at the styleguide. The text and the the badge need to switch positions in the markup. The result works in all themes I have tested.

<li class="inline-block">
    <div class="pull-right">
        <span class="badge badge-info">61 chars</span>
    </div>
    <div class="icon icon-browser">defaultWindowDimensions</div>
</li>