I have been trying to get the text strikeout when it is ticked in a check box. I have been looking on the web for the last two days and finally decided to post here for help.
Basically, I would like to build a to-do list app and when a task is ticked it gets striked through.
Any help would be highly appreciated.
Thanks.
Try Like This Plan CSS/HTML no JavaScript required.
.todo-box {
border: 1px solid gray;
border-width: 1px;
}
.todo-item {
padding: 4px 4px 4px 4px;
background: gold;
border-bottom: 1px dotted green;
}
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
input[type=checkbox]:checked+label.strikethrough {
text-decoration: line-through;
}
input[type=checkbox] {
border: 1px solid #333;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 20px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 20px;
}
<ul class="todo-box">
<li>
<div class="checkbox todo-item">
<input type="checkbox" name="packersOff" value="1" />
<label for="packers" class="strikethrough">001 Task Item</label>
</div>
</li>
<li>
<div class="checkbox todo-item">
<input type="checkbox" name="packersOff" value="1" />
<label for="packers" class="strikethrough">002 Task Item</label>
</div>
</li>
<li>
<div class="checkbox todo-item">
<input type="checkbox" name="packersOff" value="1" />
<label for="packers" class="strikethrough">003 Task Item</label>
</div>
</li>
</ul>
Fiddle
Assuming Windows Forms:
Open the form in the Windows Forms designer and add a checkbox.
Double-click the checkbox in the designer to add a handler.
In the handler, add the following code.
(assuming the checkbox is called checkBox1):
void checkBox1_CheckedChanged(object sender, System.EventArgs e)
{
checkBox1.Font = new Font(
checkBox1.Font,
checkBox1.Checked ? FontStyle.Strikeout : FontStyle.Regular);
}
Note that this does not dispose the old font handle, but code does not normally bother to do that.
Related
I am using css codes for custom radio button. If i use html codes everything is ok. But i am trying to use asp:RadioButton and it renders one more tag in label. So css code is not working that way. Any idea how to fix?
Custom RadioButton HTML Code (Works Fine):
<label class="container">
<input type="radio">
<span class="checkmark"></span>
</label>
RadioButton ASP.NET Renders in span tag. Output of HTML (Not Working):
<label class="container">
<span>
<input type="radio">
<label>Option One</label>
</span>
<span class="checkmark"></span>
</label>
Here is CSS Code
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
I've put your code into an aspx page.
I found that the span tag isn't closed:
<label class="container">
**<span>**
<input type="radio">
<label>Option One</label>
**<span>**
<span class="checkmark"></span>
</label>
I closed it and it doesn't work on my page either.
As I couldn't see why you would want to have that span tag I removed it. I have it like that:
<label class="container">
<input type="radio">
<label>Option One</label>
<span class="checkmark"></span>
</label>
It works on my page as I can select the Radio Button and it shows in blue as per your style code.
Hope this helps.
I have a foreach loop creating CheckBoxes, causing them to all have the same ID. I've got some CSS but when you check any box it puts the css onto the first iteration, how do I add some dynamic ID sort of thing to only add the css to the selected box?
Loop:
#foreach (var item in Model.Where(p => p.UserTable.ID == ViewBag.UserTableID))
{
<tr>
<td>
<div class="select">
<input type="checkbox" id="select" name="" />
<label for="select"></label>
</div>
css:
.select {
width: 20px;
position: relative;
}
.select label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
background: #eee;
border: 1px solid #ddd;
}
.select label:after {
opacity: 0.2;
content: '';
position: absolute;
width: 9px;
height: 5.5px;
background: transparent;
top: 4.8px;
left: 5.4px;
border: 3px solid #333;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.select label:hover::after {
opacity: 0.5;
}
.select input[type=checkbox]:checked + label:after {
opacity: 1;
}
Why not just assign each element their item's ID?
<div class="select">
<input type="checkbox" id="select_#item.ID" />
<label for="select"></label>
</div>
Unless you have duplicates in that list, they'll always be unique.
By the way: your View shouldn't be filtering out items, it should be given only the items it needs (that Where should be done at the database level)
I've a input list. I've bind the data items from my code behind page. But the items are not showing in drop down but the items are shown in webdeveloper tools.
Please see the attached figure. In the text box when I type "a" no items are displayed, but when I debug the UI using web developer tool, the items are shown there.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Sample.aspx.cs" Inherits="Sample" MasterPageFile="AdminMaster.master" %>
<asp:Content ID="UserContent" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
<style>
.content {
min-height: 250px;
padding: 15px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.box {
position: relative;
border-radius: 3px;
background: #ffffff;
border-top: 3px solid #d2d6de;
margin-bottom: 20px;
width: 100%;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.box.box-default {
border-top-color: #d2d6de;
}
.box-title {
display: inline-block;
font-size: 18px;
margin: 0;
line-height: 1;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
/*.fa-tag:before {
content: "\f02b";
}*/
.box-header.with-border {
border-bottom: 1px solid #f4f4f4;
}
.box-header {
color: #444;
display: block;
padding: 10px;
position: relative;
}
.form-horizontal .form-group {
margin-left: -15px;
margin-right: -15px;
}
.box-body {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
padding: 10px;
}
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: right;
}
.form-control {
display: block;
width: 50%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.form-control::-moz-placeholder {
color: #999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color: #999;
}
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 700;
}
.input_text {
width: 80%;
text-transform: uppercase;
}
</style>
<div class="content">
<div class="box box-default ">
<div class="box-header with-border">
<h3 class="box-title"><i class="fa fa-tag"></i>Student Registration</h3>
</div>
<div class="form-horizontal">
<div class="box-body">
<div class="form-group">
<label for="inputName" class="col-md-1 control-label">Name</label>
<div class="col-md-8">
<input type="text" class="form-control input_text" id="inputName" placeholder="NAME" />
</div>
</div>
<div class="form-group">
<label for="inputRoll" class="col-md-1 control-label">Roll Number</label>
<div class="col-md-8">
<input type="text" class="form-control input_text" id="inputRoll" placeholder="ROLL" />
</div>
</div>
<div class="form-group">
<label for="inputAddress" class="col-md-1 control-label">Gender</label>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" name="clouds" id="Clear" value="clear" checked="checked" />
Male
</label>
<label class="radio-inline">
<input type="radio" name="clouds" id="Cloudy" value="cloudy" />
Female
</label>
</div>
</div>
<div class="form-group">
<label for="inputAddress" class="col-md-1 control-label">Class</label>
<div class="col-md-8">
<input list="fruits" runat="server" />
<datalist id="fruits" runat="server"></datalist>
</div>
</div>
<div class="form-group">
<label for="inputAddress" class="col-md-1 control-label">Address</label>
<div class="col-md-8">
<input type="text" class="form-control input_text" id="inputAddress2" placeholder="Email" />
</div>
</div>
</div>
</div>
</div>
</div>
</asp:Content>
code behind page code
protected void Page_Load(object sender, EventArgs e)
{
DataTable table = new DataTable();
table.Columns.Add("fruits");
table.Rows.Add("apple");
table.Rows.Add("banana");
table.Rows.Add("pineapple");
table.Rows.Add("mango");
table.Rows.Add("watermelon");
table.Rows.Add("lemon");
table.Rows.Add("guava");
table.Rows.Add("jackfruit");
var builder = new System.Text.StringBuilder();
for (int i = 0; i < table.Rows.Count; i++)
builder.Append(String.Format("<option value='{0}'>", table.Rows[i][0]));
fruits.InnerHtml = builder.ToString();
}
The problem is that the datalist ID generated by ASP.NET is not fruits but ContentPlaceHolder1_fruits.
You should first give the input an ID, so you can access it from the code behind.
<input list="fruits" runat="server" id="fruitsInput" />
And then from the code behind set the right datalist ID
fruitsInput.Attributes["list"] = fruits.ClientID;
So your markup should look like this
<div class="col-md-8">
<input list="fruits" runat="server" />
<datalist id="fruits" runat="server"></datalist>
</div>
And you code behind like this
protected void Page_Load(object sender, EventArgs e)
{
DataTable table = new DataTable();
table.Columns.Add("fruits");
table.Rows.Add("apple");
table.Rows.Add("banana");
table.Rows.Add("pineapple");
table.Rows.Add("mango");
table.Rows.Add("watermelon");
table.Rows.Add("lemon");
table.Rows.Add("guava");
table.Rows.Add("jackfruit");
var builder = new System.Text.StringBuilder();
for (int i = 0; i < table.Rows.Count; i++)
builder.Append(String.Format("<option value='{0}'>", table.Rows[i][0]));
fruits.InnerHtml = builder.ToString();
fruitsInput.Attributes["list"] = fruits.ClientID;
}
What I'm trying to do is make a list item visible when the Admin logs in within the navigation section. I am unable to use the AD so I can use roles so I'm using SQL server to to control which users have access to what. I found a way to make the list item visible once that admin logs in, but to do so, I had to use runat="server" within the unordered list. Once I use this, the css formatting that I use for the navigation is no longer. How am I able to fix this problem and achieve what I would like to do? This is my code within the master page..
<section runat="server" id="login">
<asp:LoginView id="loginview" runat="server" ViewStateMode="Disabled">
<LoggedInTemplate>
<p id="paragraph">
Welcome,
<asp:LoginName ID="loginName" runat="server" CssClass="username" />
</a>!
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/Account/Login.aspx" />
<ul runat="server" id="menu">
<li>Dashboard</li>
<li><a runat="server" href="~/DeliveredDeals.aspx">Delivered Deals</a></li>
<li><a runat="server" href="~/DealTracking.aspx">Deal Tracking</a></li>
<li><a runat="server" id="allUsers" href="~/Users.aspx" visible="false">Users</a></li>
</ul>
</p>
</LoggedInTemplate>
</asp:LoginView>
</section>
This is how I have it set up. Once I remove the runat="server" from the <ul> I'm no longer able to view the new list item (allUsers) but the formatting is back. Any suggestions are appreciated. Thanks you.
Here is the css..
/* login
----------------------------------------------------------*/
#login {
display: block;
font-size: .85em;
margin: 0 0 10px;
text-align: right;
}
#login a {
background-color: #d3dce0;
margin-left: 10px;
margin-right: 3px;
padding: 2px 3px;
text-decoration: none;
}
#login a.username {
background: none;
margin-left: 0px;
text-decoration: underline;
}
#login ul {
margin: 0;
}
#login li {
display: inline;
list-style: none;
}
/* menu
----------------------------------------------------------*/
ul#menu {
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: right;
}
ul#menu li {
display: inline;
list-style: none;
padding-left: 15px;
}
ul#menu li a {
background: none;
color: #999;
text-decoration: none;
}
ul#menu li a:hover {
color: #333;
text-decoration: none
}
Since you use runat="server", the ID will be modified via ASP.NET resulting in your css issue. You should change your ul to use a class instead of styling it based on the id.
<ul runat="server" class="menu">
<!--Html-->
</ul>
Css:
/* menu
----------------------------------------------------------*/
ul.menu {
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: right;
}
ul.menu li {
display: inline;
list-style: none;
padding-left: 15px;
}
ul.menu li a {
background: none;
color: #999;
text-decoration: none;
}
ul.menu li a:hover {
color: #333;
text-decoration: none
}
If you add runat="server" ASP.NET will add a prefix to your ID which will most likely break the CSS
For Example :
If you place your element in <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server"><asp:Content>
It will change <ul runat="server" id="menu"> to <ul id="MainContent_menu">
So check the page source then adjust your CSS.
You could also consider using a css class instead of and ID for that purpose. Then you don't have to worry about .NET adding names to the style setting part of your element dynamically, thus making the css easier to deal with.
Should look something like this in other words:
<ul runat="server" class="menu">
<li>lorem ipsum</li>
</ul>
I am trying to get 3 flexible images to line up horizontally and stay within the confines of their flexible div container which has a flexible background,
the background of the container and the 3 images should all stay in relation to each other positionally so they are always on top of each other. they should get larger and smaller with the size of the browser window but not exceed 800 px in width.
The problem I am having is the background and footer slam to the left and the button divs go right.
My JSFIDDLE
HTML:
<div id="container">
<div id="footer">
<div id="left">
<input type="image" name="MyLeftButton" id="MyLeftButton" class="imgstretch" src="Images/MyLeftImage.png" style="border-width:0px;">
</div>
<div id="middle">
<input type="image" name="MyMiddleButton" id="MyMiddleButton" class="imgstretch" src="Images/MyMiddleImage.png" style="border-width:0px;">
</div>
<div id="right">
<input type="image" name="MyRightButton" id="MyRightButton" class="imgstretch" src="Images/MyRightImage.png" style="border-width:0px;">
</div>
</div>
</div>
CSS:
#container {
margin: 0em auto 0em auto;
width: 100%;
max-width: 800px;
}
#footer {
width: 100%;
max-width: 800px;
max-height: 80px;
float: left;
text-align: center;
position: fixed;
bottom: 0em;
background-color: #009FC1;
}
#left {
float: left;
max-height: 80px;
max-width: 294px;
width: 36%;
margin-left: 20px;
display: inline-block;
background-color: #CCCCCC;
}
#middle {
max-height: 80px;
width: 25%;
float: left;
max-width: 202px;
display: inline-block;
background-color: #889FC1;
}
#right {
max-height: 80px;
max-width: 294px;
width: 36%;
float: left;
display: inline-block;
background-color: #9999DD;
}
.imgstretch {
width:100%;
}
You have a couple of things going on.
1) Footer is set to fixed position, which makes it ignore the parent element and fix itself to the window. I don't know if this is an issue for your layout, but something to note.
2) You have inline styles set on elements that you already have a defined class for. Seems unnecessary.
3) Your dimension calculations are WAY off in relation to your % and px. 36% should be (0.36 * 800) which would come out as 288px, not 294px, and THEN plus a 20px margin.
I've forked your fiddle. http://jsfiddle.net/ZBJPF/8/
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#container {
margin: 0 auto;
width: 100%;
max-width: 800px;
}
#footer {
width: 100%;
max-width: 780px;
max-height: 80px;
margin: 0 auto;
padding-left: 20px;
text-align: center;
position: fixed;
bottom: 0;
background-color: #009FC1;
}
.footer-element-lg {
float: left;
width: 36%;
max-width: 280px;
position: relative;
}
.footer-element-sm {
float: left;
width: 28%;
max-width: 220px;
position: relative;
}
#left {
background-color: #CCCCCC;
}
#middle {
background-color: #889FC1;
}
#right {
background-color: #9999DD;
}
.imgstretch {
width:100%;
border: none;
}
<div id="container">
<div id="footer">
<div id="left" class="footer-element-lg">
<input type="image" name="MyLeftButton" id="MyLeftButton" class="imgstretch" src="Images/MyLeftImage.png">
</div>
<div id="middle" class="footer-element-sm">
<input type="image" name="MyMiddleButton" id="MyMiddleButton" class="imgstretch" src="Images/MyMiddleImage.png">
</div>
<div id="right" class="footer-element-lg">
<input type="image" name="MyRightButton" id="MyRightButton" class="imgstretch" src="Images/MyRightImage.png">
</div>
</div>
</div>
I removed a 20px margin and made the spacing as a 20px padding for continuity sake.