I am pretty new to web work. I apologize if this question is trivial or overkilled. I did some searching for fieldset padding, but didn't see anything specific to this.
Here is what my window looks like in Chrome vs IE8.
Chrome: http://i.stack.imgur.com/rH7w0.png
IE8: http://i.stack.imgur.com/6v6kZ.png
As you can see, all of the padding has been completely thrown away.
<fieldset>
<legend>Refresh Settings</legend>
<table>
<tr>
<td class="AutoRefreshEnabled">
Auto-Refresh Enabled:</td>
<td class="AutoRefreshCheckbox">
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" oncheckedchanged="CheckBox1_CheckedChanged" />
</td>
<td class="AutoRefreshNumericTextbox">
<telerik:RadNumericTextBox ID="RadNumericTextBox1" Runat="server"
Label="Auto-Refresh Interval (Minutes):" MaxValue="60" MinValue="0"
ShowSpinButtons="True" Value="0" Width="225px" Enabled="False"
LabelCssClass="riLabel LabelDisabled">
<NumberFormat DecimalDigits="0" />
</telerik:RadNumericTextBox>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Tab Settings</legend>
<div>
<div class="FloatLeft">
<telerik:RadListBox ID="RadListBox1" runat="server" AllowDelete="True" AllowReorder="True"
EnableDragAndDrop="True" Skin="Web20" Height="95px"
onclientitemdoubleclicked="OnClientItemDoubleClicked"
onclientselectedindexchanged="OnClientSelectedIndexChanged"
Width="150px" AutoPostBack="True" AutoPostBackOnReorder="True"
onreordering="RadListBox1_Reordering" onclientload="OnClientLoad">
</telerik:RadListBox>
</div>
<div class="FloatRight">
<telerik:RadTextBox ID="RadTextBox1" Runat="server" EmptyMessage="Enter tab name" Skin="Web20" Width="150px">
</telerik:RadTextBox>
<div class="TabButton">
<telerik:RadButton ID="RadButton1" runat="server" onclick="RadButton1_Click" Skin="Web20" Text="Add Tab"
onclientclicked="OnButtonClicked">
</telerik:RadButton>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Tab Cycle Settings</legend>
<table>
<tr>
<td class="AutoCycleEnabled">
Auto-Cycle Enabled:</td>
<td class="AutoCycleCheckbox">
<asp:CheckBox ID="CheckBox4" runat="server" AutoPostBack="True" oncheckedchanged="CheckBox1_CheckedChanged" />
</td>
<td class="AutoCycleNumericTextbox">
<telerik:RadNumericTextBox ID="RadNumericTextBox2" Runat="server"
Label="Auto-Cycle Interval (Minutes):" MaxValue="60" MinValue="0"
ShowSpinButtons="True" Value="0" Width="225px" Enabled="False"
LabelCssClass="riLabel LabelDisabled">
<NumberFormat DecimalDigits="0" />
</telerik:RadNumericTextBox>
</td>
</tr>
</table>
</fieldset>
<div class="BottomButtons">
<telerik:RadButton ID="RadButton2" runat="server" Skin="Web20" Text="Apply" OnClientClicked="CloseAndSave" >
</telerik:RadButton>
<telerik:RadButton ID="RadButton3" runat="server" Skin="Web20" Text="Cancel" OnClientClicked="CloseAndCancel" >
</telerik:RadButton>
</div>
body
{
font-size: 12px;
font-family: "segoe ui",arial,sans-serif;
}
.LabelEnabled
{
color: Black !important;
}
.LabelDisabled
{
color: Gray !important;
}
.riTextBox
{
color: Black !important;
}
.AutoRefreshEnabled
{
width: 123px;
}
.AutoRefreshCheckbox
{
width: 20px;
}
.AutoRefreshNumericTextbox
{
width: 32px;
}
.AutoCycleEnabled
{
width: 123px;
}
.AutoCycleCheckbox
{
width: 20px;
}
.AutoCycleNumericTextbox
{
width: 32px;
}
.TimeframeRestricted
{
width: 314px;
}
.DataPointsShown
{
width: 314px;
}
.TimeframeCheckbox
{
width: 40px;
}
.DatapointsCheckbox
{
width: 40px;
}
.TimeframeDateTimePickers
{
width: 150px;
}
.FloatLeft
{
float: left;
}
.FloatRight
{
float: right;
padding-right: 55px;
}
.TabButton
{
text-align: left;
padding-top: 2px;
}
.BottomButtons
{
position: absolute;
left: 134px;
bottom: 13px;
}
Does anyone with more web development experience than I have an easy explanation for this issue? It would be much appreciated.
Thanks for your time.
it is an IE thing, and legend is the culprit a simpler fiddle with some "garish" coloring and forced padding shows the only fieldset that actually contains itself is the one without a legend - http://jsfiddle.net/eDtDh/
I have never used legend and I forgot why but I think this is the reason it's the same in IE7/6 etc.... you could build in your own legend via a heading element and relatively position it to look similar to a legend
Related
<EditItemTemplate >
<li style="">username:
<asp:Label ID="usernameLabel1" runat="server" Text='<%# Eval("username") %>' />
<br />
password:
<asp:TextBox ID="passwordTextBox" runat="server" Text='<%# Bind("password") %>' />
<asp:Button ID="btnClick" OnClick="btnClick_Click" runat="server" Text="Hide/Show" />
<br />
email:
<asp:TextBox ID="emailTextBox" runat="server" Text='<%# Bind("email") %>' />
<br />
phone:
<asp:TextBox ID="phoneTextBox" runat="server" Text='<%# Bind("phone") %>' />
<br />
dob:
<asp:TextBox ID="dobTextBox" runat="server" Text='<%# Bind("dob") %>' />
<br />
gender:
<asp:TextBox ID="genderTextBox" runat="server" Text='<%# Bind("gender") %>' />
<br />
<asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="Update" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Cancel" />
</li>
</EditItemTemplate>
For example, in Listview edit item template I want to add that button so how to access that button in code behind file as it is in Listview.
For displaying the Password, try the following Client-Side approach:
.wrapper {
display: inline-block;
position: relative;
}
.reveal-eye {
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
right: 1px;
top: 1px;
bottom: 1px;
z-index: 2;
width: 30px;
background: #fff url(https://dtzbdy9anri2p.cloudfront.net/cache/b55f544d09a0872a74b4427ce1fe18dd78418396/telerik/img/dist/reveal-password.png) 50% 50% no-repeat;
cursor: pointer;
visibility: hidden;
opacity: 0;
transition: opacity .2s ease 0s, visibility 0s linear .2s;
}
.reveal-eye.is-visible {
display: block;
visibility: visible;
opacity: 1;
transition: opacity .2s ease 0s, visibility 0s linear 0s;
}
<div class="wrapper">
<!--<asp:TextBox ID="passwordTextBox" runat="server" TextMode="Password" />-->
<input type="password" id="passwordTextBox" />
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
function checkShowPasswordVisibility() {
var $revealEye = $(this).parent().find(".reveal-eye");
if (this.value) {
$revealEye.addClass("is-visible");
} else {
$revealEye.removeClass("is-visible");
}
}
$(document).ready(function () {
var txtPassword = document.getElementById('passwordTextBox');
var $revealEye = $('<span class="reveal-eye"></span>')
$(txtPassword).parent().append($revealEye);
$(txtPassword).on("keyup", checkShowPasswordVisibility)
$revealEye.on({
mousedown: function () { txtPassword.setAttribute("type", "text") },
mouseup: function () { txtPassword.setAttribute("type", "password") },
mouseout: function () { txtPassword.setAttribute("type", "password") }
});
})
</script>
Example originates from: ShowPassword button for RadTextBox with TextMode Password
However, if you would like to do it on server-side during a PostBack, here is an example showing how to access the TextBox when the Button Show/Hide is clicked:
protected void btnClick_Click(object sender, EventArgs e)
{
Button btn = sender as Button;
TextBox TextBox1 = btn.Parent.FindControl("TextBox1") as TextBox;
TextBox1.TextMode = TextBox1.TextMode == TextBoxMode.Password ? TextBoxMode.SingleLine : TextBoxMode.Password;
}
You are developing a website, for any user interface interaction, you are strongly recommended to use javascript,css to manipulate it. Only use code behind to process data.
function toggleShowPassword() {
var passwordTextBox = document.getElementById('passwordTextBox');
if(passwordTextBox.getAttribute('type')=='text'){
passwordTextBox.type='password';
}
else {
passwordTextBox.type='text';
}
}
.button {
line-height: 100%;
display: inline-block;
padding: 7px 15px;
background: #6eddff;
text-decoration: none;
color: black;
border-radius: 6px;
}
.button:active,
.button:hover{
background: #3d9dba;
color: white;
}
<input id='passwordTextBox' type='password' value='abcd' />
<a class='button' href='#' onclick='toggleShowPassword(); return false;'>
Show/Hide Password</a>
Hi I am trying to change my CSS when the validators are not valid. I tried alot of things like changing it with CssClass in my validator, use javascript to change it or even with C# in the backend of the program. But it does not seems to work.
This is the CSS style and the part that has 3 * around it causes the color change of the text and buttom border
<style type="text/css">
.inlog {
display: block;
letter-spacing: 4px;
padding-top: 30px;
text-align: center;
}
.inlog .invoertext {
display:block;
***color: white;***
cursor: text;
font-size: 20px;
line-height: 20px;
text-transform: uppercase;
-moz-transform: translateY(-34px);
-ms-transform: translateY(-34px);
-webkit-transform: translateY(-34px);
transform: translateY(-34px);
transition: all 0.3s;
}
.inlog .invoertype {
background-color: transparent;
border: 0;
***border-bottom: 2px solid white;***
color: white;
font-size: 36px;
letter-spacing: -1px;
outline: 0;
padding: 5px 20px;
text-align: center;
transition: all 0.3s;
width: 200px;
}
.inlog .invoertype:focus {
max-width: 100%;
width: 400px;
}
.inlog .invoertype:focus + .invoertext {
color: whitesmoke;
font-size: 13px;
-moz-transform: translateY(-74px);
-ms-transform: translateY(-74px);
-webkit-transform: translateY(-74px);
transform: translateY(-74px);
}
.inlog .invoertype:valid + .invoertext {
font-size: 13px;
-moz-transform: translateY(-74px);
-ms-transform: translateY(-74px);
-webkit-transform: translateY(-74px);
transform: translateY(-74px);
}
</style>
This are my validators and textbox
<label id="Signin" class="Loginform">
<label class="inlog">
<asp:TextBox class="invoertype" ID="txtNaam" runat="server"></asp:TextBox>
<asp:Label class="invoertext" runat="server" Text="Voornaam"></asp:Label>
</label>
<asp:RequiredFieldValidator
CssClass="Errormsg"
runat="server"
ControlToValidate="txtNaam"
ErrorMessage="Naam is required"
ForeColor="Red"
ValidationGroup="Sigin">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator
CssClass="Errormsg"
runat="server"
ControlToValidate="txtNaam"
ErrorMessage="Voer geldige voornaam in"
ValidationExpression="^[a-zA-Z]{2,}$"
ForeColor="Red"
ValidationGroup="Sigin">
</asp:RegularExpressionValidator>
<label class="inlog">
<asp:TextBox class="invoertype" ID="txtemailsignin" runat="server"></asp:TextBox>
<asp:Label class="invoertext" runat="server" Text="Email"></asp:Label>
</label>
<asp:RequiredFieldValidator
class="Errormsg"
runat="server"
ControlToValidate="txtemailsignin"
ErrorMessage="Email is required"
ForeColor="Red"
ValidationGroup="Sigin">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator
ID="Errormsgid"
class="Errormsg"
runat="server"
ControlToValidate="txtemailsignin"
ErrorMessage="Voer geldig email adress in"
ValidationExpression="^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,6})+$"
ForeColor="Red"
ValidationGroup="Sigin">
</asp:RegularExpressionValidator>
<asp:CustomValidator
ID="Signinemailgebuik"
class="Errormsg"
runat="server"
ErrorMessage="Email is al in gebruik"
ForeColor="Red"
ValidationGroup="Sigin">
</asp:CustomValidator>
<label class="inlog">
<asp:TextBox class="invoertype" ID="txtPasswordsignin" runat="server" TextMode="Password"></asp:TextBox>
<asp:Label class="invoertext" runat="server" Text="Password"></asp:Label>
</label>
<asp:RequiredFieldValidator
class="Errormsg"
runat="server"
ControlToValidate="txtPasswordsignin"
ErrorMessage="Password is required"
ForeColor="Red"
ValidationGroup="Sigin">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator
class="Errormsg"
runat="server"
ControlToValidate="txtPasswordsignin"
ErrorMessage="Password does not meet requirements"
ValidationExpression="^.*(?=.{6,})((?=.*[!##$%^&*()\-_=+{};:,<.>]){1})(?=.*\d)((?=.*[a-z]){1})((?=.*[A-Z]){1}).*$"
ForeColor="Red"
ValidationGroup="Sigin">
</asp:RegularExpressionValidator>
<label class="inlog">
<asp:TextBox class="invoertype" ID="txtpasswordsignrepeat" runat="server" TextMode="Password"></asp:TextBox>
<asp:Label class="invoertext" runat="server" Text="Repeat password">
</asp:Label>
<asp:RequiredFieldValidator
class="Errormsg"
runat="server"
ControlToValidate="txtpasswordsignrepeat"
ErrorMessage="Password is required"
ValidationGroup="Sigin"
ForeColor="Red">
</asp:RequiredFieldValidator>
<asp:CompareValidator
class="Errormsg"
runat="server"
ControlToValidate="txtpasswordsignrepeat"
ControlToCompare="txtPasswordsignin"
Type="String" Operator="Equal"
ErrorMessage="Password not the same"
ForeColor="Red"
ValidationGroup="Sigin">
</asp:CompareValidator>
</label>
<label class="buttonplacement">
<asp:Button ValidationGroup="Sigin" class="btn-draw" runat="server" Text="Sign in" OnClick="Unnamed_Click" />
</label>
</label>
You see some diffrent with class and CSSClass in the validators that because I tried diffrent options if that would make a diffrence but all options doesn't seem to work.
The higligted parts in the image are the items that are changed with the color inside the Css and those I want to be red if the validator is not valid.
enter image description here
Thanks in advance
https://jsfiddle.net/L3cab2hd/
This is the best I can do but it doesn't seem to work and look the same
You can use the following snippet. It will check all Validators on the page and add or remove a CSS class based on the validity.
<script>
$(document).ready(function () {
ValidatorUpdateIsValid = function () {
Page_IsValid = AllValidatorsValid(Page_Validators);
checkValidators();
}
});
function checkValidators() {
for (i = 0; i < Page_Validators.length; i++) {
var inputControl = document.getElementById(Page_Validators[i].controltovalidate);
if (null != inputControl) {
WebForm_RemoveClassName(inputControl, "validation-summary-errors");
$("#" + inputControl.id).closest("label").removeClass("validation-summary-errors-label");
}
}
for (i = 0; i < Page_Validators.length; i++) {
inputControl = document.getElementById(Page_Validators[i].controltovalidate);
if (null != inputControl && !Page_Validators[i].isvalid) {
WebForm_AppendToClassName(inputControl, "validation-summary-errors");
$("#" + inputControl.id).closest("label").addClass("validation-summary-errors-label");
}
}
}
</script>
<style>
.validation-summary-errors {
border: 3px solid #ff0000 !important;
}
</style>
I have a Listview which consist of field called description(Which can be lengthy)
now i want to set read more and when user click on read more it should give full description in popup.
Code Designing :
<asp:ListView ID="listcourse" runat="server" >
<ItemTemplate>
<p >
<div>
<b>
<%# (Eval("Description").ToString().Length <=150)?Eval("Description").ToString(): Eval("Description").ToString().Substring(0, 150) + "...Readmore"%>
</b>
</div>
</p>
</ItemTemplate>
</asp:ListView>
C# Code :
public void bindList()
{
listcourse.DataSource = DB.Tbl_Categories_Master.Where(p => p.Deleted == true && p.Parent_Cat_id == 0);
listcourse.DataBind();
}
How can I ?
Since its MVC application and by default the template uses Bootstrap, I am giving you this solution.
Add this in your <script> tag.
$(function(){
$('div.popOverWrapper b').popover()
});
Also modify your HTMl div tag to have a class called popOverWrapper
<asp:ListView ID="listcourse" runat="server" >
<ItemTemplate>
<p>
<div class="popOverWrapper">
<b>
//....
</b>
</div>
</p>
</ItemTemplate>
</asp:ListView>
So technically what I am doing is to first mark my respective divs with a class name of my choice.. And later when the document is ready I will find this div and find the b tag within it and apply the bootstrap .popover() plugin
You can achieve this using Web service - Try this, It may help you.
---Web service code---
[WebMethod]
public string getFullDescription(int ID) {
string result = "";
using (SqlConnection con = new SqlConnection(#"Data Source=SANTOSH-PC\SQLEXPRESS;Initial Catalog=master;User ID=sa;Password=ssrana#317"))
{
SqlCommand com = new SqlCommand("select description from discriptionList where id="+ID+"", con);
con.Open();
SqlDataReader rdr = com.ExecuteReader();
if (rdr.Read())
{
result = Convert.ToString(rdr["description"]);
}
}
return result;
}
---.Aspx code---
<div>
<asp:ListView ID="lstView" runat="server" DataKeyNames="id" GroupItemCount="4" OnItemDataBound="lstView_ItemDataBound">
<EmptyDataTemplate>
<table>
<tr>
<td></td>
</tr>
</table>
</EmptyDataTemplate>
<GroupTemplate>
<tr id="ItemPlaceHolderContainer" runat="server">
<td id="ItemPlaceHolder" runat="server" style="text-align: center;"></td>
</tr>
</GroupTemplate>
<ItemTemplate>
<td id="Td1" runat="server" style="border: 2px solid #adbdc4; border-collapse: inherit; width: 20%">
<table style="width: 100%;">
<tr>
<td style="text-align: left; font-weight: bold; width: 100%; padding-left: 1px; height: 23px; vertical-align: top; font-size: 12px; color: black;">
<b style="text-decoration:underline">Title : <%#Eval("title") %></b>
<br />
<%#Eval("description") %>
<asp:LinkButton ID="lnkShowDescription" runat="server" Text="Read more.."></asp:LinkButton>
</td>
</tr>
</table>
</td>
</ItemTemplate>
<LayoutTemplate>
<table style="width: 100%; margin-left: 3px; background-color: #f2f2f2">
<tbody>
<tr>
<td>
<table id="GroupPlaceHolder" runat="server" style="width: 100%; height: 90%; text-align: center;">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<tr>
<td></td>
<td colspan="5">
</td>
</tr>
</LayoutTemplate>
</asp:ListView>
</div>
---I am using Script Manager for calling webservice in my project---
<asp:ScriptManager ID="scripMngr" runat="server" >
<Services>
<asp:ServiceReference Path="~/MyServices.asmx" />
</Services>
</asp:ScriptManager>
----- This is the popup div ------
<div class="PopBackground" id="dvBackground" >
<div id="NewPopUp">
</div>
<br />
<div style="height:30px; text-align:right;">
<asp:Button ID="btnClose" runat="server" Text="Close" OnClientClick=" return hidePopup();" Style="background-color: #fb7b3a; border: 1px solid #fb7b3a" />
</div>
</div>
--- This is .cs code----
protected void Page_Load(object sender, EventArgs e)
{
bindView();
}
protected void bindView()
{
using (SqlDataAdapter da = new SqlDataAdapter("select id,title,SUBSTRING(description,1,40) as description from discriptionList", new SqlConnection(#"Data Source=SANTOSH-PC\SQLEXPRESS;Initial Catalog=master;User ID=sa;Password=ssrana#317")))
{
DataSet ds = new DataSet();
da.Fill(ds);
lstView.DataSource = ds;
lstView.DataBind();
}
}
protected void lstView_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
LinkButton lnkShowDescription = (LinkButton)(e.Item.FindControl("lnkShowDescription"));
int id=Convert.ToInt32(lstView.DataKeys[e.Item.DisplayIndex].Value);
lnkShowDescription.OnClientClick="return getFullDescription('"+id+"')";
}
}
--- This is popup style---
#NewPopUp {
position: fixed;
width: 300px;
height:auto;
max-height:650px;
top: 20%;
left: 50%;
margin-left: -255px;
margin-top: -150px;
border: 2px solid #adbdc4;
background-color: white;
text-align: left;
padding: 10px;
Z-index: 1000;
font-family: Verdana;
font-size: 10pt;
border-radius: 7px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
color: black;
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
display:none;
}
.PopBackground {
position: fixed;
vertical-align: middle;
text-align: center;
z-index: 999;
top: 0px;
left: 0px;
background-color: gray;
filter: alpha(opacity=70);
opacity: 0.95;
margin: 0px 0px 0px 0px;
width: 100%;
height: 100%;
min-height: 100%;
min-width: 100%;
display:none;
}
</style>
----- This is Script ------
<script type="text/javascript">
function getFullDescription(Id) {
MyServices.getFullDescription(Id, onSuccess, onError);
return false;
}
function onSuccess(result) {
document.getElementById('NewPopUp').style.display = 'block';
document.getElementById('dvBackground').style.display = 'block';
document.getElementById('NewPopUp').innerHTML = "Description : "+result;
}
function onError(error) {
document.getElementById('NewPopUp').style.display = 'block';
document.getElementById('dvBackground').style.display = 'block';
document.getElementById('NewPopUp').innerHTML = "Error : " + error;
}
function hidePopup() {
document.getElementById('NewPopUp').style.display = 'none';
document.getElementById('dvBackground').style.display = 'none';
return false;
}
</script>
I am trying to display an address which includes the following information: Title, division, address1, address2, town/state/zip, and country (5 seperate lines worth of data). The problem is sometimes the company may only have the title, address1, and town/state/zip yet other times it may be all but address2. This is determined upon a db record request server side. Therefore how can I make my output look proper when some of my labels will be blank? I would like div's that contain an empty span to be essentially collapsed/removed. My only idea of how was to use jquery and a selector to find all divs with blank spans (since thats all an asp.net label really is) and then remove those divs however this seems like such bad form. Is there any way to do this with css? Possible Code would be something like: $('span:empty:only-child').parent('div').remove();
Picture Examples (Ignore spacing/indentation issues which I will fix)
Missing Division, Address2, and Country
All Possible Fields
The Html
<asp:Label runat="server" ID="lblBillingAddressHeader" CssClass="lblBillingAddressHeader" Text="Billing Address:" />
<div style="position:relative; top:150px; left: 113px;">
<div class="test">
<asp:Label runat="server" ID="lblBillingDivision" CssClass="lblBillingShippingDivisionFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress" CssClass="lblBillingShippingFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress2" CssClass="lblBillingShippingFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress3" CssClass="lblBillingShippingFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress4" CssClass="lblBillingShippingFont" />
</div>
</div>
The CSS
.test {
position: relative;
top: 0px;
left: 0px;
height: 12px;
width: 300px;
}
.lblBillingShippingDivisionFont {
font-size: small;
font-weight: bold;
}
.lblBillingShippingFont {
font-size: 10.6px;
}
Could you restruture your HTML?
HTML
<div style="position:relative; top:150px; left: 113px;">
<asp:Label runat="server" ID="lblBillingDivision" CssClass="lblBillingShippingDivisionFont" />
<asp:Label runat="server" ID="lblBillingAddress" CssClass="lblBillingShippingFont" />
<asp:Label runat="server" ID="lblBillingAddress2" CssClass="lblBillingShippingFont" />
<asp:Label runat="server" ID="lblBillingAddress3" CssClass="lblBillingShippingFont" />
<asp:Label runat="server" ID="lblBillingAddress4" CssClass="lblBillingShippingFont" />
</div>
CSS
.lblBillingShippingDivisionFont,
.lblBillingShippingFont {
position: relative;
top: 0px;
left: 0px;
width: 300px;
display: block;
}
.lblBillingShippingDivisionFont {
font-size: small;
font-weight: bold;
}
.lblBillingShippingFont {
font-size: 10.6px;
}
jsFiddle http://jsfiddle.net/LkFSV/
jQuery code:
$(document).ready(function(){
$('div').each(function() {
if ($(this).find('span').text() == '') {
$(this).hide();
}
});
});
http://jsbin.com/axaxut/1/edit
Unfortunately, there are no parent selectors in CSS. If there was, you could do something like:
span:empty:parent { display: none; }
Your best bets are the jQuery that you already have or to do it server side, I would personally say that server side is your best option.
Since this is asp.net code, you can check from server side code if the address2 is empty and simply hide the control.
if(string.IsNullOrEmpty(lblBillingAddress2.Text))
lblBillingAddress2.Visible = false;
I have a ModalPopupExtender set up on a page and working great. It's tied to a panel with some style attributes hardcoded into its tag. I'm trying to get all my styles out of my markup into CSS, but when I move these styles into a class, the popup fails to work. What's going on?
Styles in CSS:
.class1
{
border: solid 1px black;
display: none;
width: 700px;
height: 400px;
background-color: gray;
overflow: scroll;
}
.class2
{
background-color: White;
height: 90%;
width: 95%;
}
.backgroundClass
{
background-color: gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
Panel:
<asp:Panel ID="pnlModalContainer" runat="server" CssClass="class1">
<asp:Panel ID="pnlModalHandle" runat="server">
<table cellpadding="0" cellspacing="0" border="0" width="650px">
<tr>
<td>
Content Here |
<asp:Label ID="lblTitle" runat="server" Text=""></asp:Label>
</td>
</tr>
</table>
</asp:Panel>
<div style="padding-left: 25px;">
<table cellpadding="1" cellspacing="0" border="0" class="class2">
<tr valign="top">
<td>
<asp:UpdatePanel ID="udpPopups" runat="server">
<ContentTemplate>
...content here...
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr valign="bottom">
<td align="right" style="padding-bottom: 5px; padding-right: 5px;">
<asp:Button ID="btnModalOk" runat="server" Text="Ok" />
<asp:Button ID="btnModalCancel" runat="server" Text="Cancel" CausesValidation="false" />
</td>
</tr>
</table>
</div>
</asp:Panel>
And the MPE:
<cc1:ModalPopupExtender ID="mpeAction" runat="server" PopupControlID="pnlModalContainer"
TargetControlID="fakeButton" BackgroundCssClass="backgroundClass" DropShadow="false"
PopupDragHandleControlID="pnlModalHandle" RepositionMode="RepositionOnWindowResizeAndScroll" />
This is in ASP .NET 2.0. Set up like this, I see the background show up, but the popup doesn't come up. But if I move the contents of class1 down to the markup as a style, it works great. The popup gets shown via Javascript emitted from VB code-behind, using ScriptManager.RegisterStartupScript().
UPDATE: I've seen this on other controls too; AJAX toolkit controls seem to like their layout styles inline, not in a stylesheet. Why is this?
It's possible that the specificity of the styles in the stylesheet is lower than the specificity of the inline styles. Try adding !important to the end of each property value. As in:
.class1
{
border: solid 1px black !important;
display: none !important;
width: 700px !important;
height: 400px !important;
background-color: gray !important;
overflow: scroll !important;
}
...
If that changes things, then you need a "more specific" selector than ".class1".
See: CSS Specificity