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;
Related
I am new to using Master Pages and have just set one up, but sometimes my data expands below my Content Place Holder Is their a way that I can set my Content Place Holder
Master Page Syntax
<form id="Form1" runat="server">
<asp:ScriptManager ID="sptScriptManager" runat="server"></asp:ScriptManager>
<div class="White" style="height: 14px;"></div>
<div class="main" id="divMain">
<asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div class="RGB123" style="height: 4px;"></div>
<div class="GRE" style="height: 300px;">
<div style="text-align: center;">
<asp:Label runat="server" ID="lblDataForToday" CssClass="BoldTextWhiteOpenSans"></asp:Label>
</div>
</div>
</form>
Page Usage
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
Big grid goes here
</asp:Content>
Below is the CSS referenced in the syntax below
CSS
.White
{
background-color: #ffffff;
padding: 0px 0px 0px 0px;
height: 40px;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 200px;
max-height: auto;
}
.RGB123
{
background-color: #618e1d;
background-repeat: repeat-x;
height: 55px;
}
.GRE
{
background-color: #333333;
padding: 0px 0px 0px 0px;
height: 20px;
}
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
aspx code
<asp:ModalPopupExtender ID="MPE" runat="server" BackgroundCssClass="modalBackground"
PopupControlID="pnlGame" CancelControlID="imgCloseBtn" TargetControlID="btnHidden">
</asp:ModalPopupExtender>
<asp:Button runat="server" ID="btnHidden" Style="display: none" />
<asp:Panel ID="pnlGame" runat="Server" CssClass="pnl">
<div class="MsgPopup">
<%--<fieldset class="">--%>
<table style="height: 100%; width: 100%;">
<tr>
<td colspan="2" style="padding-top: 5px; padding-left: 4px;">
<table border="0" class="" style="width: 500px;">
<tr>
<td align="center">
<img src="../img/exclaimationIcon.jpg" width="65px" height="56px" alt="" />
</td>
</tr>
<tr>
<td align="center">
<div id="GameName" style="font-size: medium; width: 500px; font-size: 17px; font-weight: bold;
font-family: Arial; color: Black; font-variant: normal">
Please select the Child, From and To Dates
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td align="center">
<asp:ImageButton ID="imgCloseBtn" runat="server" Height="38px" ImageUrl="~/img/okButton.jpg"
Width="91px" ToolTip="Close" CausesValidation="False" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</asp:Panel>
cs code:
ScriptManager.RegisterStartupScript(Page, this.GetType(), "TestInitPageScript031",
string.Format("<script type=\"text/javascript\">ShowReport();</script>"), false);
Javascript Code:
<script type="text/javascript">
function ShowReport() {
var Asgn1 = document.getElementById("<%=ddlAssignments.ClientID%>").value;
var Assn1 = document.getElementById("<%=ddlAssessment.ClientID%>").value;
var Asgn2 = document.getElementById("<%=ddlAssignments1.ClientID%>").value;
var Assn2 = document.getElementById("<%=ddlAssessment1.ClientID%>").value;
alert(Asgn1);
if (Asgn1 == 0)
{
$find('<%= MPE.ClientID %>').show();
return false;
}
}
</script>
Here is my brief code.Problem is my modal pop up is not displaying. I can trace by alret in alert i am getting 0; but modal pop up not displaying. Can anyone help me to resolve?
asp:ModalPopupExtender is a Server control.
If you want to show it you ave to post a server side Show() event; client side (javascript I mean) won't work.
If you need to work client side, using jQuery, you don't need a server side control: an hidden div set at the top of the window will be enough for you.
HTML
<div class="outerframe">
<div class="innerframe" >
...
CSS
.outerframe {
background: url('../Images/site-bg2.png');
width: 100%;
height: 100%;
position:absolute;
display:block;
text-align: center;
top: 0px;
left: 0px;
z-index: 1000;
}
.innerframe {
position: relative;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 1200px;
text-align: left;
overflow: auto;
background: #ffffff; /* Fills the page */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ffffff, #eeeeee); /* for firefox 3.6+ */
}
Set BehaviorID for modal popup extender..
<asp:ModalPopupExtender ID="MPE" runat="server" BackgroundCssClass="modalBackground"
PopupControlID="pnlGame" CancelControlID="imgCloseBtn" BehaviorID="PopUp"TargetControlID="btnHidden">
</asp:ModalPopupExtender>
Javascript:
<script type="text/javascript">
function ShowReport() {
var Asgn1 = document.getElementById("<%=ddlAssignments.ClientID%>").value;
var Assn1 = document.getElementById("<%=ddlAssessment.ClientID%>").value;
var Asgn2 = document.getElementById("<%=ddlAssignments1.ClientID%>").value;
var Assn2 = document.getElementById("<%=ddlAssessment1.ClientID%>").value;
alert(Asgn1);
if (Asgn1 == 0)
{
$find("<%=ModalPopupExtender1.BehaviorID%>").show();
return false;
}
}
</script>
Refer this for extra reading..
Helo I Have a css code like this :
.rounded {
border-collapse:separate;
border:solid black 1px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
and I call on page container on Aspx page:
<div runat="server" id="placeholder_5" class="sf_cols placeholder_5">
<div runat="server" style="border-style: groove; border-width: medium; float: left;
width: 100%; margin: 0; background-color: #C0C0C0;" class="sf_colsOut rounded">
<div runat="server" style="padding: 7px;" class="sf_colsIn">
<asp:ContentPlaceHolder ID="placeholder_5_widget_0" runat="server" />
</div>
</div>
</div>
but when i debug the web, only Firefox shows the rounded corner, the Chrome didn't change the view, i look over internet, and the said on chrome use :
-webkit-border-radius: 20px;
is there any solutions?
Chrome seems to be working ok. http://jsfiddle.net/cjTYs/
.rounded {
border-collapse:separate;
border:solid black 1px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
Are you still experiencing any issues?
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;
}