I have a super simple HTML form:
<form name="editor" action="#" method="POST">
<textarea name="contents" cols="100" rows="50"><?php echo $text; ?></textarea>
<br>
<input type="submit" name="submit" value="Submit" />
</form>
Text echoed inside it is HTML code.
Now, when CSS is turned off, it works perfectly.
But when it's turned on, I:
can't click anywhere inside the textarea text to place the cursor there
can't move cursor with arrow keys, it will only move a few characters left and right, and if up/down arrows are pressed, it moves the cursor to the very top/very bottom of the textarea.
What have I tried:
Excluding the textarea from CSS firebug showed applied to it
Trying with or without JS to check if that makes a difference
Tried different browsers, same issue repeats
Turning off CSS completely and then it works, but it's not an option
The only idea I have is that maybe the textarea is inheriting some CSS from somewhere, but what kind of CSS would cause such behavior, what to look for?
Here's the CSS as seen by firebug:
textarea {
overflow: auto;
resize: vertical;
vertical-align: top;
}
button, input, select, textarea {
font-size: 100%;
margin: 0;
}
html, button, input, select, textarea {
color: #222222;
font-family: sans-serif;
}
Thanks for any replies!
Thanks everyone! You actually helped me by setting this fiddle, I started pasting part by part of CSS there, and here's what caused the issue, if anyone gets into same problem:
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Basically disabled text selection was obviously inherited from body.
Thanks everyone again.
PS. Also to clarify to anyone who suspected that my code inside textarea was unescaped - yes it was, but that doesn't seem to be a problem, you obviously can do that.
Related
In my web page I have a button. When I display the page in Chrome, everything works fine, but when I look at it in IE, the button text doesn't fit in the button (see image). Do you have a hint, what possibly causes this problem and how to fix it? I'm also using bootstrap v4.0.0.
Here is the code:
.button {
background-color: #002c4c;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
align: center;
width: 100%;
}
.row {
margin-right: 0;
}
.row-8 .col-lg-2 {
max-width: 225px;
}
<div class="row row-8">
<div class="col-lg-2">
<form action="/MyProject/print?language=de" method="post" name="printForm" onsubmit="return validateForm()" target="_blank">
<input type="submit" class="button" name="btn_print" value="PDF generieren">
</form>
</div>
</div>
I was not able to reproduce this error with the code snippet thing even when I put my whole web page & css inside it. I guess it has something to do with the bootstrap columns. I use lg-2 here with a max width of 225px.
After I used the work-around (button instead of input) suggested in the answer I get the above. The button in IE is a bit smaller though it doesn't use up the max-width I defined. If anyone issues the same problem and has found a reason for that, I'd be glad to hear about it. For now, I'll live with the work-around.
I'll already had the issue myselfe that a text overflows a button in IE11.
For me it was a rendering bug connected to fonts.
IE11 seems to render the button on pageload, before webfonts are loaded, when the webfont is loaded the button is not redrawed so it does not adapt to the new width.
The only solution I was able to find is forcing the browser to redraw when webfonts are loaded. Therfore I used an JS called "FontFaceObserver" (https://github.com/bramstein/fontfaceobserver)
JS:
new FontFaceObserver('Roboto', {
style: 'normal',
weight: 400,
}).load(function(){
$('body').addClass('state-font-loaded');
}, 10000);
CSS:
.state-font-loaded {
visibility: visible; //forcing browser to redraw
}
An other try would be to change the input into button like
<button type="submit" class="button" name="btn_print">PDF generieren</button> this could solve sizing issues if they are connected to the input element. (Please also inpect this element to see if there is any fixed or precentage width set)
I want to hide an input element and trigger it with an associated label.
Usually that's not a problem. I can simply set display:none on the input like this
input {
display: none;
}
<input id="upload" type="file" />
<label for="upload">Upload a file</label>
For some reason in Chrome (Firefox works), this technique is not working for a color input - DEMO
input {
display: none;
}
<input id="colorPick" type="color" />
<label for="colorPick">Pick a color</label>
Is this a webkit bug or is there a logical reason as to why this doesn't work?
I guess it is a bug, for chrome(not really sure about other browsers). you can have a workaround for this specific situation: http://jsfiddle.net/z1ta7ou0/4/
instead of using
input {
display: none;
}
use
input {
visibility :hidden;
width:0px;
padding:0;
margin:0;
}
seems like there is only display:none which causes the problem(label not getting associated), otherwise works fine.
I have also opened an issue here, you can track it
I'm trying to align a submit button (input type="submit") with a text input (input type="text") but in Chrome the submit button is always slightly smaller.
Here's the HTML:
<input type="email" placeholder="Secret Sale ♥ Enter your email" name="MERGE0" class="email" size="22" value="">
<input type="submit" class="button" name="submit" value="Join">
And here's the CSS:
#header-top .newsletter .email, #header-top .newsletter .button { font-size: 12px; line-height: normal; box-sizing: border-box; padding: 5px; }
As you can see I've tried setting the padding and line-height to be the same for both elements, and after reading around on Stackoverflow I've seen references to setting the box-sizing too which unfortunately hasn't made any difference.
Here it is in IE (fine):
And in Firefox (also fine):
And finally in Chrome (button too small, or text input too big?):
Here's the live site if it helps too: http://www.arabel.co.uk/about-arabel/faqs
Any help with this would be much appreciated, I'm completely stumped as to why it's bigger in Chrome. Thanks!
Chrome is adding a default 2px border to your textbox due to some reason. Your text box and button both have the same padding, but the text box has a 2px border and the button has a 1px border. A quick fix would be to add an individual padding of 5px to ".email".. everything looks a okay. If you change it in the common css line, then both items will get the padding, and they will still be skewed.
#header-top .newsletter .email{
padding: 4px;
}
And make sure you add this after the line that defines the css for both .email and .button, so that this will overwrite the 5px padding.
Alternatively, you can also do away with that combined css altogether and add individual padding or 4px for .email and 5px for .button
Likely hasn't something to do with browser default styles.
You could try including a reset.css in your page.
http://meyerweb.com/eric/tools/css/reset/
It could have unattended effects else where though.
With this code (jsbin here) the initial of placeholder text in the password field is pushed to the right, but once you click inside the input padding vanishes and you get correct alignment. What is causing this, and what needs be reset?
Markup:
<input type="text" placeholder="Email"/>
<input type="password" placeholder="Password"/>
CSS:
input {
font-family: monospace;
font-size: 20px;
width: 250px;
}
You can use text-align: left for placeholder pseudo-class to make sure that it's displayed on the web browser correctly at the left.
For the Webkit web browsers (Chromium in this case):
::-webkit-input-placeholder {
text-align: left;
}
Ive removed the background and border from a submit button so its styled as normal text. FF is fine but IE is indenting the text and I can't figure out how to remove this text indent.
Thanks
Update - Ive set the padding, margin and text-indent to 0 but no luck. Ill upload the site so I can post a link soon.
Update 2 - Ah, I just needed to add text-align:left;
have you tried text-indent: 0; padding: 0; in your CSS?
posting some code may help, too.
There's padding on the button in IE. Try setting the padding to 0.
.text-button
{
padding: 0; /* remove padding */
border: none;
background: transparent;
text-decoration: underline;
}
// The button
<input type="submit" value="Submit" class="text-button" />
I just needed to add text-align:left;