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.
Related
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/
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! :)
above is the attached image of checkbox rendering in internet explorer 8.
the code used is <asp:CheckBox runat="server" ID="selectCheckBox" />
while it renders perfectly in Firefox and in chrome the checkbox cannot be checked, any help would be better solving this rendering problem in different browsers.
thanks.
You did not define Text of checkbox.
<asp:CheckBox ID="selectCheckBox" runat="server" Text="Label" Checked="False" OnCheckedChanged="selectCheckBoxChanged" />
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.
ASP.net ajax 2.0
I've got a modalpopup extender that looks like this:
alt text http://img441.imageshack.us/img441/6342/localmodal.jpg
The actual modal popup is wrapped around a rounded corner extender to give it the nice curved look. Here is a simple snippet of code:
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnCancel" OkControlID="btnOk" TargetControlID="ibStartNow" PopupControlID="Panel2" PopupDragHandleControlID="PopupHeader" BackgroundCssClass="ModalPopupBG">
<asp:Panel ID="Panel2" style="display: none" runat="server">
<asp:Panel ID="Panel3" runat="server">
<div class="ConfirmationPopup" style="text-align:center; margin-right:auto;margin-left:auto;">
<div class="PopupHeader" id="PopupHeader">
Confirm Start Now<br />
</div>
<div class="PopupBody">
<br />
This will save the expense report header and allow
<br />
you to enter items into your expense report, are you sure?
<br />
<br />
</div>
<div class="Controls">
<asp:ImageButton ID="btnOk" runat="server" imageurl="~/images/ok.gif" CausesValidation="False" />
<asp:ImageButton ID="btnCancel" runat="server" imageurl="~/images/cancel.gif" />
</div>
</div>
</asp:Panel>
</asp:Panel>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server" TargetControlID="Panel3" Radius="6" Corners="All" BorderColor="#9BD1FA" Color="#377CB1">
</ajaxToolkit:RoundedCornersExtender>
The strange thing is on my local machine running IE8 it looks great, even on the server using firefox / chrome it looks great. But once it is on the server and I use IE8 it is no longer rounded it is basically a square.
It just doesn't make sense why locally using IE8 it works, but on the actual web server using IE8 it is no longer rounded, it looks like this:
alt text http://img441.imageshack.us/img441/2977/servermodal.jpg
My guess is you have probably moved on with this issue since this was so long ago but I stumbled across this http://www.mindfiresolutions.com/Workaround-for-Modal-Popup-with-RoundedCornerExtender-issue-833.php which seems to work for me. It looks like the trick is, in addition to using two panels, set the back color of the container panel to Transparent