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!

You must log in to answer this question.

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