How to align text within a FooterTemplate cell in a GridView
I tried the following but the text is still centered (there is a parent center tag):
<FooterTemplate>
<span style="size:100%; padding:0; text-align: right">Total: </span>
</FooterTemplate>
In the parent column of the template try setting FooterStyle-HorizontalAlign="Right"
Maybe
<FooterTemplate>
<div style="text-align: right;">
<span>Total: </span>
</div>
</FooterTemplate>
works as you want.
Use display:block which replaces size:100% (which doesn't exist, AFAIK)
<FooterTemplate>
<span style="display:block; padding:0; text-align: right">Total: </span>
</FooterTemplate>
The Grid-view would in the end be rendered as a table itself hence, using basic CSS selectors, we can solve the problem, I used the following to fix the same problem that I was facing, hope it helps anyone else looking for this thread
tr:last-of-type td {
align-content: center;
vertical-align: middle;
text-align: center;
}
Hope that helped.
Related
I want to increase the space between two textboxes without using the line break. I've created a CSS rule but it has no effect when displaying the page.
These are the textboxes
<asp:Label ID="Discount" CssClass="textboxcontainer" runat="server" Text="Discount: "></asp:Label><asp:TextBox ID="TextBoxDiscount" runat="server"></asp:TextBox><br />
<asp:Label ID="TotalAfterDis" CssClass="textboxcontainer" runat="server" Text="Total : "></asp:Label><asp:TextBox ID="TextBoxTotal" runat="server"></asp:TextBox> <br />
I have this CSS rule in CSS file
div#page .textboxcontainer{
margin: 10px auto;
Any help is really appreciated
margin doesn't work on asp:label, since asp:label is rendered into span, which is an inline element
Try adding display:inline-block to your css rule.
Your <asp:Label> will render as an HTML span, which displays inline by default, causing top and bottom margin to be ignored. Add display: block or display: inline-block to your .textboxcontainer rule.
ASP Label controls render in a <span> tag at runtime. This is what is giving you trouble. Simply wrap the label and textbox control in their own div and you will get that block separation. Add a class to that div and give it a margin-bottom: XXpx and you are on your way
<div class="form-group">
<asp:Label ID="Discount" CssClass="textboxcontainer" runat="server" Text="Discount: "></asp:Label>
<asp:TextBox ID="TextBoxDiscount" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="TotalAfterDis" CssClass="textboxcontainer" runat="server" Text="Total : "></asp:Label>
<asp:TextBox ID="TextBoxTotal" runat="server"></asp:TextBox>
</div>
CSS
.form-group{
margin-bottom: 10px;
}
I want the hyperlink centered in the cell of GridView, this is the code for the grid column:
<asp:TemplateField HeaderText="Ticket#" ItemStyle-HorizontalAlign="Center" SortExpression="ows_ID">
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:Hyperlink ID="hlID" Target="_parent" runat="server" Text='<%# Bind("ows_ID")%>' Font-Underline="false"
NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</ItemTemplate>
</asp:TemplateField>
HorizontalAlign="Center" doesn't work, nor does ItemStyle-HorizontalAlign="Center". I have set style as described here and that doesn't work either. FYI, bootstrap is involved also. What am I missing? Some setting in the grid declaration? Please help.
In your CSS file, edit the style for td tag.
td
{
text-align: center;
}
GridView will be converted to table structure when rendered on webpage. So GridView takes styles of table
You can do it with css:
Here is a demo from this post: post
And you have to add a css class to the table cell and wrap your css into the class, otherwise it will align all td's that way!
td {
height: 100%;
}
a {
display: table;
position: relative;
height: 100%;
width: 100%;
background-color: yellow;
}
span {
display: table-cell;
text-align:center;
vertical-align: middle;
background-color: red;
}
This can achieve by two methods
1- try to use
< center >
< ItemTemplate >
' Font-Underline="false" NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</ItemTemplate>
< /center >
2- Or you simply goto view souce file of your webpage
try to find rendered html of hyperlink ....and then place your
< asp:Hyperlink >
inside a < span class="class1"> < /span >
< style > .class1 { text-align:center; }
< /style >
The only thing that worked was to place a div around the Hyperlink with alignment in the div.
<div style="text-align:center">
<asp:Hyperlink ID="hlID" Target="_parent" runat="server" Text='<%# Bind("ows_ID")%>' Font-Underline="false"
NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</div>
I have a Checkbox with text that is fairly lengthy as shown below. One thing we don't want is for the text to wrap below the checkbox. What I have done to fix this is to put spaces. Also not that part of the text is bold as well:
<asp:CheckBox ID="chkOption1" runat="server" /> <b><u>Option 1</u></b> - Attend in person. This is the best way to gain critical knowledge and express your thoughts and opinions.<br /> Ample time will be provided for individual discussions during breaks and at the networking reception.
Is there a way for the text not to wrap below the checkbox and still have the boldness in the text I need?
Note that I still want the text to wrap but not below the checkbox. Meaning it should wrap below the previous line's text.
From the moment you have the text outside of your check box you can warp it with a span and nowrap style as:
<span style="white-space: nowrap;">
<asp:CheckBox ID="chkOption1" runat="server" /> <b><u>Option 1</u></b> - Att ........
</span>
if you place your text inside the text of your check box, you can use the style attribute as:
<asp:CheckBox runat="server" ID="chkOption1" style="white-space: nowrap;" Text="too long text" />
The render html is the same.
This link describes a solution. In short:
do not use the CheckBox Text
rather, use an extra Label
set the CheckBox style float: left
set the Label style display: table
I just found a solution: the key is to use display:table and display:table-cell.
Here is the asp.net code:
<asp:CheckBox ID="..." runat="server" CssClass="mobilesubtitle" />
and here is the html code produced (relevant parts):
<span class="mobilesubtitle">
<input type="checkbox" name="..." id="...">
<label for="...">text</label>
</span>
All you need to do in css is:
span.mobilesubtitle {
display: table;
}
span.mobilesubtitle > input{
display: table-cell;
}
span.mobilesubtitle > label {
display: table-cell;
vertical-align: top;
}
inline-table also seems to work.
One of BoundField in my GridView has a very long string without space. I want to dispaly it correctly. According to the similar question.
I used the code
<asp:TemplateField HeaderText="ICD9" ItemStyle-Width="75px" SortExpression="ICD9" >
<ItemTemplate>
<div style="width: 75px; overflow: hidden; white-space: nowrap; word-wrap: break-word;">
<%# Eval("ICD9")%>
</div>
</ItemTemplate>
</asp:TemplateField>
Although it works, but when I switch it the Edit mode. The column can not be editted.The textbox doesn't show up.
Thanks.
Please look at the second column, it may has a long string.(Right now it is "None").
It can not be editted.
Inside your <TemplateField>, you also need an <EditItemTemplate>:
<asp:TemplateField HeaderText="ICD9" ItemStyle-Width="75px" SortExpression="ICD9" >
<ItemTemplate>
<div style="width: 75px; overflow: hidden; white-space: nowrap; word-wrap: break-word;">
<%# Eval("ICD9")%>
</div>
</ItemTemplate>
<EditItemTemplate>
<div style="width: 75px; overflow: hidden; white-space: nowrap; word-wrap: break-word;">
<asp:TextBox ID="TextBox1" runat="server"
Text='<%# Bind("ICD9") %>'></asp:TextBox>
</div>
</EditItemTemplate>
</asp:TemplateField>
This way, when your GridView goes into edit mode, it knows what to render for that field.
Without being able to see your other fields, it's possible they are working because they are simply <BoundField>s, which would have this behavior by default (when in the TemplateField, you have to explicitly define the edit and non-edit modes).
You can take a look at this (sort of old) tutorial for more information on TemplateFields: Using TemplateFields in the GridView control
I work on C# Asp.net
Main div
---- table
want to show this div on middle of the form.i want to build a login form.my table contain
User name:**(it's a lable,on browser it's broken like user
name : show why?)**
password:
<div id="main">
<table width="600px" border="1">
<tr>
<td>
<asp:Label ID="Label1" runat="server" CssClass="cssLabel" Text="User Name :"></asp:Label>
</td>
<td>
<asp:Label ID="Label2" runat="server" CssClass="cssLabel" Text="Password :"></asp:Label>
</td>
</tr>
</table>
</div>
want to show div on middle of the form? and why my lable text are going to broken how to solve it?
if u gone to google.com than you see text box take position on middle of the frame.i want this .i want my controls also take position on the middle of the frame.How to do that?
You can use this to show idiv n the middle of the form:-
<div style="margin-left:auto;margin-right:auto;">Put the controls here </div>
You've edited your question now so this doesn't give you the exact code you need, but would help you work it out / others who view your question with a similar problem. So here goes... you need
something like this:
<style type="text/css">
.wrp { width: 100%; text-align: center; }
.frm { text-align: left; width: 500px; margin: auto; border: 1px solid black; }
.fldLbl { white-space: nowrap; }
</style>
<div class="wrp">
<div class="frm">
<span class="fldLbl">User name:</span>
</div>
</div>
try this option, that is style the div with style="width:100%;text-align:center"