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.
Related
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.
I want to replace the InputFile's rectangle with 'attach Icon'. I tried to set the URL of the icon to 'background-image' of InputFile but it had no effect.
This only demonstrates how to change the color of InputFile, not exactly what I need.
I use something similar for a colour picker.
<label for="fileinput" class="label-wrapper">
<span class="oi oi-paperclip"></span>
<InputFile id="fileinput" class="custom-input-hide" />
</label>
<style>
.label-wrapper:hover {
cursor: pointer;
}
.custom-input-hide {
width: 0;
height: 0;
overflow: hidden;
}
</style>
BlazorRepl
I think maybe this is what you are looking for.
HTML/Razor code
<div class="file-input-zone">
<InputFile />
</div>
CSS
<style>
.file-input-zone {
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
color: black;
cursor: pointer;
position: relative;
width: 120px;
height: 120px;
background-image: url('paper-clip.png');
}
.file-input-zone:hover {
background-color: lightblue;
}
.file-input-zone input[type=file] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
In the CSS code above, the file paper-clip.png is installed in wwwroot directory.
The button will look like a transparent paper-clip. In the image below, color changes on hover as well.
Am I missing something?
I am trying to make the dropdown menu to appear. when i make the page smaller i can see that the menu appear on the bar (i can see only the tip of the "home" option). but, when the page is wide open it seems like it doesn't open at all.
<ul>
<li><a style="color:#1a1a1a;" class="welcometitle">Welcome back! <asp:Label ID="lblusuario" runat="server" ForeColor="#99ccff" Font-Bold="true"></asp:Label></a></li>
<li style="float:right; background-color: #4CAF50;" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" <%--onclick="myfunction()"--%> href="#">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu" role="listbox">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li style="float:right; padding-right:10px; padding-top:5px; padding-left:5px;"><input type="text" class="form-control" placeholder="Search.." name="search"/></li>
<li style="float:right; padding-right:0px; padding-top:5px; background-color:#ffffff"><button class="btn" type="submit"><i class="fa fa-search" style=""></i></button></li>
</ul>
this is my css code, i really don't understand where am I wrong
.searchbar {
float: left;
margin: 0px 0;
}
ul#navigation {
float: left;
margin: 0 20px 0 0;
}
ul#navigation li {
display: inline;
margin-right: 10px;
}
* {box-sizing: border-box;}
ul {
list-style-type: none;
margin: 0;
padding-left: 160px;
overflow: hidden;
background-color: #1160a2;
top:0;
width:100%;
position:fixed;
}
/* Dropdown Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
li {
float: left;
}
li a {
/*display: block;*/
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
color: white;
}
.active {
background-color: #4CAF50;
}
.search-container {
float: right;
}
.li input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 25px;
border: none;
}
.search-container button {
float: right;
padding: 6px 10px;
margin-top: 2px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.search-container button:hover {
background: #ccc;
}
in case someone has the same problem i found out that the answer was on the css class:
.show {display: block;}
just added "position: fixed" and that was it
.show {display: block;
position: fixed;
}
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 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.