Poll options

[tropicsbear]

In relation to this entry on aligning the text for bullet points, would it be possible to do the same thing for poll options?

Comments

[carene_waterman]

Found a way to do this, but I've only tested it on a radio button poll.

.poll-response {
  margin-left: 80px!important;
  }
.poll-response input {
  margin-left: -20px;
  }

Okay, that's more usage of px than I've ever written in my life!

The div.poll-response has margins set on it inline, in pixels, which is something Dreamwidth has chosen to do on quite a few elements of the site. To give it a wider left margin, I've had to use !important, which makes me as sad as the pixels.

So, I'm giving the div a bigger left margin, effectively moving it to the right, and then sliding the input element (the radio button) over to the left with a tricky negative margin. This moves the radio button outside the parent element's content area and mimics the effects of the list-style: outside that was used to fix up the other problem.

But!!!

This might get all balled up in different styles with different font sizes. It works for me, but might not for you, so some tweaking of the numbers and changing them to ems might be in order.

[style_test]

I haven't played with the CSS for this yet myself but it's a fascinating question. I tried your code on my DW's last poll (username marahmarie - I had to log in as this account to see the result) and since it has no radio buttons, just checkboxes, it didn't go too well. The text left-aligned to the edge of the page and the code had the effect of wrapping each question under the checkboxes, as well as the poll response text itself. The only difference seemed to be more white space (*see note below) - heck, I should just screen cap it...so, it came out like this (pic #1) http://i.imgur.com/KxrManA.png and this (pic #2) http://i.imgur.com/RSDTyKG.png

When I get more time (maybe tomorrow) I'd love to look at this more. I'm thinking inline-blocking might give some more options, and that pixels definitely need to change to fluid measurements so the code can adapt to pretty much any journal style...


*actually, no. That was a momentary illusion; whitespace seems about the same, on a second look. Things are just wrapping wrong.

[carene_waterman]

I tried you journal with that ceckbox poll. Worked fine in site scheme.

Your style has some changes to the poll div margins, so in your style the wrapping worked as intended, but the margin adjustment is conflicting with how your style overrides the inline styles.

I don't understand what you mean by the wrapping not working, since in your screen caps, I see what I expected to see.

The questions are not left aligned with the checkboxes, perhaps you meant that and not wrapping? You could fix that by shifting them left along with the input element. I like it how it is, though.

You likely could get this effect with inline-block, but in my experience, using inline-block on input elements is a PITA. You would have to fuss about aligning the input elements to get them to line up with the labels and to be spaced correctly.

[marahmarie]

Like I said, I hadn't messed with the CSS for this when I wrote my first reply, and I don't feel too hot today so I haven't messed with it at all. I agree my own CSS could be at fault but I won't know exactly what to change until I get the spoons together to take a look. In the meantime my polls display with the alignment I prefer, so right now they look like this: http://i.imgur.com/eTRjSei.png, as opposed to the indentations after adding your code: http://i.imgur.com/KxrManA.png

I think the OP's question might not be "solvable" in the sense that everyone has different preferences on padding/margins. So when I look into it more I'm thinking of using a more generic set of rules/margins that could be padded out as needed by user preference.

[marahmarie]

OK, putting aside my indentation preferences, which are, by my own account, not worth taking into consideration in order to answer OP's question, your code works great as intended but makes the scale poll's (like where you rate something from 1-10 for the poll) radio buttons mash together. I've been trying to unmash them for a few minutes now without any success. Works as you intended on every other poll response, though - radio buttons, checkboxes, dropdowns, textboxes- and I can't find a cleaner, quicker or easier way to do it, either. As usual, mad props. :)

Edit: also, while everyone's mileage may vary, when I took my own poll code out and put yours in I found using 80px left on .poll-response itself was completely unnecessary; the left margin cleared just fine and the negative margin did just what it was supposed to do without it. Again, mileage may vary.