What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 130 Stack Exchange communities.

I think the below error message box could have its width increased. Not sure if other errors suffer from the new compact CSS.

Error message box a bit small

share|improve this question
1  
This isn't a bug, it's a request to change the design of error messages. (which got +1 from me :)) –  Shadow Wizard Feb 20 '13 at 14:38

2 Answers 2

That error message is pretty cramped, but a lot of it is because of the padding to the right (50 pixels for a box nearly 130 pixels wide).

                                                           enter image description here

In addition to making the message wider, it would be nice if the padding to the right was made uniform with the padding on the left, eg:

                                                  enter image description here

The example above is just the standard error message, with these differences:

  • padding on right matches padding on left (15px),
  • increased width
  • close button has slight margin to left and bottom
share|improve this answer

Suggested Fix

The following div contains the error message markup.

<div class="error-popup error-popup-alert error-popup-dismissable" 
     style="position: absolute; display: block;">

Based on my tests, when using a percentage for the width, the div inherits the width from the <table> containing the comments. Therefore, setting a width of 50% works well. The error message will always be half the width of the table containing the comments.

I set the width to 50% using Chrome. It's not immediately clear which class would need to be set: error-popup, error-popup-alert, or error-popup-dismissable.

Example fix

Also, the inner div containing the actual error message contains an inline style padding that might not be need. It's tough to say since I'm not sure where else this styling may be used.

<div class="error-message" style="padding-right: 50px;">
share|improve this answer

You must log in to answer this question.

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