# Fix unclickable dead-zones in modal dialog boxes

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.

The markup for each option looks like this:

<li>
<label>
<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:

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

<li>
<label>
<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 */
}


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. Mar 31 '14 at 2:13
• I'm taking a look at this now. Thanks @MarkHurd for the advice on the dupes too.
– Haney StaffMod
Jun 26 '14 at 14:56