4

Example image:

enter image description here

And the code at JSBIN.

The situation is that I'm trying to create a list of checkboxes with labels with an 'info icon' next to each one.

The idea is that if you click the label, it will trigger the checkbox (as it should) and then we fire off some actions with JS.

The info icon is a tool tip that you'd click on to get more info. Because the info icon has it's own interaction, we can't stick it inline inside of the label, as the label fires off the checkbox interaction.

So what I'm trying to do is get the info icon as close to the label text as I can. I've done this by floating all the labels left so that they collapse to as small as they need to be. I then give the labels a max-width so as to not push the info icon down to the next line.

The problem: Notice that if the label doesn't wrap (first one) the label collapses to only be as wide as the text (green border). However, once the label has to wrap (every other example) the label takes on the max-width size. This looks funny if you take away the green border as the info icons now seem to visually float an arbitrary and seemingly random distance away from the text.

The question: Is there a way to make a floated object collapse to only as wide as the text when the text wraps, or is this just how it works in CSS?

EDIT:

To clarify, I'd like the above sample image/code end up producing something that looks like this:

enter image description here

Notice that all of the labels (green borders) collapse to only be as wide as the text--even on the ones where the text wraps.

EDIT 2:

I think I understand the problem...the problem is that the text is wrapping only BECAUSE there is a max-width. In otherwords, the contents (the text) is much wider than the max-width so it's impossible for the div to collapse down to a specific width if it's not explicitly stated.

As such, I don't think there is a solution to this. CSS just isn't set up to handle this.

DA.
  • 39,848
  • 49
  • 150
  • 213

2 Answers2

3

I would really love to see a pure CSS solution. I've managed to solved this with a script.

try this Workinf Fiddle

HTML (no changes here)

CSS

ul, li
{
  list-style: none;
  margin: 0px;
  padding: 0px;
}

ul
{
  border: 1px solid red;
  width: 200px;
}

li
{
  margin: 10px 0;
}


li *
{
  vertical-align: top;
}

label
{
  border: 1px solid green;
  display: inline-block;
  max-width: 150px;
}

.infoIcon
{
  color: blue;
  display: inline-block;
}

JQuery: taken from this post

$.fn.textWidth = function () {
    var html_org = $(this).html();
    var html_calc = '<span>' + html_org + '</span>';
    $(this).html(html_calc);
    var width = $(this).find('span:first').width();
    $(this).html(html_org);
    return width;
};

$(document).ready(function () {
    $("label").each(function ()
    {
        $(this).width($(this).textWidth() + 2);
    });
});
Community
  • 1
  • 1
avrahamcool
  • 13,888
  • 5
  • 47
  • 58
  • +1 for this interesting solution! That does, indeed, produce the results I'm looking for. I have a feeling this can't be done with CSS alone, either. Scripting this is probably overkill for what we're doing, but it's definitely an interesting solution! – DA. Sep 23 '13 at 22:23
-1

Change your following CSS property:--

label {
float: left;
margin-left: 20px;
max-width: 150px;
min-width: 150px;
border: 1px solid green;
}

See the JSBIN:- http://jsbin.com/ucamOW/9

Let me know Is it same which you want?

N.P. SINGH
  • 303
  • 1
  • 4
  • 15
  • 1
    To clarify, that is the same as my picture above. What I'd like to have happen is the green border collapse to the width of the text--not the width of the max-width. You'll notice it *does* collapse to the width of the text, but only when there is one line of text. If the text wraps, then the width defaults to max-width. – DA. Sep 23 '13 at 19:02
  • Thanks for better explaination, I had updated the code, please take a look on that, Is it same which you want – N.P. SINGH Sep 23 '13 at 19:16
  • No. Your code has them all the same width. I want just the opposite. Each label should only be as wide as the text. – DA. Sep 23 '13 at 19:36
  • Sorry DA, but right now In your provided example I can seen that there is no space between the green border and label text, they are close enough, As you show in your desired output image. – N.P. SINGH Sep 23 '13 at 19:43
  • The first image is the code I have. The second image is how I want it to be. – DA. Sep 23 '13 at 21:04