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>
Related
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 = '';
Hi i have a textbox which i am using as a counter to show how many characters are still allowed in another textbox. I have made it read only and its background transparent so that you cant tell it is a select box. The only problem is you can still click on it or tab to it. Is there a way to do this so it appears just like normal text and people cant click on it or tab to it?
If this is an Asp.Net Web Control set it's Enabled property to false
<asp:TextBox Enabled="false" />
If it is HTML you can do this:
<input type="text" disabled />
Just replace the input element with a span element or some other non-input element. This requires a trivial change to your JavaScript; you would assign to the innerHTML property of the element rather than value. Then the content will appear as normal text, and you can style it as desired.
you need some style with css and some trick with Jquery.
CSS
.readonly{
border:none;
background:#aaa;
}
Jquery
$(".readonly").focus(function(){
$(this).blur();
});
now just add class="readonly" to your textbox.
<asp:TextBox cssClass="readonly" />
check demo here .
As shown here: http://msdn.microsoft.com/library/windows/apps/Hh465498
Do Mozilla and Webkit have equivalent options? The clear button on text inputs is good for touch screen apps. I don't want any JavaScript workarounds and an easy CSS fix would be very helpful.
I already know this is possible with JavaScript, but IE 10 has an inbuilt solution for displaying clear button, and I'm wondering if any other browsers have similar options?
The short answer is No.
There is no way to use CSS to generate a button that will clear the contents of an input without the use of JavaScript.
The clear button is built in functionality to IE10. -ms-clear is not what generates it, but simply a way to target it for styling.
I should mention though, that the <input type=search> field in Chrome will give you a clear button as well, but not on normal <input type=text> fields.
Was looking for same issue so I made a jQuery plugin (TextClear) to offer the same feature :
here is the download link
and about trick behind this:
set background image on input text field and position it to the right corner like
{
background-image: url('imagesUrl');
background-repeat: no-repeat;
background-position: right center;
background-size: 10% 90%;
padding-right: 1%;
}
And then handling click event on it by mapping its position (you can check the source code as well for detailed logic)
You cannot actually do this using css..
But you can user jQuery, and its simple. All you gotto do is this...
HTML code:
<form id="myform" method="post">
<input type.... />
<input type.... />
<input type.... />
<input type="button" id="clear" name="clear" />
</form>
jQuery Code:
$("#clear").click(function(){
$("#myform").reset();
});
And this will work.. But the form tag is necessary.
Y U NO like Javascript? Look how easy jQuery makes this process:
Markup
<form>
<input type="text">
<button>X</button>
</form>
jQuery
$("form").on("click", "button", function() {
$("input").val("");
return false;
});
http://jsfiddle.net/QyE92/
With CSS, you can style the button and position it appropriately to mimic the "x" in the metro interface almost exactly.
I have a search textbox and two image buttons on a page I created with ASP.NET.
When I look at the page with either IE8, Google Chrome or Opera, the textbox does not align with the two image buttons. The buttons appear higher than the textbox and I can't tell why.
Here is the key markup:
<div id=searchbar>
<div id=Panel1
onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnSearch')">
<input id=txtSearch type=text name=ctl00$txtSearch>
<input id=btnSearch title=Search src="Test_files/search.png"
type=image name=ctl00$btnSearch>
<input id=btnAdvanced title="Advanced Search" src="Test_files/adv.png"
type=image name=ctl00$btnAdvanced>
</div>
</div>
NOTE: I realize there are a few strange things here such as no quotes around the ids. But there ARE quotes around them in my source. The above snippet is from saving the content from IE and it made a number of changes to the markup.
I also posted the same code at http://www.blackbeltcoder.com/Test/Test.htm if anyone would be willing to take a look. The issue is with the search controls to the right of the black bar near the top.
Thanks.
Try
vertical-align:text-bottom;
on the elements that are too high. It's a common problem. You can try out other options for that CSS property too if that isn't quite right. Have a look here
just add
vertical-align: middle;
to the the input tags css and that should solve the issue
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.