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
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>
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 simple ASP.NET form that Im using to learn some AJAX controls.
My code is:
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<div>
<div style="height: 300px; width: 250px; float: left; padding: 5px;">
<asp:Panel ID="Panel1" runat="server" Width="250px">
<asp:Panel ID="Panel2" runat="server" Width="40%" Height="20%" BorderWidth="1px"
BorderStyle="Solid" BorderColor="black">
Drag This Panel
</asp:Panel>
</asp:Panel>
</div>
</div>
<ajaxToolkit:DragPanelExtender ID="Panel1_DragPanelExtender" BehaviorID="DragP1"
DragHandleID="Panel1" TargetControlID="Panel1" runat="server">
</ajaxToolkit:DragPanelExtender>
</form>
My problem is that when I drag the Panel it doesn't stay where I leave it. It immediately moves back. shouldn't it stay where I leave it. I appreciate if I postback it will move back but I'm staying on the page incurring no new events.
Is this right?
Mike
I never used drag panel but I think there is something wrong with your markup.
Both the DragHandleID and TargetControlID are set to Panel1 which is wrong.
DragHandleID="Panel1" TargetControlID="Panel1"
According to the example on the Ajax site it's markup is http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/DragPanel/DragPanel.aspx
<ajaxToolkit:DragPanelExtender ID="DPE1" runat="server"
TargetControlID="Panel3"
DragHandleID="Panel4" />
In the above markup they have used different panels for the targetControlID and DragHandleID
so you should update your markup as
<ajaxToolkit:DragPanelExtender ID="Panel1_DragPanelExtender" BehaviorID="DragP1"
DragHandleID="Panel1" TargetControlID="Panel2" runat="server">
</ajaxToolkit:DragPanelExtender>
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