37

In the various modal dialog boxes around the site (for flagging, closing, etc.), users are typically presented with several options to chose from using a set of radio buttons.

Problem

The content in the <label> for each option is not styled properly, creating unclickable dead-zones. It is especially annoying in between the action name and description. This can be seen in the screenshot below. Looking at the it is not an answer option, I've placed a yellow background behind the clickable areas to select that radio button.

Unclickable Dead-Zones

The markup for each option looks like this:

<li>
  <label>
    <input type="radio" name="top-form" value="AnswerNotAnAnswer">
    <span class="action-name">    it is not an answer</span>
    <span class="action-desc">This was posted as an answer, but it does not attempt to answer the question. It should possibly be an edit, a comment, another question, or deleted altogether.</span>
  </label>
</li>

Solution

For maximum usability, the clickable area should look like this:

Full Clickable

The <input> element should be moved within the first <span> and some new CSS should be added.

<li>
  <label>
    <span class="action-name"><input type="radio" name="top-form" value="AnswerNotAnAnswer">it is not an answer</span>
    <span class="action-desc">This was posted as an answer, but it does not attempt to answer the question. It should possibly be an edit, a comment, another question, or deleted altogether.</span>
  </label>
</li>

.action-name {
  display: block;
}
.action-name input {
  margin-right: 5px;
}
.action-desc {
  /* margin: 6px 0 10px 18px; remove the margin, replace with padding */
  padding: 6px 0 10px 18px;
}

These changes will keep the same presentation, but allow the entirety of the label to be clicked to select the radio button.

  • Be careful when adjusting the equivalent of this issue in the "It's a duplicate" dialogue. It is already not completely clear where you click on a possible duplicate to select it and where it just opens the question in a new tab. – Mark Hurd Mar 31 '14 at 2:13
  • 1
    I'm taking a look at this now. Thanks @MarkHurd for the advice on the dupes too. – Haney Jun 26 '14 at 14:56
10

Thanks for the detailed solution. Due to a lot of code in a lot of places, and the risk of restructuring the DOM as requested, I chose to take the approach of a negative-margin offset to make the clickable description cover the entire area.

This is now live. Thank you for requesting the fix and for your research!

| improve this answer | |

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .