asp:CheckBox - prevent text from wrapping below checkbox - asp.net

I have a Checkbox with text that is fairly lengthy as shown below. One thing we don't want is for the text to wrap below the checkbox. What I have done to fix this is to put spaces. Also not that part of the text is bold as well:
<asp:CheckBox ID="chkOption1" runat="server" /> <b><u>Option 1</u></b> - Attend in person. This is the best way to gain critical knowledge and express your thoughts and opinions.<br /> Ample time will be provided for individual discussions during breaks and at the networking reception.
Is there a way for the text not to wrap below the checkbox and still have the boldness in the text I need?
Note that I still want the text to wrap but not below the checkbox. Meaning it should wrap below the previous line's text.

From the moment you have the text outside of your check box you can warp it with a span and nowrap style as:
<span style="white-space: nowrap;">
<asp:CheckBox ID="chkOption1" runat="server" /> <b><u>Option 1</u></b> - Att ........
</span>
if you place your text inside the text of your check box, you can use the style attribute as:
<asp:CheckBox runat="server" ID="chkOption1" style="white-space: nowrap;" Text="too long text" />
The render html is the same.

This link describes a solution. In short:
do not use the CheckBox Text
rather, use an extra Label
set the CheckBox style float: left
set the Label style display: table

I just found a solution: the key is to use display:table and display:table-cell.
Here is the asp.net code:
<asp:CheckBox ID="..." runat="server" CssClass="mobilesubtitle" />
and here is the html code produced (relevant parts):
<span class="mobilesubtitle">
<input type="checkbox" name="..." id="...">
<label for="...">text</label>
</span>
All you need to do in css is:
span.mobilesubtitle {
display: table;
}
span.mobilesubtitle > input{
display: table-cell;
}
span.mobilesubtitle > label {
display: table-cell;
vertical-align: top;
}
inline-table also seems to work.

Related

Disabled label associated with checkbox using css selector

I want to disable the label associated with checkbox. The code snippets are below:
code:
<label for="label1" class="form-checkbox-left"><input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled>Name 1</label>
css :
.form-checkbox-left input[type=checkbox]:disabled {
color:#ccc;
}
Somehow it is not working.
Please help
You can opt to use the element+element Selector. You need to place the input before the label, however
input[type=checkbox]:disabled+label {
color: #ccc;
}
<input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled>
<label for="label1" class="form-checkbox-left">Name 1</label>
you can try to do with jquery using
if ($('label1'.hasAttribute('disabled')){
$('[for="label1"]').attr('disabled', 'disabled');
}
at [for="label1"] you can put the id of lable ("if you want to")
I have just double-checked with Firefox, and adding any sort of a style definition to a checkbox doesn't change any aspect of its appearance.
It seems that you are out of luck here and would have to take a different approach by hiding the checkbox itself (not with display: none;, but with visibility: hidden; instead) and then add auxiliary CSS to actually customize its appearance.
An example on how to do this can be found on http://cssdeck.com/labs/css-checkbox-styles
Maybe that helps you derive a method that suits you best.
EDIT
If you are attempting to style the parent label of the checkbox, you are out of luck, because parent element selectors are not implemented in CSS so far, although a proposal has been made (see https://shauninman.com/archive/2008/05/05/css_qualified_selectors for details).
EDIT 2
You could try this by moving the label definition behind the checkbox definition:
<input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled><label for="label1" class="form-checkbox-left">Name 1</label>
Then your CSS should look like this to facilitate the change:
input[type="checkbox"][disabled] + label {
color: #ccc;
}
This in turn modifies the text of your label.

css for textbox in asp

I want to write css for textbox in asp.I'm familiar with html,php. Struck to convert html css to asp css.
css for html input
input[type=text],textarea,select,input[type=password]{
float:right;
margin-right:20%;
width:155px;
}
I want to convert this to input boxes
<asp:textbox runat="server"></asp:textbox>
<asp:dropdownlist runat="server"></asp:dropdownlist>
You need to find something which has the type attribute equal to text in HTML
CSS
input:not([type]), input[type="text"] {
background: green;
}
or make the HTML explicit.
<input name='t1' type='text' id='txt1' />
Now you can customize the CSS attribute according to your requirement.
Hope it helps
You can use CssClass property and then style it as you require. For example
<asp:TextBox runat="server" ID="MyTextBox" CssClass="MyCss"></asp:TextBox>
and then style it using MyCss
Further info here

What is proper way to Center a Label element using CSS in a asp.net .master page

I am trying to put together a asp.net webforms website for a church fellowship organization and I am having to learn to work with building this website from scratch using Visual Studio Express 2013 for Web's Empty asp.net Website Template and since I have never done websites before, I am having to search through the Internet for examples, most of my programming experience comes from C# and I just don't seem to be able to find a solution for this.
Anyway my problem is that I can't figure out how to Center a asp.net Label on the SiteMasterPage.master
<div class="header1">
<br />
<br />
<h1 class="auto-style1">Calvary Christian FellowshipGA, Inc.</h1>
<div style="align-items: center">
<asp:Label ID="Label1" runat="server" CssClass="ccfgaLabel" ForeColor="#0066FF" Text="Calvary Christian FellowshipGA, Inc."></asp:Label>
</div>
<br />
<br />
<p>
Informational Text here.
</p>
<br />
<p>
More Informational Text here.
</p>
</div>
I've tried a couple things the above being the latest, the only thing I've found that actually worked was to use:
<center>
MY Label
</center>
the only issue with this use of 'center' is that I get the 'center' is deprecated warning. I would like to be able to do this correctly, could someone give me some suggestions how to get this done.
I tried the following from a .css file.
.ccfgaLabel
{
display: inline-block;
width: 230px;
/*margin-left: 10px;*/
margin-left: auto;
margin-right: auto;
}
The only thing that seemed to work in it were the
width: 230px;
and
margin-left: 10px;
I would like to set this up inside the css file since this is all gonna be on a MasterPage.
*Edit: I should point out that the only reason I decided to try a Label was that I wanted a Bordered and Shaded, Box aspect around the Text and I hadn't yet tried to see if bordering and shading was possible just around specific Text centered in the middle of the page.
So, since the comment worked, here's the posted answer.
Instead of your align-items that you set on the wrapper div, use the text-align property, that is used to specify the alignment of inline content:
<div style="text-align: center">
<asp:Label ID="Label1" runat="server" CssClass="ccfgaLabel" ForeColor="#0066FF" Text="Calvary Christian FellowshipGA, Inc."></asp:Label>
</div>
Though I recommend you not to set it as an inline style. Rather, give the div an id or a class and leave the property on the stylesheet.
MDN text-align docs

Bootstrap 3 Change display:block to another value

When I am looking at a checkbox based on Bootstrap 3 class "checkbox" in IE Development Tools the display is set to block, as:
display:block;
When I uncheck the box in front of the display:block it now has cross-over line. Now the checkbox looks exactly how I want. So I need to specify in the inline style the value for display that is equal to the crossed over display:block being unchecked. I tried different values for display in the inline style but nothing works. What do you suggest I set as the value for display in the inline style?
Here is the segment of the code:
<div class="checkbox" style="min-height:20px;padding-top:3px">
<asp:CheckBox ID="chkCloseWo" runat="server" CssClass="checkbox" />
</div>
Here is the HTML code:
<div class="checkbox" style="min-height:20px;padding-top:3px;display:inherit">
<span class="checkbox"><input id="MainContent_chkCloseWo" type="checkbox" name="ctl00 $MainContent$chkCloseWo" /></span>
</div>

How do you align Checkbox in HTML5/CSS

I'm trying to align my Checkbox with label to center in my little webpage I'm developing but I cannot figure out how, and yes I've googled!
You can view source on my webpage, http://www.sithhappens.net (Load the phone on your mobile though thats where all the CSS is done is for mobile view (Desktop view will come later).
And see the css at http://www.sithhappens.net/iphone.css
Not HTML5 but it works:
http://jsfiddle.net/gYCQz/
CSS:
input
{
display: inline;
}
body
{
text-align: center;
}
HTML4+:
<input type="checkbox" value="Test" /> Test
if u want check box in center use this
<div>
<input type="checkbox" value="Test" />
<div>
then u can use text-align(right,left,center) whatever u want.
also u can use
<div align="center">
</div>
and remove margin-bottom from all tag give width and height.

Resources