I was using a LinkButton and it had like lot of text in it which made it quite long. This was fine as the LinkButton wrapped the text onto the next line when it ran out of room.
I then changed this to a standard asp:Button and the problem is the text doesn't wrap the button just becomes as long as the text. This is a problem because it forces the container it is within to be longer than I intended.
Is there a way to make the text of the button wrap?
You can do that by setting a width and the CSS property white-space: normal:
This goes in your <head>
<style type="text/css">
.wrap { white-space: normal; width: 100px; }
</style>
And your button:
<asp:Button ID="btn" runat="server" Text="some really breally long text that I want to wrap" CssClass="wrap" />
<asp:Button ID="btn" runat="server" Text="some really breally long
text that I want to wrap" />
This question was helpful and wanted to point out if we want to break the text in a specific spot we could also by adding the
within the text value.
I also marked wsanville answer as useful.
You should be able to set a width on the asp:button (width=100) and that should force the text to wrap.
There are some alternate solutions in this post that may be helpful:
ASP:Button Text Word Wrap
Related
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 .
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>
I cannot seem to center the header text of a column in my GridView if it is sortable. The html output is much different for a sortable column (it seems to place a table inside of the td column).
Any thoughts on what can be done to get this centered?
I put the html ouput in a jsfiddle here ... http://jsfiddle.net/mcox05/85Euq/
I have tried the following code on the grid view with no success. Bear in mind that the bound fields are server controls I designed but they do not affect the header text in any fashion:
I am open to any css, js, or asp.net fix that can correct this issue. Thanks!
<sc:DateBoundField DataField="LastLogin" SortExpression="LastLogin" HeaderText="Last Login"
HeaderStyle-Width="125px" ItemStyle-Width="125px" HeaderStyle-HorizontalAlign="Center" />
<sc:SCommandButtonField Command="Change" ItemStyle-Width="100px" HeaderStyle-Width="100px"
HeaderText="Change" HeaderStyle-HorizontalAlign="Center" Image="img.axd?ico16=edit" />
If you can get the style of your inner table to look like style="height: 32px; cursor: pointer; font-weight: bold; margin:auto;" it will center, at least in FF.
.labelOne { border-width:thin;
border-style:solid;
border-color:Red;
background-color:Silver; }
<asp:Label ID="Label1" runat="server" CssClass="labelOne">
<h1>Hello world</h1>
</asp:Label>
<br /><br />
<asp:Label ID="Label2" runat="server"
BorderColor="Black"
BorderStyle="Solid"
BorderWidth="1px"
BackColor="Silver">
<h1>Hello world</h1>
</asp:Label>
Hello. In the code sample above I have 2 Label controls with their contents set to an h1 header tag. The first Label is styled using css, and the second with the Label's inline properties (both Labels have identical styling). But the first Label doesn't output properly, it's border is broken. If I replace the first Label's markup with plain "Hello world" text it renders properly, but it breaks again when I use markup. Can someone explain why this is happening?
You're rendering invalid html. Label controls put their contents inside a span or label html tag by default, so now when you put h1 tags inside the label you have a block element inside an inline element, which is invalid.
You should wrap your h1 tags outside the label control, and then perhaps use a literal control instead — like this:
<h1 class="LabelOne"><asp:Literal ID="Label2" runat="server">
Hello world
</asp:Literal></h1>
Note that you could also easily apply inline styles to h1 if you wanted... not that I recommend inline styles, though.
Add this to your CSS:
display:inline-block;
Apparently Asp.Net adds that css style for you when you use the inline styles on a label.
By the way, I was able to spot the difference between the styles applied to the 2 labels (span tags) very quickly by bringing it up in Firebug.
Label is the wrong control to be using here as it renders a html <label>, which defines a label for an input element.
It would make more sense to use a Panel which will render as a <div>.
A span-element (which is what the asp:Label outputs) is an inline element, and can not contain block level elements like h1. This might be the reason why it breaks.
work on C# asp.net vs 05. I have a requirment, I have to fill text box with some data on gridview , which is coming from database and make it read-only
After that user can not enter any text on gridview template field. If I set textbox Enabled=false, then i lose text color, but i want to show text color. Just textbox to not be editable. I just want users to not be able to write anything in my textbox.
Isn't there a readonly property for the text box.
If then you can use
ReadOnly="true"
for the text box.
If you can use a label then I would prefer that one.
For wrapping contents inside a label you can use
word-wrap
word-wrap: break-word
Inside the properties choose your column field and in the properties.
Under Styles section
You can give a CssClass to the column.
If you specify CssClass as 'TextStyle'
the css looks like this
.TextStyle
{
color: #a9a9a9
}
In the color attribute give either the color name like 'red' or the hexcode like '#000000' for the text.
Enabled="false"
I'd use CSS to make a label look like a textbox.
Why does everyone insist on using an asp:label for this sort of thing? Just because it renders a <span> if you don't supply an AssociatedControlId?
You should look at using an asp:Panel or possibly an asp:Literal or asp:PlaceHolder for this as they will give you greater control over the output, and cleaner markup.
Panel would be better, as this will render the contents in a <div> rather than the PlaceHolder or Literal which won't add any extra markup.
The content you are putting in here is a semantic division, and so should really be marked up as such, and by default, <div>s are treated as a block display type, rather than as inline (<span>).
Here's a quick proof of concept I just knocked up.
<head runat="server">
<style>
.readTest
{
border: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" Text="Do something" ReadOnly="true"
ID="txtOne" CssClass="readTest"></asp:TextBox>
</div>
</form>
</body>
</html>
Personally I would use a label, though you could write a custom control that renders a textbox or a label, depending on the state your app is in.
I'd prefer to write the text directly to the cell using a literal or String() output rather than using a control. It's a bit cleaner and will help minimize the amount of ViewState being written. Either that, or turn off ViewState for those controls being added.
Specify your CSS for the TextBox in the row created event of the GridView.