I have a div tag like in the following.
<div>
<asp:LinkButton runat="server" Text="aaaa" />
<asp:LinkButton runat="server" Text="bbbb" />
</div>
These two link buttons are placed one after the other, in the same line.
But I want them to be in two lines.
Any suggestions?
Another elegant way to achieve this-
<div>
<asp:LinkButton runat="server" Text="aaaa" />
</div>
<div>
<asp:LinkButton runat="server" Text="bbbb" />
</div>
The reason for this approach:
<br> is for content and...
<div> combined with CSS is for styling
Related
Put an element in the middle of the page using Bootstrap code?
<div class="container">
<asp:Label id="label1" runat="server" text="Place me in center of a page">
</asp:Label>
</div>
I have a form which holds multible labels and textboxes.
This form is centered in the page, and each labels are text-aligned to the left. It works as intended on firefox, jsbin, jsfiddle, but not on chrome. What am I doing wrong for it to not work on chrome?
Follows is the asp.net code
<asp:Panel ID="PNL_Order" runat="server" HorizontalAlign="Center" Visible="False">
<h1>Contact Details</h1>
<asp:Label ID="label001" runat="server" Text="Name (First/Last)<span style='color: red;'>*</span>" CssClass="labels"></asp:Label>
<asp:TextBox ID="TXT_Name" runat="server" TabIndex="1" type="text" Width="150px" />
<br />
<!-- Removed other textboxes for clarity and readability -->
<asp:Button ID="BT_confirmOrder" runat="server" TabIndex="5" Text="Confirm and send Query" Width="158px" />
</asp:Panel>
And here is the CSS linked to it:
.labels
{
width: 175px;
text-align: left;
display: inline-block;
}
In Firefox it displays as intended :
And Chrome not displaying as intended :
Even IE8 interprets it properly:
Footnote
I want to add also that on Firefox the labels are 175 pixels wide, while on Chrome they are 125 pixels wide, it doesn't follow the width specified either.
Try adding a div container inside the panel that holds the labels and textboxes:
<asp:Panel ID="PNL_Order" runat="server" Visible="False">
<h1>Contact Details</h1>
<div style="text-align: center;">
<asp:Label ID="label001" runat="server" Text="Name (First/Last)<span style='color: red;'>*</span>" CssClass="labels"></asp:Label>
<asp:TextBox ID="TXT_Name" runat="server" TabIndex="1" type="text" Width="150px" />
<br />
<!-- Removed other textboxes for clarity and readability -->
<asp:Button ID="BT_confirmOrder" runat="server" TabIndex="5" Text="Confirm and send Query" Width="158px" />
</div>
</asp:Panel>
I just found out what caused this problem with the comments made from deebs.
It appears that asp:Panel HorizontalAlign="Center" overrides any text-align (in boxes) made afterward.
The solution to that problem is to surround your centered area with a centered div :
<asp:Panel ID="PNL_Order" runat="server" Visible="False">
<div style="text-align:center;">
<!-- Your centered items with text-align=left -->
</div>
</asp:Panel>
This fixed it for Chrome.
I still find this weird to only bug in Chrome, any thought on why it was happening?
The markup below displays the panels one below the other. What I would like to do is display them right next to each other. Here is the markup:
<div>
<asp:Panel ID="pnlA" runat="server">
<img src="../images/A.png" />
<asp:Literal ID="litA" runat="server" Text="A"></asp:Literal>
</asp:Panel>
<asp:Panel ID="pnlB" runat="server">
<img src="../images/B.png" />
<asp:Literal ID="litB" runat="server" Text="B"></asp:Literal>
</asp:Panel>
</div>
The above currently displays it like so:
Image A
Image B
When in fact, I would like it like Image A Image B
The HTML rendered is pretty much the same as above, but the Panels are rendered as divs, so the structure without everything inside is:
<div>
<div></div>
<div></div>
<div>
A Panel renders in HTML as a div. The easiest way is to just use CSS to override the default behavior of divs.
<asp:Panel ID="pnlA" runat="server" style="display:inline;">
<img src="App_Themes/TicketDeskTheme/file.gif" />
<asp:Literal ID="litA" runat="server" Text="A"></asp:Literal>
</asp:Panel>
<asp:Panel ID="pnlB" runat="server" style="display:inline;">
<img src="App_Themes/TicketDeskTheme/file.gif" />
<asp:Literal ID="litB" runat="server" Text="B"></asp:Literal>
</asp:Panel>
This example uses the style attribute, which gets passed on straight to the HTML. You can use CssClass if you prefer to do it in a reusable stylesheet of course.
asp:Panel will render as a DIV, check out this answer and see if it works
Is there any way to change the default layout for Wizard Control?
There are a bunch of templates that come with various parts, such as the headertemplate, and various navigation templates that allow you to customise it to a certain extent.
http://msdn.microsoft.com/en-us/library/fs0za4w6.aspx
I suppose it depends on what you want to do.
Place the following <LayoutTemplate> tag inside of your <asp:Wizard> tag.
<asp:Wizard ...>
<LayoutTemplate>
<div class="headPlaceHolder">
<asp:PlaceHolder ID="headerPlaceHolder" runat="server" />
</div>
<div class="sidePlaceHolder">
<asp:PlaceHolder ID="sideBarPlaceHolder" runat="server" />
</div>
<div class="stepPlaceHolder">
<asp:PlaceHolder ID="WizardStepPlaceHolder" runat="server" />
</div>
<div class="navPlaceHolder">
<asp:PlaceHolder ID="navigationPlaceHolder" runat="server" />
</div>
</LayoutTemplate>
...
...
</asp:Wizard>
Source: http://msdn.microsoft.com/en-us/library/fs0za4w6.aspx
I am trying to nicely format contact screen in my aspx page using CSS. With the following code, I am unable to click into the txtEmailAddress. If I take out padding:100px from the txtSubject Span element, then I am able to click into txtEmailaddress and edit. please help...
<div>
<span>
Your Email Address :
</span>
<span style="padding:100px">
<asp:TextBox ID="txtEmailAddress" runat="server"></asp:TextBox>
</span>
<br />
<span>
Subject :
</span>
<span style="padding:100px">
<asp:TextBox ID="txtSubject" runat="server"></asp:TextBox>
</span>
<br />
</div>
i tried copying and pasting and experienced the same behaviour, i.e. with padding on the subject span i couldn't click into txtEmailAddress. I am running IE8 on vista SP1 if that helps at all. I also noticed that the text boxes were not aligned.
Whilst it doesn't answer your question, have you thought about using Label tag and styling these tags. The form will be more accessible this way. You can find out more about this approach on alistapart here:
Perhaps the following would suit your purposes better:
<fieldset>
<legend>Add a heading if you want one</legend>
<div>
<asp:Label id="lblEmail" runat="server" text="Your Email Address:" AssociatedControlID="txtEmailAddress">
</asp:Label>
<asp:TextBox ID="txtEmailAddress" runat="server"></asp:TextBox>
</div>
<div>
<asp:Label id="lblSubject" runat="server" text="Subject:" AssociatedControlID="txtSubject">
</asp:Label>
<asp:TextBox ID="txtSubject" runat="server"></asp:TextBox>
</div>
</fieldset>
You can then add your layout using CSS to the fieldset, label and input elements specifically, e.g.
fieldset label
{
margin-right: 2em;
width: 20em;
}
fieldset input
{
display: inline;
}
Or some variation thereof.