I have an ajax NumericUpDown extender like so:
<div style="float: left;">
<asp:TextBox ID="txtFixedCost" runat="server" CssClass="app_textbox" Width="100px"
Height="15px" Text="40" MaxLength="2" />
<asp:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server" TargetControlID="txtFixedCost"
Maximum="100" Minimum="0" Width="50" />
</div>
The problem is that the textbox/extender controls do not stay anchored on the page when it scrolls. They move along with the scrolling. How can I get these controls to stay put? Help is much appreciated, thanks.
Use position:fixed style for the outer 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
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>
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 am not sure what has happened here, but I have 3 panels, and these 3 panels are nested inside one large, thus:
<asp:panel id="pnlMain" runat="server" Height="60%" Width="100%">
<div id="div1">
<asp:panel id="panel1" runat="server" Height="100%" width="100"
scrollbars="vertical"/>
</div>
<div id="div2">
<asp:panel id="panel2" runat="server" Height="100%" width="100"
scrollbars="vertical"/>
</div>
<div id="div3">
<asp:panel id="panel3" runat="server" Height="100%" width="100"
scrollbars="vertical"/>
</div>
</asp:panel>
What is happening is that when I add my gridviews to these nested panels, the panel is just getting larger, the scroll bars are not scrolling, in other words the panels are stretching rather than their height staying fixed.
How do I fix this?
Thanks
Try changing your heights to a fixed number rather than 100%.
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