Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flash error message does not display fully #147

Open
nikolay12 opened this issue Jun 2, 2015 · 4 comments
Open

Flash error message does not display fully #147

nikolay12 opened this issue Jun 2, 2015 · 4 comments

Comments

@nikolay12
Copy link

screen shot 2015-06-02 at 11 07 28

@DanielKehoe
Copy link
Member

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
Copy link
Author

I think it's the CSS:
screen shot 2015-06-02 at 11 38 40

@ghost
Copy link

ghost commented Jun 8, 2015

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
Copy link
Contributor

kathyonu commented Jun 8, 2015

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants