I have Panel that needs to have a button beside it but have been unsuccessful in formatting it. Currently this is what I have.
<asp:Panel runat="server" CssClass="form" ID="panSomeParameters"></asp:Panel>
<asp:Button runat="server" CssClass="form" ID="btnSomeButton" Text="Button" />
Basically I need the Button in the blue area.
You just need to set your Panel display to "inline-block" as panel is rendered as Div and div is a block element so it will cover the whole row. I have set width and height also so panel will contain space on the view.
<asp:Panel runat="server" style="display:inline-block;width:100px;height:20px;" CssClass="form" ID="panSomeParameters"></asp:Panel>
<asp:Button runat="server" CssClass="form" ID="btnSomeButton" Text="Button" />
If it helps then accept the Answer.
You could give them both a class and set the float to left.
<div>
<asp:Panel ID="Panel1" runat="server" CssClass="float-left">
Contents
</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="float-left" />
</div>
<style>
.float-left {
float: left;
}
</style>
Related
I am Working With ASP VB.net in that I have A checkBox ,I want to change the Size Of that checkbox I added css to change but its not working the outer portion only get changing the rectangle remains same . can somebody help me ?
<asp:CheckBox ID="chkDate" width="83pt" runat="server" Height="20px"
style="text-align: right; font-size:small"
BorderStyle="None" autosize="false" size="250px" EnableViewState="False" />
Use CSS
<style type="text/css">
.BigCheckBox input {width:20px; height:20px;}
</style>
In asp.net,
<asp:CheckBox ID="CheckBox1" runat="server" CssClass="BigCheckBox" />
I have the following modal popup on a Asp.net/C# web application. The modal popup holds multiple placeholders. My problem occurs when I am trying to access the modal popup on small screens or on ipad/iphone/ipod screens. The page display the half of the modal popup so the information in the top are inaccessible. I have used overflow:auto;/ the following solution: Mobile ModalPopupExtender? and many others but doesn’t solved my problem.
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7; } .modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px; }
<asp:Panel ID="Panel1" runat="server"></asp:Panel>
<asp:Button ID="btnShowPopup" runat="server" style="display:none" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" PopupDragHandleControlID="Panel1" RepositionMode="None" runat="server" PopupControlID="pnlpopup"
TargetControlID="btnShowPopup" CancelControlID="btnCancel"
DropShadow="true"
BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
<asp:Panel ID="pnlpopup" runat="server" BackColor="LightGray" style="display:none;"
CssClass="modalPopup" Width="650px" >
<asp:UpdatePanel ID="UpdatePanel3" UpdateMode="Conditional" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnCancel" Height="30px" Width="160px" runat="server" Text="Cancel" />
</asp:Panel>
#focus: As I am using Jquery to attach ModalPopup to a button but code I used to check innerheight and then add class to my panel is:
var height = window.innerHeight;
if (height < 1000) {
$("#pnlpopup").addClass("PanelWithScroll");
}
You need to add above code in javascript and this need to be called on ModalPopupExtender click.
PanelWithScroll is a css class:
.PanelWithScroll{
height:250px;
overflow:scroll;
overflow-x:hidden;
}
Similarly, if you have problem with width too, you can check width too (http://responsejs.com/labs/dimensions/) and change class PanelWithScroll
Other thing you can do is check page height on page_load and if its less than what you want, add this class to pnlpopup Div. (This is easy solution IMO)
Update:
Add given javascript in your HTML Code in head section
$(document).ready(function () {
var height = window.innerHeight;
if (height < 1000) {
$("#pnlpopup").addClass("PanelWithScroll");
}
}
$(document).ready will only run after your page has wholly rendered. This may also help if you need help on how to put script in html (http://javascript.info/tutorial/adding-script-html)
<asp:RadioButton ID="RadioButton3" runat="server" Text="Test" />
Getting radio button text in the next line (below the radio button) and facing table alignment issues in default.aspx, but the same code works fine with other web form pages.
How to fix this?
You can use display: block; to display RadioButton's text in next line.
Please make sure other CSS rules are not overriding this.
<style type="text/css">
.radiobutton label { display: block; }
</style>
<asp:RadioButton ID="RadioButton3" runat="server" Text="Test"
CssClass="radiobutton" />
<asp:RadioButton ID="RadioButton1" runat="server" Text="Test"
CssClass="radiobutton" />
<asp:RadioButton ID="RadioButton2" runat="server" Text="Test"
CssClass="radiobutton" />
?
Need fixed Header Row from Vertical Scroll bar, because my GridView is very large.
Making 2 panels was my the best try (but also won't works) :
added :
<asp:Panel style="width:720px;" runat="server" ScrollBars="Horizontal">
<asp:GridView ID="GV3" runat="server" />
<br />
<asp:Label ID="justfortest" Text="11111" runat="server" />
<hr />
<asp:Panel style="max-height:400px;border-style: outset; border-width: 4px; "
ID=HGix runat="server" ScrollBars="Vertical">
<asp:GridView ID="GridView2" runat="server" CellPadding="4"
.........................
</asp:GridView>
</asp:Panel>
</asp:Panel>
why the horizontal line adds to second panel, it's ScrollBars="Vertical" but works as Both
Implementing a Fixed GridView Header in ASP.NET (Uses Panels)
Using jQuery
Stackoverflow
Freezing gridview header in a fixed width div
Table - fixed header, scrollable body, most robust/simple solution?
I have a Repeater control used to display uploaded images.
How can I show the images in the repeater horizontally? How can i give the caption to the bottom of picture in this?
assuming you have some code like this:
<asp:repeater ...>
</asp:repeater>
just inject "<itemtemplate>" with some html code with the look and feel you want to. nothing special about showing horizontal or vertical it just depends on what html tags you use inside item templates.
If you don't especially need a Repeater to do this, you can use a DataList instead and set the RepeatDirection="Horizontal"
how to display horizontal line after each row
<asp:DataList ID="dlstmovie" runat="server" onitemcommand="dlstmovie_ItemCommand" RepeatColumns="5" ItemStyle-CssClass="item1" RepeatDirection="Horizontal" onitemdatabound="dlstmovie_ItemDataBound" >
<ItemTemplate>
<asp:LinkButton ID="lnkimg" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>'>
<img src='<%=cinemaposter %><%#Eval("picturenm")%>' class="img" />
</asp:LinkButton>
<br />
<asp:LinkButton ID="lnkmovie" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>' Text='<%#(Eval("cinemanm").ToString().Length>10)?(Eval("cinemanm").ToString().Substring(0,10))+"":Eval("cinemanm").ToString()%>' CssClass="blacktext"></asp:LinkButton>
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="m1" CommandArgument ='<%#DataBinder.Eval(Container.DataItem,"cinemaid")%>' Font-Underline="false" CssClass="blacktext">...</asp:LinkButton>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="lblEmptyData" Text="No Data To Display" runat="server" Visible="false" CssClass="blacktext">
</asp:Label>
</FooterTemplate>
</asp:DataList>
You can build your ItemTemplate like:
<ItemTemplate>
<div class="floating">
<img src='<%# /* Code to Eval your image src from datasource */ %>' alt='' />
<span><%# /* Code to Eval your image caption from datasource */ %></span>
</div>
</ItemTemplate>
where the .floating class of the div is:
.floating { float:left; overflow:hidden; }
.floating img { display: block; }
I usually put a div for clear after a sequence of floating element, to reset the state of box model.
<div style="clear:both;"></div>
Depends on what you are using to display, i.e. if your pictures are in a div put float:left; on it, or use the DataList.
Like #numenor said in this other answer, it's just a matter of what html you use. Here, an example of how to acomplish what you need using html tables.
<table width="<%= this.TotalWidth %>">
<tr>
<asp:Repeater runat="server" ID="rptABC" OnItemDataBound="rptABC_ItemDataBound">
<ItemTemplate>
<td class="itemWidth">
Your item goes here and will be
displayed horizontally as a column.
</td>
</ItemTemplate>
</asp:Repeater>
</tr>
</table>
Note that the width is handled with a server side property TotalWidth that calculates the total width needed based on, of course, the count of items repeater will display. Creating a CSS class to define the width of each item is also recomended to ensure proper layout.
protected string TotalWidth
{
get
{
//In this example this.Madibu.Materiales is the datasource for the Repeater,
//so this.Madibu.Materiales.Count is the column count for your table.
//75 must be equal to the width defined in CSS class 'itemWidth'
return (this.Madibu.Materiales.Count * 75).ToString() + "px";
}
}