This is driving me crazy. I am using Visual Studio 2013. Basic Web Form. I want to put a title at the top of the page with some information grabbed from a database (two fields). It pulls the data fine but I have tried everything I can think of (and found on Google) and I CANNOT get the datalist to display in the horizontal center of the page.
Here is what I have:
<div class="jumbotron">
<h2>
<asp:DataList
id="DataList1"
DataSourceId="ds_NetInfo"
RepeatColumns="2"
Runat="server" class="text-center">
<ItemTemplate>
<%#Eval("netwk_Name")%>- <%#Eval("netwk_Desc")%>
</ItemTemplate>
</asp:DataList>
</h2>
</div>
I have tried divs, panels, css. I'm obviously missing something. This should not be that difficult. Any ideas would be appreciated.
Thanks!
Add the following style to your div, and then set the width of your DataList to 100%.
<div class="jumbotron" style="width:50%; margin: 0 auto;">
<h2>
<asp:DataList
id="DataList1"
DataSourceId="ds_NetInfo"
RepeatColumns="2"
Runat="server" Width="100%" class="text-center">
<ItemTemplate>
<%#Eval("netwk_Name")%>- <%#Eval("netwk_Desc")%>
</ItemTemplate>
</asp:DataList>
</h2>
</div>
Naturally you can also set these as CSS style items if you don't want to do it inline.
Try adding a CSS property (such as width) into the <div> opening tag. Adding it might aid in making it render as you want it to, depending on what is already influencing this from within your code (CSS sheets, parent elements, etc).
Such as:
style="width:75%; margin: 0 auto;"
In you code:
<div class="jumbotron" style="width:75%; margin: 0 auto;">
<h2>
<asp:DataList
id="DataList1"
DataSourceId="ds_NetInfo"
RepeatColumns="2"
Runat="server" Width="100%" class="text-center">
<ItemTemplate>
<%#Eval("netwk_Name")%>- <%#Eval("netwk_Desc")%>
</ItemTemplate>
</asp:DataList>
</h2>
</div>
Related
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
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?
I have the following Repeater control to display a list of elements.
<td id="tdLeftBlock">
<ul id="leftList">
<asp:Repeater ID="rptLatestListingsLeft" runat="server"
OnItemDataBound="rptLatestListingsLeft_OnItemDataBound">
<ItemTemplate>
<div id="divMapPinLeft" runat="server">
<asp:Label runat="server" ID="lblMapPinIndexLeft"></asp:Label>
</div>
<li id='<%# String.Format("liBusiness{0}", Eval("BusinessID")) %>'
style="padding-bottom: 30px">
<asp:HyperLink ID="lnkBusiness" runat="server">
<%# Eval("BusinessName")%>
</asp:HyperLink>
<div class="divAddressLeft"><%# Eval("City")%>, <%#
Eval("ProvinceCode")%></div>
<div id="divStatusLeft"><%# GetStatus(Eval("BusinessID"))%> |
<span class="statusTag"><%# GetDay(Eval("UpdateDate"))%></span></div>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</td>
Firefox and other non IE browsers understand that the div #divMapPinLeft must be rendered at the same level as its li sibling. IE, on the other hand, doesn't recognize this hierarchy and puts the div under the li in each Repeater item. Solutions are appreciated. Thank you.
You can't do it in such way. li is only allowed tag under ul, you have invalid html. You can't put div there. Put your div under li.
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