Develop Reference

How Can I Convert My Html Radio Button To ASP .NET

I Created a radio button in HTML:
.wrapper {
display: inline-flex;
background: #fff;
height: 100px;
width: 400px;
align-items: center;
justify-content: space-evenly;
border-radius: 5px;
padding: 20px 15px;
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
}
.wrapper .option {
background: #fff;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
padding: 0 10px;
border: 2px solid lightgrey;
transition: all 0.3s ease;
}
.wrapper .option .dot {
height: 20px;
width: 20px;
background: #d9d9d9;
border-radius: 50%;
position: relative;
}
.wrapper .option .dot::before {
position: absolute;
content: "";
top: 4px;
left: 4px;
width: 12px;
height: 12px;
background: #0069d9;
border-radius: 50%;
opacity: 0;
transform: scale(1.5);
transition: all 0.3s ease;
}
input[type="radio"] {
display: none;
}
#option-1:checked:checked~.option-1,
#option-2:checked:checked~.option-2 {
border-color: #0069d9;
background: #0069d9;
}
#option-1:checked:checked~.option-1 .dot,
#option-2:checked:checked~.option-2 .dot {
background: #fff;
}
#option-1:checked:checked~.option-1 .dot::before,
#option-2:checked:checked~.option-2 .dot::before {
opacity: 1;
transform: scale(1);
}
.wrapper .option span {
font-size: 20px;
color: #808080;
}
#option-1:checked:checked~.option-1 span,
#option-2:checked:checked~.option-2 span {
color: #fff;
}
#import url('https://fonts.googleapis.com/css?family=Lato:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
}
.wrapper {
display: inline-flex;
height: 100px;
width: 400px;
align-items: center;
justify-content: space-evenly;
border-radius: 5px;
padding: 20px 15px;
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
}
.wrapper .option {
background: #fff;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
padding: 0 10px;
border: 2px solid lightgrey;
transition: all 0.3s ease;
}
.wrapper .option .dot {
height: 20px;
width: 20px;
background: #d9d9d9;
border-radius: 50%;
position: relative;
}
.wrapper .option .dot::before {
position: absolute;
content: "";
top: 4px;
left: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
opacity: 0;
transform: scale(1.5);
transition: all 0.3s ease;
}
input[type="radio"] {
display: none;
}
#option-1:checked:checked~.option-1,
#option-2:checked:checked~.option-2 {
border-color: #0069d9;
background: #0069d9;
}
#option-1:checked:checked~.option-1 .dot,
#option-2:checked:checked~.option-2 .dot {
background: #fff;
}
#option-1:checked:checked~.option-1 .dot::before,
#option-2:checked:checked~.option-2 .dot::before {
opacity: 1;
transform: scale(1);
}
.wrapper .option span {
font-size: 20px;
color: #808080;
}
#option-1:checked:checked~.option-1 span,
#option-2:checked:checked~.option-2 span {
color: #fff;
}
<div class="wrapper">
<input type="radio" name="select" id="option-1" checked>
<input type="radio" name="select" id="option-2">
<label for="option-1" class="option option-1">
<div class="dot"></div>
<span>MP3</span>
</label>
<label for="option-2" class="option option-2">
<div class="dot"></div>
<span>MP4</span>
</label>
</div>
I want To convert this into asp radio button and validate user input. Like if user selected mp4 then do this else do that.
I Tried To Do The same But Failed. Please HElp Me With This
Please help me. I am new in this Field
Adding Loream Ipsum For The Platform To Allow ME To Post This Question Because of less Words.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

my page doesnt have a scrollbar

i don't know whats wrong but my page doesnt have a scrollbar, when the page exceeds, i cant scroll below it. what seems to be the probblem with my code?
i am new to ASP.NET so yeah, i do not know much yet. thanks in advance!
here is my full aspx page.
<form id="form1" runat="server">
<div style="width:100%;height:100%;overflow:scroll;overflow-y:auto;">
<div class="body">
<div class="pull-right">
<br />
<div class ="dropdown" runat="server">
<asp:Label ID="hideID" runat="server" Text="#" Visible="false"></asp:Label>
<asp:Label ID="lblLogged" runat="server" CssClass="dropbtn" Text="Name" />
<div class="dropdown-content">
<asp:LinkButton ID="btnMain" runat="server" OnClick="btnMain_Click">Main Menu</asp:LinkButton>
<asp:LinkButton ID="btnLogO" runat="server" OnClick="btnLogO_Click">Log Out</asp:LinkButton>
<%--<a id="btnLogOut" runat="server" href="LogIn.aspx">Log Out</a>--%>
</div>
</div>
<%-- Current User: --%>
 
and here is my CSS, i dont know if its correct
<style type="text/css">
.*{
width:auto;
height:auto;
overflow-y: hidden;
overflow:auto;
}
.body{
position:absolute;
left:24%;
width:800px;
height:400px;
z-index:0;
}
.home{
position:absolute;
top: 200px;
left: 38%;
z-index: 2;
}
.yusenlogo{
position:center;
left:40%;
}
.exist{
position:absolute;
height:10%;
width:40%;
top: 250px;
left: 30%;
z-index: 2;
background-color: darkred;
border-top:5px;
}
.added{
position:absolute;
height:8%;
width:40%;
top: 250px;
left: 30%;
z-index: 2;
background-color: forestgreen;
border-top:5px;
}
.well2 {
position:absolute;
width:40%;
top: 310px;
left: 30%;
z-index: 2;
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
/*background-color: #f5f5f5;*/
/*border: 1px solid #e3e3e3;*/
border-radius: 4px;
/*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);*/
}
.well3 {
position:absolute;
width:70%;
top: 80px;
left: 13%;
z-index: 2;
}
.buttons{
cursor:default;
}
.banner{
position:absolute;
top: 50%;
left: 50%;
z-index:2;
}
.character{
position:absolute;
height:60px;
width:40%;
top: 250px;
left: 30%;
z-index: 2;
background-color: darkred;
border-top:5px;
}
.lowerleft {
position: fixed;
bottom:8px;
left:16px;
width:100%;
}
.lowerleftuser {
position: fixed;
bottom:8px;
left:16px;
width:100%;
z-index:1000;
}
.forGridView {
position:fixed;
top:30%;
left:30%;
z-index:1000;
}
.container {
width:auto;
height:auto;
overflow-y: hidden;
overflow:auto;
}
.dropbtn {
background-color: cornflowerblue;
color: white;
padding: 12px;
font-size: 13px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: cornflowerblue;
}
#txtFrom
{
background-image: url(Images/Calendar2.png);
background-position: right;
background-repeat: no-repeat;
/*padding: 3.5px 10px;*/
padding: 6px 12px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
#txtTo
{
background-image: url(Images/Calendar2.png);
background-position: right;
background-repeat: no-repeat;
padding: 6px 12px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
</style>

In your CSS:
.*{
width:auto;
height:auto;
overflow-y: hidden;
overflow:auto;
}
remove "overflow-y: hidden;"
overflow-y is the vertical scrollbar, this CSS is suppressing it, see http://www.w3schools.com/cssref/css3_pr_overflow-y.asp for more information.

Styling asp:DropDownList with CSS

I have created a small CSS, which I wanted to use to make my own styled DropDownList. I don't know if there is some sort of incompatibility and I'm still learning CSS and ASP.net, but when I tried my code in an online CSS tester, it worked perfectly.
.select {
padding: 3px;
margin: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
box-shadow: 0 3px 0 #212121, 0 -1px #191919 inset;
background: #333;
color: #fff;
border: none;
outline: none;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
select {
padding-right: 18px;
}
}
label {
position: relative;
}
label:after {
content: '<>';
font: 11px "Consolas", monospace;
color: #fff;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 8px;
top: 2px;
padding: 0 0 2px;
border-bottom: 1px solid #ddd;
position: absolute;
pointer-events: none;
}
label:before {
content: '';
right: 6px;
top: 0px;
width: 20px;
height: 20px;
background: #333;
position: absolute;
pointer-events: none;
display: block;
}
This is my DropDownList:
<asp:DropDownList CssClass="select" id="DropPoke1" Width="80" runat="server" AutoPostBack="true" ViewStateMode="Enabled" EnableViewState="true" OnSelectedIndexChanged="DropPoke1_SelectedIndexChanged" />
Unfortunately, this does not work. Have I done something wrong or is it just not possible?
Edit: After adding the following line to my aspx, it worked:
<link href="CustomDropDown.css" rel="stylesheet" type="text/css" />

This is working fine. Please make sure you have properly included style sheet.

IF you are not calling your element by own created classes, you may need to inspect with chrome (or similar) your html.
calling the css by generic tags as "label" often won't work as a asp:Label use to be translated into an html span, not a html label

Setting stylesheet for one element

I have a style for a web user control, I placed it in the form element in my masterpage. but the stylesheet of the webuser control affect all other elements that come in the content place holder.
Here is a picture of what happened:
* { box-sizing: border-box; padding:0;}
body {
background: #333 url(../images/bg.jpg) repeat top left;
font-family: Arial;
color:white;
font-size:12px;
}
form {
background:#111;
width:300px;
margin:30px auto;
border-radius:0.4em;
border:1px solid #191919;
overflow:hidden;
position:relative;
box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}
.inset {
padding:20px;
border-top:1px solid #19191a;
}
form h1 {
font-size:18px;
text-shadow:0 1px 0 black;
text-align:center;
padding:15px 0;
border-bottom:1px solid rgba(0,0,0,1);
position:relative;
}
input[type=text],
input[type=password] {
width:100%;
padding:8px 5px;
background:linear-gradient(#1f2124, #27292c);
border:1px solid #222;
box-shadow:
0 1px 0 rgba(255,255,255,0.1);
border-radius:0.3em;
margin-bottom:20px;
}
label[for=remember]{
color:white;
display:inline-block;
padding-bottom:0;
padding-top:5px;
}
input[type=checkbox] {
display:inline-block;
vertical-align:top;
}
input[type=submit] {
padding:5px 20px;
border:1px solid rgba(0,0,0,0.4);
text-shadow:0 -1px 0 rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius:0.3em;
background:#0184ff;
color:white;
float:right;
font-weight:bold;
cursor:pointer;
font-size:13px;
}
input[type=submit]:hover {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -10px 10px rgba(255,255,255,0.1);
}
input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {
background:#27292c;
}

You can add class or Id through html code to the specific control you want to override and write separate css for that like:
<form class="form-class"></form>
.form-class{
background:#FFF;
width:500px;
margin:30px auto;
border-radius:0.4em;
border:1px solid #191919;
overflow:hidden;
position:relative;
box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}
Then check your output it is still showing the same result then you have add important to the required property like:
.form-class{
background:#FFF !important;
width:500px !important;
margin:30px auto;
border-radius:0.4em;
border:1px solid #191919;
overflow:hidden;
position:relative;
box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}
This will help you to override specific css on html controller.

Use InLine CSS or else give ID or class to the element and Write its CSS in the same page.

asp:menu with image has padding above

I have a menu bar in the site master in a table. For some reason I cant figure out there is always padding above it.
This is the css:
div.menu
{
padding: 0px 0px 0px 0px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
}
div.menu ul li
{
color: white;
font-family:arial;
font-size:12px;
font-weight:bold;
display: block;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a
{
padding: 4px 20px;
color: white;
font-family:arial;
font-size:12px;
font-weight:bold;
display: block;
text-decoration: none;
white-space: nowrap;
background-color: #2c4257;
}
div.menu a ul li a:visited
{
background-color: #25394B;
color: white;
font-family:arial;
font-size:12px;
font-weight:bold;
display: block;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #25394B;
color: #ef7c31;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #25394B;
color: #ef7c31;
text-decoration: none;
text-align:left
}
and this is in the site master
<table style="background-color: #2E4459">
<tr>
<td>
<asp:Menu ID="SettingsMenu" runat="server" EnableViewState="True" IncludeStyleBlock="false" Orientation="Horizontal" CssClass="menu">
<DynamicSelectedStyle ForeColor="#ef7c31" />
<Items>
<asp:MenuItem ImageUrl="Images/settings.png">
<asp:MenuItem NavigateUrl="~/Pages/CRMSettings/Area.aspx" Text="Area" />
<asp:MenuItem NavigateUrl="~/Pages/CRMSettings/Post.aspx" Text="Post" />
I don't know how to fix it there is around 30 px.
Its also happening with out the image, if I just put text.
This is the setting.png

div.menu
{
padding: 0px !important;
}
try that

I think this is what you need. Try this. Add this to your CSS
html,body
{
padding:0px;
margin:0px;
}

what I figured-out was there is a padding padding: 4px 20px; value for div.menu ul li a changing that will help you. change it to div.menu ul li ul li a
div.menu ul li ul li a
{
padding: 4px 20px;
color: white;
font-family:arial;
font-size:12px;
font-weight:bold;
display: block;
text-decoration: none;
white-space: nowrap;
background-color: #2c4257;
}