Ruud van Dijk Ruud van Dijk - 5 months ago 8
jQuery Question

No margin on elements next to each other on multiple lines

I have a colorpicker with a right margin of 6px.

Colorpicker

I want the white square (with the black check marker) to have no right margin so that it won't wrap to the next line. Because I want to use the complete width .

I don't want to use a class with margin on 0 because when I choose one of the colors the 8th element could be the black square.

And also on smaller devices the wrap can be at the 3th element instead of the 8th element.

So I'm looking for an automatic detection method.

I would prefer a CSS solution but Javascript/jQuery is also good.

The elements are list-items with a float left



ul.colors li, ul.colors li.chosen {
margin: 0 !important;
padding: 3px 6px 3px 0 !important;
}
ul.colors li .colorbox {
height: 18px;
width: 18px;
border: 1px solid #dbdbd1;
}

ul.colors, ul.colors li {
float: left;
list-style: none
}

ul.colors { width: 180px; background: #ccc; padding: 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="ajax-layered"><ul class="colors show-count"><li class="chosen filter-selected"><a href="#" data-filter="/?filter_kleur-filter=736" data-count="34" data-link="/?filter_kleur-filter=736"><div class="colorbox f_blauw" style="background:#0000ff;" alt="Blauw" title="Blauw"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,729" data-count="12" data-link="/?filter_kleur-filter=726,736,729"><div class="colorbox f_geel" style="background:#ffff00;" alt="Geel" title="Geel"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,752" data-count="6" data-link="/?filter_kleur-filter=726,736,752"><div class="colorbox f_grijs" style="background:#808080;" alt="Grijs" title="Grijs"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,730" data-count="19" data-link="/?filter_kleur-filter=726,736,730"><div class="colorbox f_groen" style="background:#008000;" alt="Groen" title="Groen"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,734" data-count="6" data-link="/?filter_kleur-filter=726,736,734"><div class="colorbox f_oranje" style="background:#ffa600;" alt="Oranje" title="Oranje"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,735" data-count="24" data-link="/?filter_kleur-filter=726,736,735"><div class="colorbox f_rood" style="background:#ff0000;" alt="Rood" title="Rood"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,823" data-count="2" data-link="/?filter_kleur-filter=726,736,823"><div class="colorbox f_roze" style="background:#ff69b4;" alt="Roze" title="Roze"></div></a></li><li class="chosen filter-selected"><a href="#" data-filter="/?filter_kleur-filter=726" data-count="34" data-link="/?filter_kleur-filter=726"><div class="colorbox f_wit" style="background:#ffffff;" alt="Wit" title="Wit"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,738" data-count="21" data-link="/?filter_kleur-filter=726,736,738"><div class="colorbox f_zwart" style="background:#000000;" alt="Zwart" title="Zwart"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,831" data-count="3" data-link="/?filter_kleur-filter=726,736,831"><div class="colorbox f_transparant" style="background:#efefff;" alt="Transparant" title="Transparant"></div></a></li></ul></div>




Answer

There's a great solution for things like this. No need for javascript and it works no matter how many rows of icons you get.

ul.colors li, ul.colors li.chosen {
    margin: 0 !important;
    padding: 3px 6px 3px 0 !important;
}
ul.colors li .colorbox {
    height: 18px;
    width: 18px;
    border: 1px solid #dbdbd1;
}

ul.colors, ul.colors li {
    float: left;
    list-style: none
}

ul.colors { width: 182px; background: #ccc; padding: 0; margin: 0; }
div.ajax-layered { width: 176px; overflow: hidden; background: #ccc; padding: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="ajax-layered"><ul class="colors show-count"><li class="chosen filter-selected"><a href="#" data-filter="/?filter_kleur-filter=736" data-count="34" data-link="/?filter_kleur-filter=736"><div class="colorbox f_blauw" style="background:#0000ff;" alt="Blauw" title="Blauw"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,729" data-count="12" data-link="/?filter_kleur-filter=726,736,729"><div class="colorbox f_geel" style="background:#ffff00;" alt="Geel" title="Geel"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,752" data-count="6" data-link="/?filter_kleur-filter=726,736,752"><div class="colorbox f_grijs" style="background:#808080;" alt="Grijs" title="Grijs"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,730" data-count="19" data-link="/?filter_kleur-filter=726,736,730"><div class="colorbox f_groen" style="background:#008000;" alt="Groen" title="Groen"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,734" data-count="6" data-link="/?filter_kleur-filter=726,736,734"><div class="colorbox f_oranje" style="background:#ffa600;" alt="Oranje" title="Oranje"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,735" data-count="24" data-link="/?filter_kleur-filter=726,736,735"><div class="colorbox f_rood" style="background:#ff0000;" alt="Rood" title="Rood"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,823" data-count="2" data-link="/?filter_kleur-filter=726,736,823"><div class="colorbox f_roze" style="background:#ff69b4;" alt="Roze" title="Roze"></div></a></li><li class="chosen filter-selected"><a href="#" data-filter="/?filter_kleur-filter=726" data-count="34" data-link="/?filter_kleur-filter=726"><div class="colorbox f_wit" style="background:#ffffff;" alt="Wit" title="Wit"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,738" data-count="21" data-link="/?filter_kleur-filter=726,736,738"><div class="colorbox f_zwart" style="background:#000000;" alt="Zwart" title="Zwart"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,831" data-count="3" data-link="/?filter_kleur-filter=726,736,831"><div class="colorbox f_transparant" style="background:#efefff;" alt="Transparant" title="Transparant"></div></a></li></ul></div>

What you do is that you make room for the margin on the right by making the inner container (in this case the ul) 6px larger than the outer container. If required, this could also make use of percentages. In that case you can either set everything in percentages, or use calc() to calculate the required width. ( calc(100%+6px) )

EDIT: Used your provided script and edited it accordingly. If you downvote, could you provide a comment as to why, and how the answer can be made better? Thank you.