Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Form changes styling on textarea focus

Hello Treehouse Students!

First of all, please forgive the ugliness of the form I'm about to show you. I'll fix that later, but I have a form project here. I have a form set up to send an email via my server but there's a problem.

Whenever I select or tab to the textarea, it changes the default styling of the containing form.

By default, the form element has a width of 50%

section article form {
    border: solid red 3px;
    width: 50%;
    margin: 0 auto;
}

But as soon as I give input to the text area the styling changes. What's causing it is that for some reason, Chrome DevTools is applying some inline styles to the form element which sets overflow to hidden and a 100% width.

element.style {
    width: auto;
    overflow: hidden;
}

I've tested this in all the major browsers and Chrome is the only one with this behaviour. It's not happening in the other browsers. I'm using the latest version of Chrome.

Any idea what I'm doing wrong that might be causing this?

https://projects.jonniegrieve.co.uk/form_project/email_form/index.php

1 Answer

Masih Abjadi
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Masih Abjadi
Front End Web Development Techdegree Graduate 26,328 Points
Masih Abjadi
.a{fill-rule:evenodd;}techdegree seal-36
Masih Abjadi
Front End Web Development Techdegree Graduate 26,328 Points

Hello Jonathan, I tested this in chrome and I only saw this inline style for the form element

element.style {
    width:50%;
}

I should also mention I dont have the latest version of Chrome. but one things you could do is:

section article form {
    width: 50% !important;
}

Hope this helps.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi there,

Yes, I put the element.style in myself so it shows 50% width. That was to try and force the browser to keep the width of the form element. However if you click the text area, that's when it overrides with the styles I mentioned in my first post.

It looks like the important directive has done the trick, thanks!

Is there a way we can get this reported to google as a bug in chrome? Such a thing shouldn't be happening really! :)

Masih Abjadi
.a{fill-rule:evenodd;}techdegree seal-36
Masih Abjadi
Front End Web Development Techdegree Graduate 26,328 Points

I updated the Chrome and still unable to see the issue you mentioned, I even selected the textarea. You can report bugs to google through this form https://support.google.com/chrome/answer/95315?co=GENIE.Platform%3DDesktop&hl=en

Generally I recommend you to use a browser reset style like normalize.css

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Yup, I can look at those things later on, once I've got the functionality sorted. I created this little site just to give me some practice space, an example to build other forms from.

I'm using Sass to build it It seems odd you're not seeing the issue. I'm still seeing one where the background colour of the textarea field kind of delays and then jumps into place. I don't think it does that in the other browsers either but just to be sure, I'll try reset styles as you suggest :)