Multi line checkbox text formatting - asp.net

I have a checkbox with long text (about 5 or 6 lines). I'm trying to get the text indented and nicely aligned when it is wrapped. My current code works currently in IE but in Chrome, Safari, FireFox, the text is on a different line than the checkbox is. Does anyone know what I can be doing wrong here or have any other ways to accomplish this? Thanks for any help in advance!
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Info.ascx.cs"
Inherits="Project.Info" %>
<style type="text/css">
.CkbxFormat input
{
float: left;
}
.CkbxFormat label
{
display: inline-block;
}
</style>
<div style="margin-top: 10px; margin-left: 50px;">
<asp:Table ID="Table1" runat="server" Width="700px" CellSpacing="2" CellPadding="5"
Style="border: Solid 1px green;">
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="Label1" runat="server" Text="Information"></asp:Label>
</asp:TableCell></asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:CheckBox ID="CkBxInfo" runat="server" Text="The accessor of a property contains the executable statements associated with getting (reading or computing) or setting (writing) the property. The accessor declarations can contain a get accessor, a set accessor, or both. The body of the get accessor is similar to that of a method. It must return a value of the property type. The execution of the get accessor is equivalent to reading the value of the field. " CssClass="CkbxFormat"></asp:CheckBox>
</asp:TableCell></asp:TableRow>
</asp:Table>
</div>

Try this for the CSS:
.CkbxFormat label {
display: block;
padding-left: 15px;
text-indent: -15px;
}
.CkbxFormat input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}
I think that will get you very close to what you want.

Related

CSS Collapsing/Hiding divs with no data in <span>

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;

bring a <p> out of a div

It's an asp project with javascript and css. I have taken the java from this site JonDesign's SmoothGallery demo.
Now I want to put the tag p which has the summary inside, out of the div,
by the way here is the code:
<div id="myGallery">
<asp:Repeater ID="HeadLinesRepeater" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<div class="imageElement">
<h3><%# Eval("Title") %></h3>
<div>
<p><%# Eval("Summary") %></p>
</div>
<img class="full" src='<%# "/Img/news/" + Eval("ID") + ".jpg" %>' />
<img class="thumbnail" src='<%# "/Img/news/" + Eval("ID") + ".jpg" %>' style="width: 100px; height: 75px" />
</div>
</ItemTemplate>
</asp:Repeater>
</div>
CSS:
.jdGallery .slideInfoZone p {
float: right;
margin-bottom: 10px;
z-index: 1000000;
position: absolute;
margin-left: 92px;
width: 300px;
right: 670px;
top: 220px;
font-family: Tahoma;
font-size: 10pt !important;
text-align: justify;
color: white !important;
padding: 0;
font-size: 60%;
margin: 2px 5px;
color: #eee;
}
If I change position to the fixed it will be solved but ahen the I open the site in other resolution it would be unscrambled and goes to inside other divs.
It's my project for university please help me.
Just phisycally cut the <p><%# Eval("Summary") %></p> and paste it outside the div.
EDIT
What about styling the inner p with display:none, then create your own javascript (Do you have JQuery referenced in this page?) to grab all the paragraphs and append them elsewhere in the DOM.
But really it seams (from your comment) you need to change the javascript that manipulates the parent div to not depend on the inner paragraph, or change it to work with the paragraph in a different position in the DOM.

Updateprogress panel, CSS and removal of inline stlyes

This is driving me mental!!!
Ok, I have the following scenario - ModalPopupExtender used to display an UpdateProgress panel when AJAX is running. So I have the following:
<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress" >
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
<ProgressTemplate>
<div style="position: relative; top: 40%; text-align: center;">
<asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
<asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress"
BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress">
</ajaxToolkit:ModalPopupExtender>
Javascript to fire the thing when AJAX kicks ins:
<script type="text/javascript" language="javascript">
var ModalProgress = '<%= ModalProgress.ClientID %>';
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args) {
// shows the Popup
$find(ModalProgress).show();
}
function endReq(sender, args) {
// Hides the Popup
$find(ModalProgress).hide();
}
</script>
With the styling of :
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.50;
}
.updateProgress
{
float: right;
border-width: 1px;
border-style: solid;
background-color: #FAFAD2;
width: 250px;
height: 100px;
}
</style>
However, I cannot for the life of me get the updateProgress to float right or adjust position (just as an example).
Using the developer tools, I can see that some sort of inline style overides the CSS style.
How on earth can I get, for example, my updateprogress to float right?
If you're fighting against inline styles that you have no control over, this is one of those rare cases where the use of !important is actually justified:
Give this a try:
.updateProgress
{
float: right !important;
/* etc. */
}
If this doesn't work, try adding a clear:right, or using a more specific selector like:
#someElement .updateProgress {}
EDIT: Specificity in CSS selectors won't help against inline styles, so ignore that as a possible solution.
well I've ditch the style sheet and run with this:
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
<ProgressTemplate>
<div style="float: right; border-width: 1px; border-style: solid; background-color: #FAFAD2;
width: 250px; height: 100px;">
<div style="position: relative; top: 40%; text-align: center;">
<asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
<asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
It does the business so I'm happy for now :D

Aligning Validation Control with Textbox

I have this annoying problem where my validation controls refuse to be in the same line as my textboxes.
The one method was to create the controls in a table, but I was not interested in that technique. I attempted a few CSS techniques, but the results were constantly wrong.
I just want the asterisk to appear to the right of the textbox if the textbox does not contain a value.
Any recommendations?
The code is very simple:
<p>
<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">Username:</asp:Label>
<asp:TextBox ID="UserName" runat="server" CssClass="textEntrySmall"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" CssClass="failureNotification" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="LoginUserValidationGroup">*</asp:RequiredFieldValidator>
</p>
and the css:
input.textEntrySmall
{
width: 130px;
border: 1px solid #ccc;
}
input.passwordEntrySmall
{
width: 130px;
border: 1px solid #ccc;
}
Thank you.
In your css try these changes.
p{
display:table-row;
}
input, span, label{
display:table-cell;
}
If you have older browsers like IE6, IE7 then use this. It also works in modern browsers.
p {
white-space:nowrap;
}
try with:
p {
width: 100%;
}
.failureNotification {
width: 50px;
}
What also works is changing the asterisk in the validation control to a non-breakable space and then the asterisk...
thus, from:
<asp:RequiredFieldValidator [...SNIP...] >*</asp:RequiredFieldValidator>
To
<asp:RequiredFieldValidator [...SNIP...] > *</asp:RequiredFieldValidator>
Please remove AssociatedControlID attribute and you will be all set.

asp:button disappears in IE7, but stays in IE8. Why?

I have the following html which is display correctly in IE8. Below is the html and the css for grey_btn_75. Any idea why this would be happening?
<div style="float: left; width: 70px; margin-right: 25px; padding-top: 60px;
margin-left: 25px">
<asp:Button ID="btnAddAll" runat="server" Text="Add All"
OnClick="btnAddAll_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnAdd" runat="server" Text="Add"
OnClick="btnAdd_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnRemove" runat="server" Text="Remove"
OnClick="btnRemove_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnRemoveAll" runat="server" Text="Remove All"
CssClass="grey_btn_75"
OnClick="btnRemoveAll_Click" /><br />
</div>
CSS:
.grey_btn_75
{
background: url(../images/grey-75px.png);
background-repeat: no-repeat;
border-style: none;
font-family: Arial,Helvetica,Sans-Serif;
font-size: 12px;
font-weight: bold;
width: 75px;
height: 23px;
color: #000000;
cursor: pointer;
}
Things I have tried so far:
I removed the CssClass and the buttons still did not show up.
I modifed the CssClass and the buttons still did not show up.
I put other controls such as an asp:Label and and asp:ImageButton and they showed up fine.
I tried putting a new button and it did not show up.
Your div width is 70px, your button is 75px. You need to clean that up.
The problem is with the styles. Try commenting them out to see which one (or the combination) is responsible for the buttons to disappear.
Don't forget about the inline style of the top DIV as well.
This is a nice guide for button styles:
http://particletree.com/features/rediscovering-the-button-element/
People recommend
width:auto;
overflow:visible;
specifically for IE
I think it is the color value you have set in your CSS. I got the same problem previously and what I did was change the color value to something else.

Resources