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..
Related
I tried looking for similar questions but couldn't find any. My aspx file looks something like this
<div align="center" style="height: 350px; overflow-y: scroll; overflow-x: scroll; width: 100%;">
<asp:Table ID="tblReport" Font-Size="11px" runat="server" ViewStateMode="Enabled">
<asp:TableHeaderRow Height="30px" ForeColor="#FFFFFF" BackColor="#3b3b3b" Style="font-weight: bold; text-align: left !important; padding-left: 3px; color: #FFF; border-right: 1px solid #ddeaf7;" HorizontalAlign="Center">
</asp:TableHeaderRow>
</asp:Table>
</div>
Now whenever there are too many columns, the width gets fixed to 100% even though I don't have a max-width property. And the text in the cell ends up in multiple lines. I want it to horizontally overflow out of the div instead.
Edit: Looks like adding this ended up fixing it.
td {
white-space: nowrap;
}
Simple html snippet to demonstrate -
div {
width: 10%;
overflow: auto;
}
<div>
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</div>
EDIT -
Your updated code would look like -
<div align="center" style="height: 350px; overflow: auto; width: 100%;">
<asp:Table ID="tblReport" Font-Size="11px" runat="server" ViewStateMode="Enabled">
<asp:TableHeaderRow Height="30px" ForeColor="#FFFFFF" BackColor="#3b3b3b" Style="font-weight: bold; text-align: left !important; padding-left: 3px; color: #FFF; border-right: 1px solid #ddeaf7;" HorizontalAlign="Center">
</asp:TableHeaderRow>
</asp:Table>
</div>
today i have certain problem using user control (.ascx) in asp.net technology. currently, i have scenario where the ideas are to put modal jquery mobile modal into ascx. then save the data based on click. for this condition, i have this coding
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="IndexPanel1.ascx.cs" Inherits="WebPGN.Pages.control.indexPanel1" %>
<style>
.btn-size {
width: 50px !important;
}
</style>
<div>
<i class="icon-pencil"></i>
<div data-role="popup" id="myPopup" style="width: 1000px;" data-history="false">
<div class="modal-header">
<h4 style="font-family: '__Helvetica Neue LT Std_5'; font-weight: 500; font-size: 16px;"><i class="icon-edit"></i> Edit Information</h4>
Close
</div>
<div class="modal-body">
<div class="col-md-12">
<table class="table table-responsive" border="0" style="border-color: #FFFFFF;">
<tr class="form-group">
<td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 10%;">Header Text</td>
<td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 30%;">
<asp:TextBox runat="server" ID="txt_Panel1_Header_Eng" Visible="true" EnableViewState="true" ClientIDMode="Static" />
</td>
<td style="width: 3%; border-top: 0px solid #f4f4f4 !important;"></td>
<td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 10%;">Judul Teks</td>
<td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 30%;">
<asp:TextBox runat="server" ID="txt_Panel1_Header" ClientIDMode="Static" />
</td>
</tr>
<tr class="form-group">
<td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 10%;">Body Text</td>
<td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 30%;">
<textarea rows="6" cols="90" id="txt_Panel1_Body_Eng" runat="server" style="height: 250px;"></textarea>
</td>
<td style="width: 3%; border-top: 0px solid #f4f4f4 !important;"></td>
<td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 10%;">Konten Teks</td>
<td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 30%;">
<textarea rows="6" cols="90" id="txt_Panel1_Body" runat="server" style="height: 250px;"></textarea>
</td>
</tr>
<tr class="form-group">
<td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 10%;">Tag</td>
<td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 30%;">
<asp:TextBox runat="server" ID="txt_Panel1_Tag_Eng" ClientIDMode="Static"/>
</td>
<td style="width: 3%; border-top: 0px solid #f4f4f4 !important;"></td>
<td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 10%;">Label</td>
<td style="vertical-align: middle; border-top: 0px solid #f4f4f4 !important; font-family: '__Helvetica Neue LT Std_5'; font-weight: 300; width: 30%;">
<asp:TextBox runat="server" ID="txt_Panel1_Tag" ClientIDMode="Static"/>
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer" style="border-top: 0px solid #e5e5e5;" id="modal-footer">
<a class="btn btn-primary" href="#myPopup" data-rel="back" style="color: #fff;">Cancel</a>
<a class="btn btn-primary" href="#myPopup" ID="btnSaveHomePanel1" data-rel="back" runat="server" style="color: #fff;">Save</a>
</div>
</div>
</div>
for some reason, i want to use this ascx for example to send data to the server side. however, i have problem because when using asp.net button, the event doesnot fire back. can anyone give me more advice to accomplish this current condition. or should i use bootstrap modal rather than jquery mobile ui ? and how to use ascx as modal ? thank you very much :)
PS: i am using
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
you have to try bootstrap Modal like
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<asp:LinkButton ID="btn_SearchCriteria" runat="server" Text="Search Vehicles" data-toggle="modal" data-target="#myModal"><p class="btn btn-primary">Purchasing Tool</p></asp:LinkButton>
<div aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 style="font-size: 18px; font-weight: 600">Purchasing Tool and Analysis</h1>
<button type="button" class="close pull-right" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<asp:Panel ID="pnlSubItems" runat="server" CssClass="modalBox" Width="100%">
<asp:Repeater runat="server" ID="repVehicleInfo" OnItemDataBound="repVehicleInfo_ItemDataBound">
<ItemTemplate>
<ul class="media-list">
<li class="media">
<div class="media-left">
<img src="../../images/SystemImages/car-avatar.png" style="width: 250px; height: 200px" />
<br />
<asp:Label ID="lbl_stockno" runat="server" Style="font-weight: 600" Text='<%# Bind("StockNumber") %>'></asp:Label>
</div>
<div class="media-body">
<%--2001 Holden Astra TS 12/00-12/04--%>
<h1 class="media-heading" style="font-weight: 600">
<asp:Label ID="lbl_heading" runat="server" Text='<%# Bind("Description") %>'></asp:Label></h1>
<div class="col-sm-8">
<table class="table table-responsive">
<tr>
<td>Body Style:</td>
<td style="font-weight: 600">
<asp:Label ID="lbl_bodystyle" runat="server" Text='<%# Bind("BodyType") %>'></asp:Label>
</td>
</tr>
<tr>
<td>Engine:</td>
<td style="font-weight: 600">
<asp:Label ID="lbl_engine" runat="server" Text='<%# Bind("Engine") %>'></asp:Label>
</td>
</tr>
<tr>
<%-- <td>License No:</td>
<td style="font-weight: 600">
<asp:Label ID="lbl_linceno" runat="server"></asp:Label>
</td>--%>
<td>Transmission:</td>
<td style="font-weight: 600">
<asp:Label ID="lbl_transmission" runat="server" Text='<%# Bind("Engine") %>'></asp:Label>
</td>
</tr>
<tr>
<%-- <td>Reg No:</td>
<td style="font-weight: 600">
<asp:Label ID="lbl_regno" runat="server"></asp:Label>
</td>--%>
<td>Odometer:</td>
<td style="font-weight: 600">
<asp:Label ID="lbl_odometer" runat="server" Text='<%# Bind("Odometer") %>'></asp:Label>
</td>
</tr>
<tr>
<%-- <td>Color:</td>
<td style="font-weight: 600">
<asp:Label ID="lbl_color" runat="server"></asp:Label>
</td>--%>
<td>Purchased From:</td>
<td style="font-weight: 600">
<asp:Label ID="lbl_PurchasedFrom" runat="server" Text='<%# Bind("PurchasedFrom") %>'></asp:Label>
</td>
</tr>
<tr>
<td>Purchase Amount:</td>
<td style="font-weight: 600">$<asp:Label ID="lbl_PurchaseAmount" runat="server" Text='<%# Bind("PurchaseAmount") %>'></asp:Label>
</td>
</tr>
<tr>
<td>Sale Amount:</td>
<td style="font-weight: 600">$<asp:Label ID="lbl_SaleAmount" runat="server" Text='<%# Bind("SalesAmount") %>'></asp:Label>
<button id="lbtn_makemodel" href="#makemodel" type="button" class="btn btn-sm btn-primary pull-right" data-toggle="modal">
<i class="fa fa-cogs" aria-hidden="true"></i>Make/Model</button>
</td>
</tr>
<tr>
<td>Estimated Profit:</td>
<td style="font-weight: 600">
$<asp:Label ID="lbl_Estimatedprofit" runat="server" Text='<%# Bind("EstimatedProfit") %>'></asp:Label>
<button id="lbtn_anaylse" href="#anaylse" type="button" class="btn btn-sm btn-primary pull-right" data-toggle="modal"><i class="fa fa-pie-chart" aria-hidden="true"></i>Anaylse</button>
</td>
</tr>
<tr>
<td>App Price:</td>
<td style="font-weight: 600">
$<asp:Label ID="lbl_AppPrice" runat="server" Text='<%# Bind("PurchaseAmount") %>'></asp:Label>
</td>
</tr>
</table>
</div>
<div class="col-sm-4">
<asp:Repeater runat="server" ID="repPartsDetail">
<HeaderTemplate>
<ul class="list-group">
</HeaderTemplate>
<ItemTemplate>
<li class="list-group-item">
<asp:Label ID="lbl_Partname" runat="server" Text="Engine" />
<span class="badge">
$<asp:Label ID="lbl_partprice" runat="server" Text="0" Style="float: right;" />
</span>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</div>
</div>
</li>
</ul>
</ItemTemplate>
</asp:Repeater>
</asp:Panel>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
First of all add Bootstrap CSS and Bootstrap JS.
then Use this code
This code work for me. like when i click on linked button Bootstrap Modal Show
you can use this Webcontrol Any where and bind data on CodeBhind in ascx.cs file
This is what my page should look like, this is displayed in IE:
This is what it looks like in Firefox:
This is my code:
#using CustPortal.serviceclass
#model CustomerData
<br/>
<div class="leftdiv">
<fieldset>
<legend>Customer Info</legend>
#Html.Partial("CustomerInfo", Model)
</fieldset>
</div>
<div class="rightdiv">
<fieldset>
<legend>Balance</legend>
<div>
#Html.Partial("AccountBalance", Model)
</div>
</fieldset>
</div>
<div>
<table style="width: 100%" id="ThinLineTable">
<tr>
<th class="ThinLineTdLeft ThinLineTh" style="width: 15%">Date</th>
<th class="ThinLineTdLeft ThinLineTh" style="width: 15%">Refer#</th>
<th class="ThinLineTdLeft ThinLineTh" style="width: 30%">Description</th>
<th class="ThinLineTdRight ThinLineTh" style="width: 10%">Qty</th>
<th class="ThinLineTdRight ThinLineTh" style="width: 15%">Total</th>
<th class="ThinLineTdRight ThinLineTh" style="width: 15%">Balance</th>
</tr>
#foreach (var item in (IEnumerable<TransactionHistory>) ViewBag.TransactionHistory)
{
<tr>
<td class="ThinLineTdLeft">#item.TransactionDate</td>
<td class="ThinLineTdLeft">#item.ReferenceNumber</td>
<td class="ThinLineTdLeft">#item.Description</td>
<td class="ThinLineTdRight">#item.Quantity</td>
<td class="ThinLineTdRight">#item.Total</td>
<td class="ThinLineTdRight">#item.Balance</td>
</tr>
}
</table>
</div>
And my css:
.ThinLineTdRight {
padding: 5px;
border: solid 1px #d4d0d0;
text-align: right;
}
.ThinLineTdLeft {
padding: 5px;
border: solid 1px #d4d0d0;
text-align: left;
}
.ThinLineTh {
background-color: #e8eef4;
}
.rightdiv {
float: right;
width: 49%;
text-align: left;
}
.leftdiv {
float: left;
width: 49%;
text-align: left;
}
I'm not great with CSS, I'm still learning. Can anyone tell me what I am doing wrong to make it display differently in FF than in IE?
Thank you!
I am using the following HTML page to make an accordion control:
<!DOCTYPE >
<html >
<head >
<title></title>
<script language="JavaScript" type="text/javascript" >
function Show() {
document.getElementById("tdfirst").style.display = 'block';
}
function Hide() {
document.getElementById("tdfirst").style.display = 'none';
}
function Show2() {
document.getElementById("tdsecond").style.display = 'block';
}
function Hide2() {
document.getElementById("tdsecond").style.display = 'none';
}
function Show3() {
document.getElementById("tdthird").style.display = 'block';
}
function Hide3() {
document.getElementById("tdthird").style.display = 'none';
}
</script>
<style type="text/css">
.style1 {
width: 164px;
}
.style2
{
height: 98px;
}
.style3
{
width: 110px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr style="border-style: solid; border-width: thin; border-color: inherit;">
<div id="div1" >
<td class="style1"
style="border: thin solid #000000; text-align: right;">
<table><tr><td>Menu1</td><td class="style3">
<img alt="" onclick="Show()" src="Image/down%20arrow.jpg"
style="height: 15px; margin-left: 0px" /><img
alt="" onclick="Hide()" src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>
</div>
</tr>
<tr>
<div id="div2">
<td id="tdfirst" class="style2"
style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu1</td>
</div>
</tr>
</table>
<div>
<table>
<tr style="border-style: solid; border-width: thin; border-color: inherit;">
<div id="div3" >
<td class="style1"
style="border: thin solid #000000; text-align: right;">
<table><tr><td>Menu2</td><td class="style3">
<img alt="" onclick="Show2()" src="Image/down%20arrow.jpg"
style="height: 15px; margin-left: 0px" /><img
alt="" onclick="Hide2()" src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>
</div>
</tr>
<tr>
<div id="div4">
<td id="tdsecond" class="style2"
style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu2</td>
</div>
</tr>
</table>
<table>
<tr style="border-style: solid; border-width: thin; border-color: inherit;">
<div id="div5" >
<td class="style1"
style="border: thin solid #000000; text-align: right;">
<table><tr><td>Menu3</td><td class="style3">
<img id="imgdown" alt="" onclick="Show3()" src="Image/down%20arrow.jpg"
style="height: 15px; margin-left: 0px" /><img id="imgup"
alt="" onclick="Hide3()" src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>
</div>
</tr>
<tr>
<div id="div6">
<td id="tdthird" class="style2"
style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu3</td>
</div>
</tr>
</table>
</div>
</form>
</body>
</html>
When I try to display this HTML in a WebBrowser control, nothing appears and the control is blank.
XAML:
<phone:WebBrowser HorizontalAlignment="Left" Margin="0" VerticalAlignment="Top" x:Name="webBrowser1" Grid.Row="1" IsScriptEnabled="True" />
.cs:
webBrowser1.Navigate(new Uri("/Html_Pages/AboutUs.html", UriKind.Relative));
Can anyone see what I'm doing wrong? I'm using VS2012 and the WP8 emulator.
Hope This will help you. NavigateToString()
private void goNavigateToStringButton_Click(object sender, RoutedEventArgs e)
{
// Load HTML document as a string
Uri uri = new Uri(#"pack://application:,,,/HTMLDocumentWithoutScript.html", UriKind.Absolute);
Stream stream = Application.GetResourceStream(uri).Stream;
using (StreamReader reader = new StreamReader(stream))
{
// Navigate to HTML document string
this.webBrowser.NavigateToString(reader.ReadToEnd());
}
}
from : NavigateToString() method
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;