I want to use the white-space CSS property in an HTML textarea.
Basically if someone types a bunch of text with line breaks in a textarea, and then submits this data to be stored in MySQL, I want to use the white-space CSS property to display those line breaks in the textarea. But when I try it it's not working and just displays the text all together in one big paragraph, without any breaks or anything. Is there a way to do this?
<form action="includes/changebio.php" method="post" id="form1">
<textarea id="bio" style="width: 440px;
margin-top:3px;
text-align:left;
margin-left:-2px;
height: 120px;
resize: none;
outline:none;
overflow:scroll;
**white-space:pre-line;**
border: #ccc 1px solid;" textarea name="bio" data-id="bio" maxlength="710" placeholder="<?php echo stripslashes($profile['bio']); ?>"></textarea>
<input type="image" src="assets/img/icons/save-edit.png"class="bio-submit" name="submit" value="submit" id="submit"/>
</form>
textarea{white-space:pre}
When I've seen this, it's because your textarea is inheriting a white-space:nowrap from something. It can also be complicated by a wrap="no" on the textareas which can be useful sometimes.
The default behavior for a textarea nowrap is pre, so simply setting the css as above at the bottom of your styles will override anywhere that is setting the white-space.
If you inspect your textarea element, you'll most certainly find that somewhere in the hierarchy you're setting the nowrap property somewhere on some type of element that is overriding the default textarea behavior.
Don't.
<textarea> elements already handle whitespace literally. There is no need to try and take things into your own hands.
Things seem to be working ok for me... Tossed this into a codepen just to test it. Newline characters appear fine within the textarea when added directly.
Don't know what's going on. Is PHP stripping newline characters? Are you using double quotes around whatever you are passing in through $profile['bio']?
Here's an answer that might help you: The .val() of a textarea doesn't take new lines into account
The last response, in particular. Based on your code, it doesn't sound like the .replace() method is what you need (but I could be wrong... maybe I'm not understanding what you are doing).
one line of jquery will solve the problem
$('#bio').text('');
or Javascript
document.getElementById("bio").innerText = '';
Related
I'm working with Bootstrap's Typeahead and adding the input like so:
<div class="row">
<div class="span12">
<form class="centered">
<input id="main_search" type="text" class="search-query my-search" data-provide="typeahead">
</form>
</div>
</div>
I have the following CSS code which essentially just expands my search box to be "long" and in the middle of the span:
.centered {
text-align:center;
}
/* Make the main search box wider */
.my-search {
width: 80%;
}
My question is, when I use the Typeahead, the auto-completed results are only as long as they "have to be" to display the entire word/phrase whereas I want them to be as long as the actually input box. Basically like what you see on Google.com with their Instant Search functionality.
This closed issue suggests I should be able to manipulate the CSS to achieve what I want to do, but I'm not great at complex CSS and I'm struggling to get the inheritance just right to get any CSS to actually apply to the correct element. On top of that, I'm unsure how to make sure the dropdown-menu inherits the input's length (so that it'll work despite browser resizing).
Thanks for any help that you can provide!
Current code:
JSFiddle
Without you posting your code or a link to the working example, this is just a guess, but try this CSS
.my-search, .typeahead.dropdown-menu > li {
width: 80% !important;
}
Does anybody know a way to input:focus an element only on first click?
<style>
input[type='text'].error:focus{border-color:#f00}
</style>
So, if the user "focus out" it returns to the original border color.
Thanks in advance for any hint.
Edit
I wasn't sure at all. Thanks #blender.
I think the easist way to do it is using jquery or similar, right?
I am confused as to what you mean by "only on first click". If you want to style an input on click, you can just use this CSS:
input[type="text"].error:focus { border-color: #f00; }
And this HTML:
<input type="text" class="error" />
That will style the input border given it has the class of error (if you are adding/removing the class dynamically that is).
However, if you are styling for errors (like if the user hasn't filled out the form), you might want to try something like this:
input[type="text"]:invalid { border-color: #f00; }
input[type="text"]:valid{ border-color: #; } //If form is filled in
Then in your HTML:
<input type="text" required />
Does that help answer your question a little bit?
As #Blender said, it does not seem possible in pure CSS.
I would suggest to handle focusin and focusout events to add a class to an element and use data- attributes to get if element was already clicked or not.
Have a look at this jsFiddle.
For all who have the same or a similar question, here's is a possible jQuery solution:
$('input').on('focusout',function(){
$(this).removeClass('error');
});
This will remove the error class on :focus out.
When the user :focusin another time the input element, it will return to the default color.
Example default border-color with css:
<style>
input[type='text']:focus {border-color: black;}
</style>
I know that I can add a degree symbol in HTML with "°", and I am looking at examples of CSS using :after selector and the content property, but I'm having trouble putting it all together.
I want a degree symbol to show up after the text that appears in an input box.
<div class="threshold">
<input type="text" value="12" name="thresholdSelect" disabled="disabled">
</div>
And the CSS:
.threshold input:after {
content: "°"
}
But that doesn't seem to work. Any ideas on how to fix it. I could store the degree symbol in the value, but that would require a lot of extra javascript for things like validation and whatnot. Any way to do it with CSS?
Try something like this
HTML
<div class="threshold">
<input type="text" value="12" name="thresholdSelect" disabled="disabled">
</div>
CSS
.threshold:before {
content: "\00b0"
}
DEMO: http://jsfiddle.net/Tt2hU/ OR http://jsfiddle.net/Tt2hU/1/
This might help: Can I use the :after pseudo-element on an input field?
It seems it may not be possible in CSS with an input tag.
should work like this
degrees° is done simply by
<p>degrees°</p>
You have to put in an escaped reference to the hexadecimal Unicode character value (from here)
::after {
content: "\00b0";
}
DEMO
HTML entities doesn't work in CSS, you would use a character code entity, i.e. a backslash followed by a hexadecimal character code:
.threshold input:after {
content: "\00b0";
}
However, this only works on regular elements, not input elements.
Demo: http://jsfiddle.net/Guffa/AcxEG/
I have a simple form in a ASPX page that have a lot of <label> and <asp:TextBox> pairing that construct the outlay of the form.
I have a requirement to add a string behind the textbox to indicate that the field is compulsory. I'd tried adding either a <span>, a <em> or a <div> after the field but it will still display the message at the bottom of the textbox.
Any way for me to achieve this?
EDIT:
I mean right hand side of the textbox, not behind as in watermark. My Bad.
EDIT for sample code:
I'd tried all the suggestion but it is still not working, thinking whether it's my code issue or not. Below are my codes:
<label>Telephone No.</label>
<asp:TextBox ID="txtTelNo" runat="server"></asp:TextBox>
<span class="afterInput">test</span>
any pointers? Thanks.
EDIT for Answer
As it turns out the problem lies in the css property. The template that i used has all the input assigned with the display: block property, which makes anything after the <input> element to be pushed down.
After creating a custom css class with display: inline-block and assign to them appropriately, i manage to get the result that i wanted.
Many thanks for the answer provided, especially the :after attributes and the watermark attributes.
See http://jsfiddle.net/ekWG9/
.required:after{
content: "*";
color: red;
}
<label>A box</label><input type="text" value="Hello" /><span class="required"></span>
<!-- alternative HTML -->
<span class="required"><label>A box</label><input type="text" value="Hello" /></span>
Using the :after pseudo element selector allows you to take the literal content out of the markup (e.g. you don't have to repeat "*" over and over).
You can also use relative or absolute positioning to tweak the location of the content of the :after pseudo element. Example: http://jsfiddle.net/ekWG9/1/
By behind the textbox, seems you are talking of watermark text.
You could use the TextBoxWatermark from ajaxcontrol toolkit.
There are also several jQuery alternatives to implement it.
html5 also has browser support for watermarks:
<input name="q" placeholder="Go to a Website">
You could add an attribute to your control to that effect.
Use css for this purpose:
span.clsRequired {
float:left;
margin:2px 0 0 3px;
color:red;
}
And your span before text box looks like:
<span class="clsRequired ">*</span>
you should try something like this
<body>
<form id="form1">
<asp:TextBox ID="TextBox1" runat="server"/> <span>Required field</span>
</form>
</body>
Can I hide the borders of the searchbox ? I would like it completely white, just the text should be visible. And I need a solution for all browsers.
See the picture:
http://dl.dropbox.com/u/72686/searchBox.png
you can add this
<input name="textfield" type="text" class="hide_border" id="textfield" />
css
.hide_border{
border:none;
*border:solid 1px #FFF;
}
By using a standard checkbox I am not sure whether you get this effect in a cross browser way. You can use a custom element and make it act like a checkbox using CSS and javascript.
See this one which uses jquery
Fancy custom radio and checkbox
I'm not sure if I understand correctly. Why don't you just hide the checkbox and leave the label ? (Later using javascript and such you can redisplay the checkbox)
Checkboxes can not be styled in all browsers. The common solution is to use two images, toggling between the two when clicked (and updating a hidden field as necessary).
<style>
.inputsearch input
{
background-color: #FFF;
border: none;
}
</style>
<div class="inputsearch" style="text-align:left;">
<input type="text" value="HEy there ">
</div>
Styling checkboxes isn't doable in a crossbrowser fashion without some jQuery, have a look at this: Custom checkboxes with jQuery. It's the only way to do it, standard checkboxes cannot be styled in all browsers.