Here is my asp.net codes
<div class="output">
<div class="listbox">
<asp:ListBox ID="ListBox1" runat="server" Height="304px" Width="240px" ></asp:ListBox>
<asp:Label ID="Label1" runat="server" Text="."></asp:Label>
<asp:ListBox ID="ListBox3" runat="server" Height="100px" Width="240px"></asp:ListBox>
</div>
</div>
and here css style
.listbox {
width: 100%;
}
.output{
background-color:rgba(23, 23, 23, 0.71);
border: 2px solid grey;
width: 270px;
height: 540px;
position:absolute;
top:25%;
left:60%;
border-radius: 25px;
padding: 10px; }
I dont know why but on page inspecter it is left but on google chrome always aligned right.I have deleted history on chrome and check my code but couldnt find solution
Related
CSS
#outer
{
position: relative;
z-index: 3;
width: 100%;
margin: 0px auto 0 auto;
background: #ffffff;
box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.2);
float:inherit;
}
#main
{
display:inline;
position: relative;
padding: 0px 0px 0px 0px;
width: 100%;
}
#header
{
position: relative;
padding: 28px;
height: 125px;
background: #ffffff;
color: #ffffff;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
border-bottom: solid 1px #003B47;
}
#copyright
{
padding: 40px 0 80px 0;
text-align: center;
color: #777777;
}
HTML
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="outer">
<div id="header" style="background-color: lightgrey">
</div>
</div>
<div id="main">
<div id="sidebar" style="background-color: lightgrey">
<div id="menubar">
<h2>
Menu
</h2>
<ul class="linkedList">
<li>
<img id="img12" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
Server Search
</li>
<li>
<img id="img13" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
Service Status
</li>
<li>
<img id="img14" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
Data Records
</li>
</ul>
</div>
</div>
<div id="content">
<div class="box">
<h2>
Member Details
</h2>
<p>
<asp:UpdatePanel id="Up1" runat="server">
<contenttemplate>
Last Refreshed : <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><BR /><BR />
<asp:GridView id="gvMem_Details" runat="server" SkinID="Professional" OnRowDataBound="gvMem_Details_RowDataBound">
<RowStyle Width="500px"/>
</asp:GridView>
<asp:Timer ID="Timer1" runat="server" Interval="600">
</asp:Timer>
</contenttemplate>
</asp:UpdatePanel><br class="clear" />
</p>
</div>
<div class="box">
<h2>
Reservation Details
</h2>
<p>
<asp:UpdatePanel id="UpdatePanel1" runat="server">
<contenttemplate>
Last Refreshed : <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><BR /><BR />
<asp:GridView id="gvRes_Details" runat="server" SkinID="Professional" OnRowDataBound="gvRes_Details_RowDataBound">
</asp:GridView>
<asp:Timer ID="Timer2" runat="server" Interval="600">
</asp:Timer>
</contenttemplate>
</asp:UpdatePanel>
</p>
</div>
</div><br class="clear" />
</div><br class="clear" />
</div>
<div id="copyright">
© Company. Design by Technies.
</div>
</form>
I have to stretch my div based on the content inside... i have head, body and copyright(lower) divs... I want body div size should be of its dynamic contents.
I have a repeater control with an Image and a hyperlink one below the other. Everytime I add more than one line of text the text pushes the imahe control up. I wan the top of the images to be aligned horizontally and the text to continue downward if there is more than a line of text.
please advise.
Here is the ascx code I have used:
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<asp:UpdatePanel ID="UpdatePanelAnnouncements" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table>
<tr>
<asp:Repeater ID="repAnnouncements" runat="server">
<ItemTemplate>
<td style="padding-right:19px; padding-top:1px; padding-left:7px;">
<asp:HiddenField ID="ItemID" Value='<%#Eval("ID") %>' runat="server" />
<asp:HyperLink ID="hypImageEditLink" runat="server">
<div class="ImageStyle" >
<asp:Image ID="imgLink" Height="110px" Width="150px" runat="server" ImageUrl='<%#Eval("Images")%>' CssClass ="magnify"/>
</div>
</asp:HyperLink>
<br/><br/>
<div id="div3" class="Div3"><asp:HyperLink ID="hypTextEditLink" runat="server" Text='<%#Eval("Title")%>' CssClass="TitleStyle"/></div>
</td>
</ItemTemplate>
</asp:Repeater>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:View>
And here is the style sheet:
.div3
{
width: 150px !important;
display:inline !important;
/*display: -moz-inline-box !important;
display: inline-block !important; */
float:left !important;
}
.ImageStyle
{
margin-left:8px;
/* Width:150px !important; Height:110px !important;
box-shadow: 0px 0.5px 35px 15px #888888;*/
border-collapse: separate !important;
box-shadow: 0px 0.5px 11px 4px #888888;
/*box-shadow: 0px 0.5px 11px 4px rgb(150,150,150);*/
}
.ImageStyle:hover
{
opacity:0.5 !important;
filter: alpha(opacity=50) !important;
border-color:blue !important;
border-width:thick !important;
}
As I understand your question, when there is a lot of text underneath a picture it causes the rest of the pictures to align themselves vertically in the middle of their cells. To resolve this alter your TD tag to the following:
<td style="vertical-align: top; padding-right:19px; padding-top:1px; padding-left:7px;">
I'm trying to get a <asp:Label> to appear centered under a <asp:ImageButton>. Right now, the buttons are tied to objects in a List and so I have them all in a ListView control like this:
<asp:ListView ID="lv_WantedBooks" runat="server">
<ItemTemplate>
<asp:ImageButton ID="bookImageButton" runat="server" CssClass="BookImageButton" ImageUrl='<%# Eval("Image.ImageUrl") %>' OnClick="bookImageButton_Click" ToolTip='<%# Eval("Title") %>' CommandName='<%# Eval("Title") %>' />
<asp:Label ID="bookVoteCount" runat="server" Text='<%# Eval("Votes") %>' cssclass="VoteFont"/>
</ItemTemplate>
</asp:ListView>
For this, I have the following CSS:
.BookImageButton
{
padding: 25px 25px 25px 25px;
background: #625863;
height: 220px;
width: 182px;
}
.VoteFont
{
font-size: 1.8em;
color: #C3980D;
font-weight: bolder;
}
Right now, the <asp:Label> is appearing to the far right under the ImageButtons. I've been trying various CSS styles to get them centered under, but I've just not been able to get the CSS right.
Does anyone know how I can get the styling just right? Thanks A TON in advance! Also, this could be an issue with my Markup design/layout. I'm not opposed to changing that if necessary - I just figured the issue could be fixed via CSS.
Here is an example of what I mean and also the outputted HTML code that is created:
<p>
<input type="image" name="ctl00$MainContent$lv_WantedBooks$ctrl0$bookImageButton" id="MainContent_lv_WantedBooks_bookImageButton_0" title="Pride and Prejudice" class="BookImageButton" src="[blah, blah, this is correct in the output, trust me.]" />
<span id="MainContent_lv_WantedBooks_bookVoteCount_0" class="voteFont">1</span>
<input type="image" name="ctl00$MainContent$lv_WantedBooks$ctrl1$bookImageButton" id="MainContent_lv_WantedBooks_bookImageButton_1" title="Sense and Sensibility" class="BookImageButton" src="[blah, blah, this is correct in the output, trust me.]" />
<span id="MainContent_lv_WantedBooks_bookVoteCount_1" class="voteFont">1</span>
<br />
<div align="center"><h2><b>Don't See Your Choice? Enter it Below!</b></h2>
<input name="ctl00$MainContent$tb_NewBookTitle" type="text" id="MainContent_tb_NewBookTitle" style="height:20px;width:275px;" />
<br /></div>
</p>
Add the following to the .VoteFont
display: block;
[edit] based on your output...
Essentially I am wrapping imagebutton, span in their own divs. And wrapping both the divs in another div with the css class column. And span's parent div is styled to align the text to center.
CSS
.column {
float:left; position:relative;margin:5px;
}
Asp.net code
<div class="column">
<div>
<asp:ImageButton ID="bookImageButton" runat="server" CssClass="BookImageButton" ImageUrl="..." /></div>
<div style="text-align: center;">
<asp:Label ID="bookVoteCount" runat="server" CssClass="VoteFont" Text="1" /></div>
</div>
Resulting Html
<div class="column">
<div>
<input type="image" name="ctl00$MainContent$lv_WantedBooks$ctrl0$bookImageButton" id="MainContent_lv_WantedBooks_bookImageButton_0" align="bottom" title="Pride and Prejudice" class="BookImageButton" />
</div>
<div style="text-align: center">
<span id="MainContent_lv_WantedBooks_bookVoteCount_0" class="voteFont">1</span></div>
</div>
<div class="column">
<div>
<input type="image" name="ctl00$MainContent$lv_WantedBooks$ctrl1$bookImageButton" id="MainContent_lv_WantedBooks_bookImageButton_1" title="Sense and Sensibility" class="BookImageButton" />
</div>
<div style="text-align: center">
<span id="MainContent_lv_WantedBooks_bookVoteCount_1" class="voteFont">1</span>
</div>
</div>
Give .VoteFont a width and apply a margin to it. Margin auto will center it on the container.
.VoteFont {
font-size: 1.8em;
color: #C3980D;
font-weight: bolder;
width: 80px;
margin: auto;
}
Try adding
text-align: center;
to .VoteFont block
do this
.VoteFont
{
font-size: 1.8em;
color: #C3980D;
font-weight: bolder;
float: left;
display: block;
margin: auto;
}
this should do the trick
.VoteFont
{
font-size: 1.8em;
color: #C3980D;
font-weight: bolder;
position: relative;
left: -30px;
}
Try this:
.BookImageButton
{
padding: 25px 25px 25px 25px;
background: #625863;
height: 220px;
width: 182px;
margin-bottom: 25px;
}
.VoteFont
{
font-size: 1.8em;
color: #C3980D;
font-weight: bolder;
position: relative;
left: -157px;
display: inline-block;
margin-top: 50px;
}
If This wouldn't work try to replace
display: inline-block;
with
display: inline-table;
I'm using a ProgressBar as below:
<ajaxToolkit:ModalPopupExtender ID="mpeWait" runat="server" Drag="false" PopupControlID="pnlWaitDialog"
TargetControlID="btnDummy" EnableViewState="true" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<asp:Button runat="server" ID="btnDummy" Style="display: none;" />
<div id="pnlWaitDialog" runat="server"
style="display: none; background-color: Transparent; position: absolute;">
<div align="center">
<img src="Images/Loading.gif" alt="" />
</div>
</div>
Now, I need to show that if the DataSet (for the export to Excel) takes time to fill. Is it possible to show that?
I'm assuming that the DataSet is populated on some click event of some sort? Have you tried using the actual UpdateProgress control?
<asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
<ProgressTemplate>
<div id="overlay">
<div id="modalprogress">
<div id="theprogress">
<asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="/images/wait.gif" />
Please wait...
</div>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
Here's the CSS, if you need it:
#overlay {
position: fixed;
z-index: 99;
top: 0px;
left: 0px;
background-color: #f8f8f8;
width: 100%;
height: 100%;
filter: Alpha(Opacity=90);
opacity: 0.9;
-moz-opacity: 0.9;
}
#theprogress {
background-color: #fff;
border:1px solid #ccc;
padding:10px;
width: 300px;
height: 30px;
line-height:30px;
text-align: center;
filter: Alpha(Opacity=100);
opacity: 1;
-moz-opacity: 1;
}
#modalprogress {
position: absolute;
top: 40%;
left: 50%;
margin: -11px 0 0 -150px;
color: #990000;
font-weight:bold;
font-size:14px;
}
i have a page wherein i need to lock the screen when user clicks on the send email button, but everything is happening except i am unable to see my lock screen page. i have used the update progress for this purpose.. m posting part of the code here
.aspx part
<asp:UpdatePanel ID="SendMailUpdatePanel" runat="server">
<ContentTemplate>
<div style="float: right;">
<asp:Button ID="btnSend" runat="server" Text="Send" ToolTip="Send "
Visible="false" Font-Bold="True" OnClick="btnSendResume_Click" />
<asp:Button ID="btnDown" runat="server" Text="Download IDs" ToolTip="follow-up"
Visible="false" Font-Bold="True" OnClick="btnDownloadEmailIDs_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<table>
<td style="width: auto; vertical-align: top;">
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="SendMailUpdatePanel">
<ProgressTemplate>
<div id="blur" style="width: 100%; background-color: black; moz-opacity: 0.5; khtml-opacity: .5;
opacity: .5; filter: alpha(opacity=50); z-index: 120; height: 100%; position: absolute;
top: 0; left: 0;">
<div id="progress" style="z-index: 200; background-color: White; position: absolute; top: 0pt;
left: 0pt; border: solid 1px black; padding: 5px 5px 5px 5px; text-align: center;">
<b>Mail in progress.Please Wait...</b>
<br />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</table>
.cs part
protected void btnSendResume_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
}
rest of the part i have not mentioned here...any help
Your HTML Table is incorrectly formed. You have no <tr> elements, but the real problem probably lies with your style attributes, please see my updated code below.
You can find a good example of how to accomplish what you are trying to do here: http://blogs.visoftinc.com/2008/03/13/Modal-UpdateProgress-for-UpdatePanel-Revisited/
Try adjusting your code to the following:
<asp:UpdatePanel ID="SendMailUpdatePanel" runat="server">
<ContentTemplate>
<div style="float: right;">
<asp:Button ID="btnSend" runat="server" Text="Send" ToolTip="Send "
Visible="false" Font-Bold="True" OnClick="btnSendResume_Click" />
<asp:Button ID="btnDown" runat="server" Text="Download IDs" ToolTip="follow-up"
Visible="false" Font-Bold="True" OnClick="btnDownloadEmailIDs_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="SendMailUpdatePanel">
<ProgressTemplate>
<div id="blur" style="position:fixed; top:0px; bottom:0px; left:0px; right:0px; overflow:hidden; padding:0; margin:0; background-color:black; filter:alpha(opacity=50); opacity:0.5; z-index:1000;" />
<div id="progress" style="position:fixed; top:30%; left:43%; width:14%; z-index:1001; background-color:white; border:solid 1px black; padding:5px; text-align:center;">
<b>Mail in progress.Please Wait...</b>
<br />
<br />
</div>
</ProgressTemplate>
</asp:UpdateProgress>