What would cause broken <input> elements that don't show text in this template? [closed]

Question

I'm building a web page by modifying this template: http://webthemez.com/preview/?doctor-free-responsive-website-template/

At the bottom, in the Contact area, there are two <input>s and one <textarea>. The inputs only work in Opera. No other browser lets me edit the text or even displays the placeholder.

I can't figure out where the problem is. The HTML? The CSS? The JavaScript?

This question appears to be off-topic because it is about web development which is off-topic at Pro Webmasters. Web development questions may be asked at Stack Overflow but be sure to read their FAQ before posting to ensure your question meets their guidelines. — John Conde
– John Conde ♦, Commented Feb 12, 2016 at 1:01

Stephen Ostermiller · Accepted Answer · 2016-02-11 20:10:46Z

The problem is the padding specified by CSS along with a fixed height. The box is not tall enough to contain both the text and the white space padding.

.form-control { padding: 22px 4px; height: 34px; }

The best way to discover this problem is to use developer tools. I use Firefox and right click to "inspect element". From that I can check and uncheck the CSS rules to see which one is causing the problem:

When I uncheck those rules I see the text I entered:

So it's in the bootstrap code? What can I do if I use a bootstrap CDN? — Danesan Dragos
– Danesan Dragos, Commented Feb 11, 2016 at 20:27

Stack Exchange Network

What would cause broken <input> elements that don't show text in this template? [closed]

1 Answer 1

Hot Network Questions