search

foundation / foundation-sites

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
https://get.foundation
MIT License
29.66k stars 5.48k forks source link

Error styling #1032

Closed rassom closed 12 years ago

rassom commented 12 years ago

I am redesigning our site in Zurb Foundation 3 and absolutely loving it. Thank you SO much for all the great work your doing and for making ZF3 avalialble to everyone else!

I'd like to use the error styling but as you see from the below screenshot, the styling is not good when the inputfield is not that wide and when the label is in another column (using the grid).

https://www.evernote.com/shard/s48/sh/febbd4ba-8db5-4abd-935b-2a8e82dfb1b5/64e46c693c7d7d29ea4636db9a68ba32

Is that something you would/could fix, please?

Thanks again! :-)

EnigmaSolved commented 12 years ago

Try giving a class of error to the <small> (eg, <small class="error">invalid entry</small>) and see if that fixes things for you. I think that should work for you. :)

rassom commented 12 years ago

Thanks for the suggestion :) Made no difference, unfortunately. Also tried applying the error class to the input element itself, but no difference either.

https://www.evernote.com/shard/s48/sh/c3d5ac1b-3934-4d92-a1da-504ba07a1c2b/8823d2ea71d810b4a9e92afc30a3a4f9

EnigmaSolved commented 12 years ago

What happens if you remove the error class from the six columns div (leave error on the small tag)?

rassom commented 12 years ago

Looks exactly the same: https://www.evernote.com/shard/s48/sh/d7b8af43-59d6-4b51-b855-615d32fc69b3/f0a37e8415e17a1348b3084a3f559381

But if I remove the "right" class on the input element, it looks better (but still not like it should): https://www.evernote.com/shard/s48/sh/e7ff4818-047a-413e-9bd0-735ad9807739/f2c281806ecbc48017a48dcfc3311014

EnigmaSolved commented 12 years ago

Okay, I think I see what the issue is. I doubted my last suggestion would do anything, but it was worth a try.

Add the class twelve to the small and I think that should fix things (or at least get closer to honing in on where a bug might be). I had overlooked that you had a class on the input and the small needs the same size class in order for it to match the width properly.

You might then run into #1044 when you trigger the Small media query, but in your case it might not cause a problem because the input and adjoining small tags are both contained in the same column.

I'm unsure how the use of the right class will effect things though, so you may need to play around with things further and/or there may be a genuine bug here.

rassom commented 12 years ago

You we're right! :-) Adding twelveto the small tag worked :+1: (I needed to apply "right" to the small tag too, but that is only natural as the input element also has "right") https://www.evernote.com/shard/s48/sh/4efc3240-b4da-4d9b-bd06-d0e1ae64e080/fde9d0191f28fb1cede9c035f4aebaaf

Thanks for your help! :-)

EnigmaSolved commented 12 years ago

Awesome man! I'm so glad it worked! Glad I could help. :)