I use spaces to align labels but it didnt work properly.
I also put all labels into panels to align it horizontally.
my code look like this
<asp:Panel ID="Panel4" runat="server">
<asp:Label ID="Label4" runat="server" Text="Last Name"></asp:Label>
<asp:Label ID="Label6" runat="server" Text="First Name"></asp:Label>
<asp:Label ID="Label5" runat="server" Text="Middle Name"></asp:Label>
<asp:Label ID="Label14" runat="server" Text="Tuition"></asp:Label>
<asp:Label ID="lblTuition" runat="server" BorderWidth="1px" Width="75px"></asp:Label>
</asp:Panel>
Bro take a look and have a deeper understandin at this one because what others said it is hard to align in ASP.Net so I added a tag HTML in your code.
Here it is
Align controls properly
You can set the width on your control using the Width property (e.g. Width="150" for a 150-pixel-wide control), which in turn will create the corresponding inline CSS. This is the quick fix version.
If you want a more long-term approach, consider learning HTML5 and CSS. Here's a site that will give you the basics.
http://howtocodeinhtml.com/
Related
I have a RadGrid with attribute RenderMode set to Mobile.
It works just fine and you can scroll vertically fine if I add "rough" data into the ItemTemplate e.g.
<ItemTemplate>
<%# Eval("SomeData") %>
</ItemTemplate>
However, if I add some extra tags around the data e.g.
<ItemTemplate>
<div class="text-center">
<%# Eval("SomeData") %>
</div>
</ItemTemplate>
I can't scroll the data any longer as it behaves like I am dragging the whole control.
It also works fine if you use GridBoundColumn instead meaning, only when you add containers into the template column it stops scrolling on mobile devices. On desktops still works perfectly fine. Thank you
NOTE: I've checked and this question is not already answered. Thx
To further iterate on my comment, this is how I've dealt with templatecolumns and it's been very successful.
<telerik:GridTemplateColumn HeaderText="ID" AllowFiltering="True" runat="server" HeaderStyle-Width="2%"
HeaderButtonType="TextButton" CurrentFilterFunction="EqualTo" AutoPostBackOnFilter="True" ShowFilterIcon="False"
FilterControlWidth="100%" UniqueName="IDX_Actual" DataField="IDX_Actual" SortExpression="IDX_Actual"
GroupByExpression="IDX ID Group By ID">
<ItemTemplate>
<telerik:RadLabel ID="RlblIDX" runat="server" Text='<%# Bind("IDX_Actual") %>' UniqueName="RlblIDX" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
The label will then use the ItemStyle to align the text to the center of it's assigned width.
It's also inside a telerik-control, which by itself gives you further functionality that might (or might not) be nice to have later on.
Furthermore you would be able to set any specific styling-choices with the radlabel's CSSclass
Happy coding! :)
I have used a Label in a repeater control, which shows a tool tip. However, it is too small and is difficult to read. So I would like to change the format (apply css) to that tool tip.
Any ideas?
<td align="left" style="width: 145px">
<asp:Label ID="lblItem" Text='<%# Eval("Add1").ToString().Substring(0, Math.Min(Eval("Add1").ToString().Length, 20))+"..." %>'
ToolTip='<%# Eval("Add1")%>' runat="server" />
</td>
Use jQuery to show tool-tip, its best solution for this, see following link which can be help full to you.
Animated Tooltip Javascript this will be very useful, and surely its working because I had already used them.
When I make an asp button and asp textbox, then style them similarly, they differ in size by 4 pixels. Textboxes are apparently 4 pixels larger than everything else.
Does anyone have an idea of why?
<asp:TextBox ID="txtPassword" runat="server" CssClass="btn" TextMode="Password" />
<br />
<asp:Button runat="server" ID="btnSubmit" Text="Login" CssClass="btn"
onclick="btnSubmit_Click" />
The style has them at 100% width, but the same thing happens when I make them both the same width in pixels.
I have to create a web form in ASP.NET.
this is my HTML:
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="label" AssociatedControlID="DropDownList1"></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
</div>
<div>
<asp:Label ID="Label2" runat="server" Text="label" AssociatedControlID="TextBox1"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<div>
<asp:Label ID="Label3" runat="server" Text="" AssociatedControlID="Button1"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
Is this the most customizable HTML code by CSS?
Do you usually write a different markup?
Your HTML looks fine to me. I wouldn't personally use all those divs but I also don't know your exact requirements.
Some people consider a a form to be a list and will code it as:
<ul>
<li>
<label ... />
<input ... />
</li>
</ul>
I don't do it this way and it depends on how you wish to describe your data.
Untimately your main consideration is how you want to describe the data you're marking up. What is the most semantic way and how does that fit in with how you want to style the data. Usually there's a middle ground if you've considered both things well.
I would also consider grouping your form fields logically using a <fieldset>. This will give you something extea to hook into with your CSS also.
We created wrapper controls that do pretty much what you described. Each of our server controls emits a div with a specified class, a label (if label text is set) and the control itself.
We've found this to be the absolute cleanest way to get the markup we want when it goes to the client; and it results in non-table forms.
We also have several classes defined such as "row", "shortRow", etc. that set the appropriate width of the outer div and others which control the label and control width.
I have a GridView control (which renders to table, tr, td) with some BoundFields and TemplateFields. Essentially, I am displaying two columns, Application Name and Notes (as a TextBox), and I want 35%, 65% relative widths. Here is my asp.net markup:
<asp:GridView ID="gridRequestedApps" DataSourceID="llbRequestedApplications" runat="server"
AutoGenerateColumns="False"
DataKeyNames="ComputerID, RequestID"
EnableViewState="False"
cssclass="xGridview">
<Columns>
<asp:BoundField DataField="ComputerID" HeaderText="ID" SortExpression="ComputerID" Visible="False" />
<asp:BoundField DataField="RequestID" HeaderText="ID" SortExpression="RequestID" Visible="False" />
<asp:TemplateField HeaderText="Application Name" ItemStyle-Width="35%" ItemStyle-Wrap="false">
<ItemTemplate><asp:TextBox ID="ApplicationName" runat="server" Text='<%# Bind("ApplicationName") %>' CssClass="input_text"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Notes" ItemStyle-Width="65%">
<ItemTemplate>
<div style="width:100%; overflow:hidden">
<asp:TextBox ID="UserNotes" runat="server" Text='<%# Bind("UserNotes") %>' CssClass="input_text" style="overflow:hidden"></asp:TextBox>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Now at one point (with slightly different html than shown above), I did have the 35/65 relative widths working. However, I then noticed that if I put long text into the textbox, it was growing horizontally stretching its containing table past 100% width. (This is in IE7....in Firefox, the overflow:hidden seemed to be working).
So, I started messing with the CSS to try to fix the bug in IE, but now, not only does it still overflow, but my column widths are no longer respecting the 36/65 settings.
Before jQuery, try this first. I found it by googling "ie overflow:hidden table cell".
How to prevent HTML tables from becoming too wide
Using Javascript for styles usually isn't a good idea, especially if later on in the product's life another developer comes along and wants to, say, add a column. Agreed, sometimes hacking a solution together feels nicer in the short term, but it can only lead to headaches in the future.
just solved myself this problem, and I fell just...
Change document type definition to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
but care that other parts of the page don't start jumping around.