I have a normal textbox in a asp.net application.
Textbox's text align is 'right' but i can not see cursor..
Once i added any numbers(Values) then it comes to visible..
Any suggestion..?
.foo
{
text-align:right;
padding-right:10px;
}
<asp:TextBox CssClass="foo" ID="TextBox1" runat="server"></asp:TextBox>
Try this:
<asp:TextBox ID="TextBox1" runat="server" CssClass="right"></asp:TextBox>
and in your css file add a class like that
.right
{
text-align: right;
cursor: text;
}
Related
I have a checkbox with long text (about 5 or 6 lines). I'm trying to get the text indented and nicely aligned when it is wrapped. My current code works currently in IE but in Chrome, Safari, FireFox, the text is on a different line than the checkbox is. Does anyone know what I can be doing wrong here or have any other ways to accomplish this? Thanks for any help in advance!
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Info.ascx.cs"
Inherits="Project.Info" %>
<style type="text/css">
.CkbxFormat input
{
float: left;
}
.CkbxFormat label
{
display: inline-block;
}
</style>
<div style="margin-top: 10px; margin-left: 50px;">
<asp:Table ID="Table1" runat="server" Width="700px" CellSpacing="2" CellPadding="5"
Style="border: Solid 1px green;">
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="Label1" runat="server" Text="Information"></asp:Label>
</asp:TableCell></asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:CheckBox ID="CkBxInfo" runat="server" Text="The accessor of a property contains the executable statements associated with getting (reading or computing) or setting (writing) the property. The accessor declarations can contain a get accessor, a set accessor, or both. The body of the get accessor is similar to that of a method. It must return a value of the property type. The execution of the get accessor is equivalent to reading the value of the field. " CssClass="CkbxFormat"></asp:CheckBox>
</asp:TableCell></asp:TableRow>
</asp:Table>
</div>
Try this for the CSS:
.CkbxFormat label {
display: block;
padding-left: 15px;
text-indent: -15px;
}
.CkbxFormat input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}
I think that will get you very close to what you want.
I have an ASP.Net Hyperlink with a set height. The text is rendered at the top left of it. How do I vertically center it (-the text)?
(In C# I'd have: label1.TextAlign = ContentAlignment.MiddleCenter; . How is it done in ASP.Net?)
Tried the following but it doesn't work (neither on FF nor on IE).
<form id="form1" runat="server">
<div>
<asp:HyperLink NavigateUrl="~/WebForm1.aspx" runat="server" CssClass="MyClass" BackColor="White"
Height="100px" Text="MyText" Width="200px" ></asp:HyperLink>
</div>
</form>
And:
.MyClass
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
Add the following styles to your HyperLink:
display:table-cell;
text-align:center;
vertical-align:middle;
If you are going to reuse that style is better to define a class:
<asp:HyperLink ... class="myClass" >HyperLink</asp:HyperLink>
and then in your stylesheet:
.myClass{
display:table-cell;
text-align:center;
vertical-align:middle;
}
Or add the styles inline:
<asp:HyperLink ... style="display:table-cell;text-align:center;vertical-align:middle;" >HyperLink</asp:HyperLink>
Add folowing attributes to the CssClass or the inline style:
{
display: table-cell;
vertical-align: middle;
line-height: 32px;
}
note that replace "32px" with your height of Hyperlink.
I'm looking for a straight forward css solution that will force labels to top align with their controls in asp. So for example:
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
Would appear something like:
Control Label
[[[[[]]]]]]]]]]]]V
Any ideas?
Wrap them both in a span or div:
<span class="field">
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
</span>
Then:
.field label,
.field select
{
display: inline-block;
vertical-align: top;
/* achieves same as inline-block for IE7 */
*display: inline;
*zoom: 1;
}
You can try putting them in a container, and apply specific styling for spans within that container. The example below might need a little tweaking, but it should point you in the right direction:
div.container span {
display: table-cell;
vertical-align: top;
}
div.container input {
display: table-cell;
vertical-align:middle;
}
And then on the page:
<div class="container">
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
</div>
I have two div's one has textbox in it and other just plain text. This is how it looks:
. I want to move text div which has language in it to the next line where arrow is showing in the pic. I searched every where cant find any solution the wordwrap is not working. Also i have to do this within css.
Here is the aspx code for both:
<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<asp:textbox id="box" runat="server"></asp:textbox>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
css:
#search
{
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
#txtBox
{
float: left;
}
Here is the solution for anyone who is stuck in same situation:
#text
{
clear: left;
}
clear:left moves the text to next line to the bottom of the textbox. Then you can use margin-left to set the text at any position you want.
You don't want to use float:left in this situation. float:left is for stacking block level HTML elements horizontally.
block level elements automatically stack vertically, which seems to be what you want.
However, the <asp:TextBox> is an inline level element, so you can put a <br /> after it, or wrap it in a <div>.
Solution:
HTML
<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<asp:textbox id="box" runat="server"></asp:textbox>
<br />
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
OR
<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<div>
<asp:textbox id="box" runat="server"></asp:textbox>
</div>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
CSS
.search-class
{ /* Curt is right, the ID="search" is in a naming container, */
/* so use class selector */
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
have you tryed doing:
clear:both on the div with the language?
and maybe you should contain the textbox
/* Containing floats */
.contain:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6 */
* html .contain {
height: 1%;
}
/* IE7 */
*:first-child+html .contain {
min-height: 1px;
}
When ASP.NET controls are rendered to the client, they sometimes produce different IDs (unless specified otherwise in ASP.NET 4).
Looking at your code, I don't see any control with an ID of txtBox, so these styles aren't being applied.
When working with ASP.NET, I find its best to use classes for styling, as these will stay the same after rendering.
<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False" CssClass="search">
<div id="txtBox">
<asp:textbox id="box" runat="server" CssClass="txtBox"></asp:textbox>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
.search
{
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
.txtBox
{
float: left;
}
I haven't tested this code, but you should now see these styles applying correctly, and therefore you can amend them as you wish.
I have this annoying problem where my validation controls refuse to be in the same line as my textboxes.
The one method was to create the controls in a table, but I was not interested in that technique. I attempted a few CSS techniques, but the results were constantly wrong.
I just want the asterisk to appear to the right of the textbox if the textbox does not contain a value.
Any recommendations?
The code is very simple:
<p>
<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">Username:</asp:Label>
<asp:TextBox ID="UserName" runat="server" CssClass="textEntrySmall"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" CssClass="failureNotification" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="LoginUserValidationGroup">*</asp:RequiredFieldValidator>
</p>
and the css:
input.textEntrySmall
{
width: 130px;
border: 1px solid #ccc;
}
input.passwordEntrySmall
{
width: 130px;
border: 1px solid #ccc;
}
Thank you.
In your css try these changes.
p{
display:table-row;
}
input, span, label{
display:table-cell;
}
If you have older browsers like IE6, IE7 then use this. It also works in modern browsers.
p {
white-space:nowrap;
}
try with:
p {
width: 100%;
}
.failureNotification {
width: 50px;
}
What also works is changing the asterisk in the validation control to a non-breakable space and then the asterisk...
thus, from:
<asp:RequiredFieldValidator [...SNIP...] >*</asp:RequiredFieldValidator>
To
<asp:RequiredFieldValidator [...SNIP...] > *</asp:RequiredFieldValidator>
Please remove AssociatedControlID attribute and you will be all set.