Flash error message does not display fully

[nikolay12]

[DanielKehoe]

Thanks for reporting this. It'd be great to have a pull request (or just paste the fix here) if you sort it out. Is the error message from Stripe getting truncated? Or is it just a problem with the CSS not being wide enough?

[nikolay12]

I think it's the CSS:

[ghost]

I'm not sure what browser you're using but if you can get firebug installed for it, you can find out where in the css you can adjust the width of that message. I just checked the template with firebug. You might be able to toss the below in custom.css and play around with it a bit to get what you want.

• {
  box-sizing:border-box;
  }

.alert-danger, #error_explanation:not(:empty) {
background-color:#F2DEDE;
border-color:#EBCCD1;
color:#A94442;
}

.alert, #error_explanation:not(:empty) {
border:1px solid transparent;
border-radius:4px;
margin-bottom:20px;
padding:15px;
}

[kathyonu]

@nikolay12 , reduce your padding .. try 2px and see how it looks.
also, if you are using Firefox, click on Tools at the top, then Web Developer, then Web Inspector, then hover over the message area, and you will see what css is affecting it. if you click on the area in question, it will lock the inspector on that item until you refresh the browser.

also, the code you are looking for is in app/views/devise/registrations/new.html.erb
the specific code is :

  <span id="error_explanation" class="payola-payment-error"></span>

CSS will operate on the id of 'error_explanation' so, open this file :

app/assets/stylesheets/framework_and_overrides.css.scss

Search the file for error_explanation and you should see two uses.

change this one :

#error_explanation:not(:empty) {
@extend .alert;
@extend .alert-danger;
}

to this :

#error_explanation:not(:empty) {
@extend .alert;
@extend .alert-danger;
font-size: 12px;
padding: 2px;
}

Your errors should look good now.