I have a simple textarea in a page with a placeholder for when it is empty. I have styled the textarea in css to be white text and a transparent background. The body of my document is very dark so black text shows up poorly. This all works fine in Chrome, IE, etc. However in firefox when the box is empty the placeholder text appears colored correctly, but when you click in the box (focus) the cursor starts out black until you start typing. If you delete what you typed, the placeholder text comes back and the cursor is black again. If you are not looking closely, it appears as if you clicked a control that is non-functional.
How are people working around this?
My CSS:
.statementInput {
width: 500px;
height: 50px;
background-color: transparent;
color:white;
border:none;
}
The text area line:
<textarea class="statementInput" id="st1" placeholder="Type something here"></textarea>
If I'm not mistaken, this is a bug that has appeared in Firefox recently and has been marked as a bug, too.
I have encountered this bug in my own work as well and I must say it's very frustrating. Unless somebody finds a workaround, I think we will just have to wait for the developers to release a new version of Firefox that fixes it.
This is fixed in at least Firefox ESR 31 and 36.
The following css snippet causes a white cursor on a dark background.
.textInput:focus {
color: white;
}
Bug 830608 states it has been fixed since 19.
Related
I am observing a strange behaviour (though to be honest, I don’t think I tested for this scenario).
I have set the height of ace editor to 500px. The text I have entered is around 60 lines. I see a scroll bar but the text occupies only around 70-80% of the editor. The space below is blank even though there is more text. See the picture below:
When I type something, though the cursor is at the bottom of the editor, the character gets typed at a higher location
I suppose there is a mismatch between the height of the ace-editor and the content within the editor. How could I align them?
Update
I notice that the top property of the textarea within the editor is changing as I scroll. I am not sure if this should happen as the textarea should stay fixed within the ace-editor element.
<textarea class="ace_text-input" wrap="off" autocorrect="off" autocapitalize="off" spellcheck="false" readonly="" style="border: 1px solid black; opacity: 0; font-size: 1px; height: 1px; width: 1px; **top: 458px;** left: 150px;"></textarea>
The top is initially 458px and as I scroll, it changes to 98px and even less if I keep scrolling. I am just sharing my observations here, I do not know how relevant they are.
When the size of the editor is changed by javascript after creating it, you need to call editor.resize() for editor to update its size.
So in order to change Jsbin's theme one can go to console and write
jsbin.settings.editor.theme = "theme-you-want";
as I read here.
I like monokai theme but unfortunately there is a big drawback about dark themes. When you get your cursor on a line, whole line turnes white (like marking the whole line). The problem is that text is also white and I can't see text! Does anyone else have this problem and a possible workaround?
Go to the Console of the Browser and put this...
jsbin.settings.editor.styleActiveLine=false
...and then refresh the page. That will turn off the styling for the active line.
Or, if you want it to be highlighted and are cool with playing with the UserStyle sheet of your browser you can add this....
.focus div.CodeMirror-activeline-background {
background-color: #eee !important;
}
.focus div.CodeMirror-activeline .CodeMirror-linenumber {
background-color: #ccc !important;
color: #2c3dad !important;
}
...and adjust the colours to your liking.
If your on windows and use Chrome you can use my tool to get to the style sheet easily...
http://forum.valorsolo.com/viewtopic.php?f=35&t=269&hilit=extension+opener
...one cool thing about the userstyle sheet in Chrome is the page will update as soon as you save the file.
I have two boxes. The first one contains simple text. The second one contains a submit input with no borders, paddings, margins.
So, why the input takes more height than the simple text?
I know that I can play with the padding and remove the box height, but for my purposes I need to set it a static height, and prepare this box to be reusable for both inputs and simple texts.
I have tried to play with line-height and vertical-align properties, without success.
What is causing that extra line-height?
There's an example to play with it.
Edit: I recently see, that the issue is only with Firefox...
I think it could be for the line-height property in the Firefox CSS:
But... in first place I can't believe what my eyes are seeing. An !important in the internal browser stylesheet? That's normal? Could this be a possible answer?
Similar question with the same answer.
But the trick Leniel suggest doesn't work for me...
The extra padding is on your .buttonarrownext class.
Fixed CSS Class:
.buttonarrownext {
cursor:pointer;
position:relative;
border-radius:4px;
text-align:center;
background:white;
border:1px solid red;
padding: 0px; /* changed the padding here */
margin:0px auto;
display:inline-block;
}
A JSFiddle to demonstrate.
As mentioned in my comment, it displays fine in IE and Chrome, but not FF. A quick solution is to replace the input with a button.
updated html would be:
<div class="container">
<div class="buttonarrownext">Siguiente</div>
<div class="buttonarrownext"><button class="reset">Siguiente</button></div>
</div>
There's no real difference as you can still fire a submit event with a click handler for the button...
It will be interesting to find out why FireFox does this though...
Updated fiddle - http://jsfiddle.net/QfPGW/2/
I've implemented an Iframe Like box, but the vertical scroll bar does not show. (The generated code set scrolling to no, but I've now changed it to yes, but still it does not work).
The code is as follows:
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FChristopher-Carter-Veterinary-Surgery%2F332086710515idth=300&height=590&colorscheme=light&show_faces=true&border_color&stream=true&header=true" scrolling="Yes" frameborder="0" style="border:none; overflow:hidden; width:300px; height:590px;" allowtransparency="true"></iframe>
The problem occurs with I/E but not with Safari, Firefox, Netscape or Chrome. It seems as if this is a Windows XP / IE8 issue, but if anybody knows differently, I'd be pleased to hear from them.
You have overridden the scrollbars in the style clause;
overflow: hidden;
However, it has the opposite effect, IE will correctly render as-is, but firefox etc will not render the scrollbars. Fix that with;
overflow-y: scroll;
Having style overflow:hidden; seems to me like a contradiction to scrolling=Yes.
At the risk of stating the obvious:
Have you tried:
overflow:scroll
I'm running into a vertical positioning problem with a couple of elements on a page in Firefox 5. When I set a line-height on a piece of text, and give it an equal height, it doesn't center vertically the way it should. Instead it sticks to the top of its line-height.
The page in question is here: http://www.tyndale.ca/~missiodei/
Here are the two problem elements along with their CSS. In both cases the text is pushed up in FF5 but displays properly (vertically centered within its line-height) in Chrome/Chromium.
the large title link in the banner (#blogtitle a)
position:relative;
display:block;
margin:0;
padding:0;
color:#fff;
text-decoration:none;
letter-spacing:.1em;
font-family:"Palatino Linotype", Palatino, serif;
font-weight:bold;
opacity:0.6;
height:120px;
line-height:120px;
any of the drop-caps that float at the beginning of new sections of body text (p.openingPar:first-letter)
font-size:3em;
font-weight:bold;
position:relative;
float:left;
height:48px;
color:#ccc;
line-height:48px;
margin-right:4px;
You might not see these drop caps unless you look at the page using Chrome or Safari, since most of them aren't showing up at all in FF. (I'm not sure why these styles aren't being respected either).
Finally, it would be helpful to know whether this is a problem unique to FF5 or whether 3.6 and 4.0 have the same problem. I don't have any old versions of FF available for quick testing.
Thanks ahead of time for help. I've imprinted my keyboard on my forehead bashing my head over this one!
The vertical centering seems to work fine for me....
The lack of first letter styling is https://bugzilla.mozilla.org/show_bug.cgi?id=8253
Try using <span class"dropcaps">W</span> instead of styling your opening first letter in the paragraph by selector :first-letter. Let us know if it works.