I am having a very weird problem that I cannot figure out. I am trying to add a loading dialog box to a page that generates a pdf. I coded the web page in a separate project, and the dialog box worked perfectly. But when I included the extremely basic jquery-ui code into my existing website project, it doesn't work. Specifically, the popup doesn't go away when the PDF loads into the iframe. Basically the .load(function()) event isn't triggering.
But the event triggers just fine in my separate project. I generate the exact same pdf using the exact same data and code, and it works fine. But when put into my main project, the load event doesn't trigger.
Here is my code. The company I work for still uses webforms so ...
Code that isn't triggering
$(function () {
$("[id$=ifPDF]").load(function () {
hideDialog();
});
});
If you guys could help me find the conflict, it would be greatly appreciated
nice.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/main.master" AutoEventWireup="true" CodeFile="nice.aspx.cs" Inherits="letters_missed_appointment_nice" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link rel="stylesheet" type="text/css" href="\resources\css\letters.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style type="text/css">
#dialog {
display: none;
}
</style>
<script type="text/javascript">
function showDialog() {
$("#dialog").dialog();
}
function hideDialog() {
$("#dialog").dialog("close");
}
$(function () {
$("[id$=ifPDF]").load(function () {
hideDialog();
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="pageHeader" Runat="Server">
Cabinet
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="pageContent" Runat="Server">
<h1>Nice Letter</h1>
<h3>Enter in the information below and click "Create Letter".</h3>
<asp:UpdatePanel ID="upMain" runat="server">
<ContentTemplate>
<table>
<tr>
<td>Letter Date: </td>
<td><asp:TextBox ID="txtLetterDate" runat="server"></asp:TextBox> </td>
<td>Recipient Name: </td>
<td><asp:TextBox ID="txtRecipientName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Appointment Date: </td>
<td><asp:TextBox ID="txtAppointmentDate" runat="server"></asp:TextBox> </td>
<td>Patient Name: </td>
<td><asp:TextBox ID="txtPatientName" runat="server"></asp:TextBox></td>
</tr>
<tr><td> </td></tr>
<tr>
<td><asp:Button ID="cmdCreateLetter" Text="Create Letter" OnClientClick="showDialog();" runat="server" /></td>
</tr>
</table>
<br />
<iframe id="ifPDF" visible="false" runat="server" />
<div id="dialog" title="Loading PDF">Loading PDF, Please Wait ...</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
nice.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class letters_missed_appointment_nice : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
ifPDF.Attributes["class"] = "pdf_view";
cmdCreateLetter.Click += new EventHandler(Load_PDF);
}
protected void Load_PDF(object sender, EventArgs e)
{
ifPDF.Visible = true;
PDFGenerator my_doc = new PDFGenerator();
my_doc.Template = Server.MapPath("nice_letter.html");
my_doc.Add("letter_date", txtLetterDate.Text);
my_doc.Add("recipient_name", txtRecipientName.Text);
my_doc.Add("patient_name", txtPatientName.Text);
my_doc.Add("appointment_date", txtAppointmentDate.Text);
byte[] doc_array = my_doc.CreateDocument(base_url: Server.MapPath("/letters/missed_appointment/"));
string b64_doc = Convert.ToBase64String(doc_array, 0, doc_array.Length);
string pdf_src = $"data:application/pdf;base64,{b64_doc}";
ifPDF.Attributes["Src"] = pdf_src;
}
}
letters.css
body > form > main {
width: 80%;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
min-height: 800px;
}
body > form > footer {
position: static;
padding-bottom: 50px;
}
.pdf_view {
width: 100%;
height: 700px;
border: none;
}
main.css
body {
margin: 0px;
background-color: #e7e7de;
font-family: 'Roboto', sans-serif;
}
body > form > #pageGreeting {
width: calc(100%-20px);
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-color: #0f3057;
box-shadow: 0px 4px 15px -1px #000000;
}
body > form > #pageGreeting > #pageTitle {
font-size: 35px;
font-weight: 700;
color: #e7e7de;
font-family: 'Courgette', cursive;
}
body > form > #pageGreeting > nav {
display: inline-block;
margin-left: 30px;
font-size: 20px;
border-left: 3px solid #e7e7de;
padding-left: 30px;
}
body > form > #pageGreeting > nav > span {
display: inline-block;
margin-left: 10px;
border-left: 1px solid #e7e7de;
border-right: 1px solid #e7e7de;
padding-left: 10px;
padding-right: 10px;
}
body > form > #pageGreeting > nav > span:first-child {
margin-left: 0px;
border-left: none;
}
body > form > #pageGreeting > nav > span:last-child {
border-right: none;
}
body > form > #pageGreeting > nav > span > a {
color: aqua;
text-decoration: none;
font-weight: 900;
font-size: 25px;
}
body > form > #pageGreeting > nav > span > a:hover {
color: blue;
}
body > form > main {
width: 100%;
background-color: #e7e7de;
min-height: 600px;
margin-top: 15px;
}
body > form > main > h1 {
display: block;
margin-left 15px;
}
body > form > footer {
position: absolute;
bottom: 0px;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
font-family: Arial;
font-size: 15px;
font-weight: 900;
background-color: #00597a;
color: white;
}
div.pageDescription {
width: 100%;
padding-top: 10px;
padding-bottom: 20px;
font-size: 30px;
text-align: center;
font-weight: 700;
}
main.master
<%# Master Language="C#" AutoEventWireup="true" CodeFile="main.master.cs" Inherits="main" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Courgette&family=Roboto:wght#300&display=swap" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="resources/css/main.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="frmMain" runat="server">
<asp:ScriptManager ID="smMain" runat="server"></asp:ScriptManager>
<div id="pageGreeting">
<span id="pageTitle"><asp:ContentPlaceHolder ID="pageHeader" runat="server"></asp:ContentPlaceHolder></span>
<nav><% WriteNav(); %></nav>
</div>
<main><asp:ContentPlaceHolder ID="pageContent" runat="server"></asp:ContentPlaceHolder></main>
<footer>Copyright © 2022 Renewed Life Chiropractic Center - All Rights Reserved</footer>
</form>
</body>
</html>
you have probably a block from browser "cors", check for block messages on developers console (f12) or any error messages you'd probably have to send a headers to allow show the iframe in a "parent" page
I think the ID of your iframe is changed on rendering, because you use the 'runat="server"' attribute. That's why javascript doesn't find this control by ID.
Try setting clientidmode tot static, like this:
<iframe id="ifPDF" visible="false" runat="server" ClientIDMode="Static" />
I have created a master page with header, footer, and container(for content of other pages). Footer has a 'asp.net link button' which requires <form id="form1" runat="server">. Now I have to add content in 'content page' such as 'asp buttons' 'links' etc. But 'IIS' generates error that
'a webpage can have only one server side tag.'
In master-page, I've placed <form id="form1" runat="server">under the <div class="footer-right"> tag and if I try to move <form id="form1" runat="server"> to the top of page or any where else, the CSS of search bar gets vanished. How to resolve this issue?
if I place 'form tag' on the top of page after body tag.
here is my code
master-page
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication2.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="keywords" content="footer, search, form, icons" />
<title>Homepage</title>
<%--<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>--%>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/demo.css"/>
<link rel="stylesheet" href="css/footer-distributed-with-search.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
body {
margin: 0;
font-family: Arial;
}
.topnav {
overflow: hidden;
background-color: #37312f;
padding: 12px 14px;
font-family:sans-serif;
font-weight:bold;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 12px 14px;
text-decoration: none;
font-size: 17px;
}
.topnav a.logo {
font-size: 25px;
font-weight: bold;
color: #fff;
height: 12px;
margin-left: 72px;
}
.topnav-right {
float: right;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown1 {
float: left;
overflow: hidden;
}
.dropdown1 .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 12px 14px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown1-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: -de1;
}
.dropdown1-content a {
float: none;
color: black;
padding: 12px 14px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown1:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown1-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown1:hover .dropdown1-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown1 .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown1 {
float: none;
}
.topnav.responsive .dropdown1-content {
position: relative;
}
.topnav.responsive .dropdown1 .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Website Name
<div class="topnav-right">
Home
<div class="dropdown1">
<button class="dropbtn">
Tools
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown1-content">
Link 1
Link 2
Link 3
</div>
</div>
About Us
Contact
Login
Sign Up
<%--Dropdown bar for window resize--%>
☰
</div> <%--id="Topnav-right--%>
</div> <%--id="myTopnav--%>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<!-- The content of your page would go here. -->
<div class="container" style="background-color:aquamarine">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<footer class="footer-distributed">
<div class="footer-left">
<p class="footer-links">
Home
·
About us
·
Contact
·
Login
·
Sign up
·
Feedback
</p>
<p class="footer-company-name">websiteName © 2019</p>
</div>
<div class="footer-right">
<form id="form2" runat="server" method="get" action="#">
<input placeholder="Search our website" name="search" /><asp:LinkButton runat="server" ID="btnSubmit" class="btn btn-mini" OnClick="Page_Load">
<i class="fa fa-search" aria-hidden="true"></i></asp:LinkButton>
<%--<i class="fa fa-search"></i>--%>
</form>
</div>
</footer>
</body>
</html>
Content-page
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm5555555555555555.aspx.cs" Inherits="WebApplication2.WebForm5555555555555555" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<%--<form is="form1" runat="server">--%>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
<%-- </form>--%>
</asp:Content>
footer-distributed-with-search.css
.footer-distributed{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
font: bold 16px sans-serif;
text-align: left;
padding: 50px 60px;
margin-top: 80px;
overflow: hidden;
}
/* Footer left */
.footer-distributed .footer-left{
float: left;
}
.footer-distributed .footer-links{
color: #ffffff;
margin: 0 0 10px;
padding: 0;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer right */
.footer-distributed .footer-right{
float: right;
}
/* The search form */
.footer-distributed form{
position: relative;
}
.footer-distributed form input{
display: block;
border-radius: 3px;
box-sizing: border-box;
background-color: #1f2022;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
border: none;
font: inherit;
font-size: 14px;
font-weight: normal;
color: #d1d2d2;
width: 500px;
padding: 18px 50px 18px 18px;
}
.footer-distributed form input:focus{
outline: none;
}
/* Changing the placeholder color */
.footer-distributed form input::-webkit-input-placeholder {
color: #5c666b;
}
.footer-distributed form input::-moz-placeholder {
opacity: 1;
color: #5c666b;
}
.footer-distributed form input:-ms-input-placeholder{
color: #5c666b;
}
/* The magnify glass icon */
.footer-distributed form i{
width: 18px;
height: 18px;
position: absolute;
top: 16px;
right: 18px;
color: #d1d2d2;
font-size: 18px;
}
/* If you don't want the footer to be responsive, remove these media queries */
#media (max-width: 1000px) {
.footer-distributed form input{
width: 300px;
}
}
#media (max-width: 800px) {
.footer-distributed{
padding: 30px;
text-align: center;
font: bold 14px sans-serif;
}
.footer-distributed .footer-company-name{
margin-top: 10px;
font-size: 12px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-right{
float: none;
max-width: 300px;
margin: 0 auto;
}
.footer-distributed .footer-left{
margin-bottom: 20px;
}
.footer-distributed form input{
width: 100%;
}
}
CSS template I've used
Beautiful and Responsive Footer Templates
In your case, the style sheets included in your master page are using relative paths. Specify your style sheet links with runat=server and prefix them with the virtual web root path (~).
An example:
<link rel="stylesheet" href="~/css/demo.css" runat="server"/>
<link rel="stylesheet" href="~/css/footer-distributed-with-search.css" runat="server"/>
Do this for all your style sheets on your page (obviously not the CDN links) and place your <form> after <body> and please ensure that the <head> element also needs to be runat=server. Using the virtual web root path (~) will work when you publish your site in a virtual directory so you don't encounter problems as such.
i am making simple website and i made a menu and i want do redirect other views when i clicked links which is on menu
<!DOCTYPE html>
<html>
<head>
<title>#Page.Title</title>
#RenderSection("head", required: false)
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #555;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: white;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: #000;
}
li a:hover:not(.active) {
background-color: #f1f1f1;
color: #000
}
</style>
</head>
<body>
<div>
<ul>
<li>Kitapları Görüntüle</li>
<li>Kitap Kiralama</li>
<li>Öğrencileri Görüntüle</li>
<li>Öğrenci Ekle</li>
<li>Kitap Ekle</li>
<li>Kiralanmış Kitap Listesi</li>
<li>Görevli Atama</li>
<li><img src="~/img/tpl_logo.gif" style="height:130px;width:325px;margin-left:5px" /></li>
</ul>
</div>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
#RenderBody()
</div>
</body>
</html>
this is my master page. when i add #Url.Action Url does not exist in the current context. when i clickedd on for example "KitapGoruntule" i want to open view in home name is KitapGoruntule
Using an ActionLink will create the <a> tag for you.
In your case:
#Html.ActionLink("Kitapları Görüntüle", "KitapGoruntule", "Home")
Creates:
Kitapları Görüntüle
It should work, it looks like reference to System.Web.Mvc is missing, please confirm the reference of that DLL in your project.
EDIT:
Also confirm the the below tag in your MAIN web.config:
<add key="webpages:Version" value="3.0.0.0" />
You can use the link button like this
Kitapları Görüntüle
I am trying to build a master page for a website in ASP.NET, and after several trials, I couldn't display the page in my web browser. I have changed browsers thinking that source of the problem might be that. However the same problem is occurring: I get exactly a blank page without anything on it: In the designer of visual Studio, I can see a sample view of how the website will look like (I have all the files needed for the pictures of the background and the profile picture.)
What might be the problem?
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
<link href="/normalize.css" rel="stylesheet">
<style>
header {
text-align: center;
background-image: url("/Pictures/Harvard-widerBlurred.jpg");
background-size: cover;
color: white;
}
a {
color: white;
}
h1 {
font-size: 70px;
}
img {
margin: 40px 0px 0px 0px;
border: 7px solid white;
border-radius: 20px;
}
ul {
padding: 10px;
background: rgba(0,0,0,0.5);
}
li {
display: inline;
padding: 0px 10px 0px 10px;
}
article{
max-width: 500px;
padding: 20px;
margin: 0 auto;
}
#media (max-width: 500px){
li{
display: block;
padding: 5px;
}
h1{
font-size: 36px;
}
body {
background: red;
}
}
</style>
<header>
<img src="/Pictures/GoExchangelogo.jpg">
<h1>GoExchange!</h1>
<ul>
<li>AboutUs</li>
<li>My Appointment</li>
<li>My Application</li>
</ul>
</header>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Thank you
Is there a way to control the size of the radio button in CSS ?
This css seems to do the trick:
input[type=radio] {
border: 0px;
width: 100%;
height: 2em;
}
Setting the border to 0 seems to allow the user to change the size of the button and have the browser render it in that size for eg. the above height: 2em will render the button at twice the line height. This also works for checkboxes (input[type=checkbox]). Some browsers render better than others.
From a windows box it works in IE8+, FF21+, Chrome29+.
Old question but now there is a simple solution, compatible with most browsers, which is to use CSS3. I tested in IE, Firefox and Chrome and it works.
input[type="radio"] {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
transform: scale(1.5);
}
Change the value 1.5, in this case an increment of 50% in size, according to your needs. If the ratio is very high, it can blur the radio button. The next image shows a ratio of 1.5.
You can control radio button's size with css style:
style="height:35px; width:35px;"
This directly controls the radio button size.
<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">
A solution which works quite well is described right here:
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/radio
The idea is to use the appearance property, which when set to none allows to change the width and height of the radio button.
The radio buttons are not blurry, and you can add other effects like transitions and stuff.
Here's an example :
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #999;
transition: 0.2s all linear;
margin-right: 5px;
position: relative;
top: 4px;
}
input:checked {
border: 6px solid black;
outline: unset !important /* I added this one for Edge (chromium) support */
}
The only drawback is that it is not supported yet on IE.
Here's a GIF below to give an idea of what can be achieved. The result will look nicer on an actual browser.
And the plunker : https://plnkr.co/plunk/1W3QXWPi7hdxZJuT
Not directly. In fact, form elements in general are either problematic or impossible to style using CSS alone. the best approach is to:
hide the radio button using javascript.
Use javascript to add/display HTML that can be styled how you like e.g.
Define css rules for a selected state, which is triggered by adding a class "selected" to yuor span.
Finally, write javascript to make the radio button's state react to clicks on the span, and, vice versa, to get the span to react to changes in the radio button's state (for when users use the keyboard to access the form). the second part of this can be tricky to get to work across all browsers. I use something like the following (which also uses jQuery. I avoid adding extra spans too by styling and applying the "selected" class directly to the input labels).
javascript
var labels = $("ul.radioButtons).delegate("input", "keyup", function () { //keyboard use
if (this.checked) {
select($(this).parent());
}
}).find("label").bind("click", function (event) { //mouse use
select($(this));
});
function select(el) {
labels.removeClass("selected");
el.addClass("selected");
}
html
<ul class="radioButtons">
<li>
<label for="employee1">
employee1
<input type="radio" id="employee1" name="employee" />
</label>
</li>
<li>
<label for="employee2">
employee1
<input type="radio" id="employee2" name="employee" />
</label>
</li>
</ul>
Resizing the default widget doesn’t work in all browsers, but you can make custom radio buttons with JavaScript. One of the ways is to create hidden radio buttons and then place your own images on your page. Clicking on these images changes the images (replaces the clicked image with an image with a radio button in a selected state and replaces the other images with radio buttons in an unselected state) and selects the new radio button.
Anyway, there is documentation on this subject. For example, read this: Styling Checkboxes and Radio Buttons with CSS and JavaScript.
Here's one approach. By default the radio buttons were about twice as large as labels.
(See CSS and HTML code at end of answer)
Safari: 10.0.3
Chrome: 56.0.2924.87
Firefox: 50.1.0
Internet Explorer: 9 (Fuzziness not IE's fault, hosted test on netrenderer.com)
CSS:
.sortOptions > label {
font-size: 8px;
}
.sortOptions > input[type=radio] {
width: 10px;
height: 10px;
}
HTML:
<div class="rightColumn">Answers
<span class="sortOptions">
<input type="radio" name="answerSortList" value="credate"/>
<label for="credate">Creation</label>
<input type="radio" name="answerSortList" value="lastact"/>
<label for="lastact">Activity</label>
<input type="radio" name="answerSortList" value="score"/>
<label for="score">Score</label>
<input type="radio" name="answerSortList" value="upvotes"/>
<label for="upvotes">Up votes</label>
<input type="radio" name="answerSortList" value="downvotes"/>
<label for="downvotes">Down Votes</label>
<input type="radio" name="answerSortList" value="accepted"/>
<label for="downvotes">Accepted</label>
</span>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
input[type="radio"] {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="container">
<h2>Form control: inline radio buttons</h2>
<p>The form below contains three inline radio buttons:</p>
<form>
<label class="radio-inline">
<input type="radio" name="optradio">Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 3
</label>
</form>
</div>
</body>
</html>
Well, I am from the future as compared to the posted year of this question, but I believe my answer will benefit all the new visitors:
So if you want to increase the size of the "radio" button with CSS you can simply do it by putting the following styling rules in CSS and it will help you,
input[radio] {
height: 20px;
width: 20px;
vertical-align: middle;
}
This works fine for me in all browsers:
(inline style for simplicity...)
<label style="font-size:16px;">
<input style="height:1em; width:1em;" type="radio">
<span>Button One</span>
</label>
The size of both the radio button and text will change with the label's font-size.
Directly you can not do this. [As per my knowledge].
You should use images to supplant the radio buttons. You can make them function in the same manner as the radio buttons inmost cases, and you can make them any size you want.
You can also use the transform property, with required value in scale:
input[type=radio]{transform:scale(2);}
(Vue3) HTML:
<h2>Group By</h2>
<div class="radioButtons">
<label><input type="radio" id="groupByDevice"
v-model="data.groupBy" value="device" />
<span>Device Location</span>
</label>
<label><input type="radio" id="groupByLocation"
v-model="data.groupBy" value="location" />
<span>Device Type</span></label>
</div>
</div>
SASS:
$vw-viewport: 2400px;
#function toVw($vw-viewport, $value) {
#return ($value / $vw-viewport) * 100vw;
}
label {
font-size: toVw($vw-viewport, 16px);
line-height: toVw($vw-viewport, 18px);
}
.radioButtons {
> label {
white-space: no-wrap;
display: inline-block;
height: toVw($vw-viewport, 22px);
margin: 0 toVw($vw-viewport, 10px) toVw($vw-viewport, 5px) 0;
> input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
border-radius: 50%;
width: toVw($vw-viewport, 18px);
height:toVw($vw-viewport, 18px);
border: toVw($vw-viewport,2px) solid #747474;
margin: 0;
position: relative;
top: toVw($vw-viewport, 2px);
background: white;
&::after {
content: '';
position: absolute;
top: 12.5%;
left: 12.5%;
right: 12.5%;
bottom: 12.5%;
width: auto;
height: auto;
background: rgb(80, 95, 226);
opacity: 0;
border-radius: 50%;
transition: 0.2s opacity linear;
}
&:checked {
&::after {
opacity: 1 !important;
background: rgb(80, 95, 226) !important;
}
}
}
&:hover {
cursor: pointer;
> input[type=radio]::after {
opacity: 1;
background: #cfd1e2;
}
}
> span {
display: inline-block;
position: relative;
top: toVw($vw-viewport, -1px);
padding-left: toVw($vw-viewport, 7px);
}
}
}
The result is like this. On hover, a gray dot appears as well. The labels will wrap horizontally when there is room, there was not enough room here so they stack. This scales with the page. If you don't need that, remove the SASS function and use the pixels directly. This is a case where !important is being used correctly IMHO, in this case to override hover when the radio is checked.
try this code... it may be the ans what you exactly looking for
body, html{
height: 100%;
background: #222222;
}
.container{
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
}
h2 {
color: #AAAAAA;
}
.container ul{
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
}
ul li{
color: #AAAAAA;
display: block;
position: relative;
float: left;
width: 100%;
height: 100px;
border-bottom: 1px solid #333;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label{
color: #FFFFFF;
}
ul li .check{
display: block;
position: absolute;
border: 5px solid #AAAAAA;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #FFFFFF;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
border: 5px solid #0DFF92;
}
input[type=radio]:checked ~ .check::before{
background: #0DFF92;
}
<ul>
<li>
<input type="radio" id="f-option" name="selector">
<label for="f-option">Male</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="s-option" name="selector">
<label for="s-option">Female</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="t-option" name="selector">
<label for="t-option">Transgender</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
<html>
<head>
</head>
<body>
<style>
.redradio {border:5px black solid;border-radius:25px;width:25px;height:25px;background:red;float:left;}
.greenradio {border:5px black solid;border-radius:25px;width:29px;height:29px;background:green;float:left;}
.radiobuttons{float:left;clear:both;margin-bottom:10px;}
</style>
<script type="text/javascript">
<!--
function switchON(groupelement,groupvalue,buttonelement,buttonvalue) {
var groupelements = document.getElementById(groupelement);
var buttons = groupelements.getElementsByTagName("button");
for (i=0;i<buttons.length;i++) {
if (buttons[i].id.indexOf("_on") != -1) {
buttons[i].style.display="none";
} else {
buttons[i].style.display="block";
}
}
var buttonON = buttonelement + "_button_on";
var buttonOFF = buttonelement + "_button_off";
document.getElementById(buttonON).style.display="block";
document.getElementById(buttonOFF).style.display="none";
document.getElementById(groupvalue).value=buttonvalue;
}
// -->
</script>
<form>
<h1>farbige Radiobutton</h1>
<div id="button_group">
<input type="hidden" name="button_value" id="button_value" value=""/>
<span class="radiobuttons">
<button type="button" value="OFF1" name="button1_button_off" id="button1_button_off" onclick="switchON('button_group','button_value','button1',this.value)" class="redradio"></button>
<button type="button" value="ON1" name="button1_button_on" id="button1_button_on" style="display:none;" class="greenradio"></button>
<label for="button1_button_on"> Ich will eins</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF2" name="button2_button_off" id="button2_button_off" onclick="switchON('button_group','button_value','button2',this.value)" class="redradio"></button>
<button type="button" value="ON2" name="button2_button_on" id="button2_button_on" style="display:none;" class="greenradio"></button>
<label for="button2_button_on"> Ich will zwei</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF3" name="button3_button_off" id="button3_button_off" onclick="switchON('button_group','button_value','button3',this.value)" class="redradio"></button>
<button type="button" value="ON3" name="button3_button_on" id="button3_button_on" style="display:none;" class="greenradio"></button>
<label for="button3_button_on"> Ich will drei</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF4" name="button4_button_off" id="button4_button_off" onclick="switchON('button_group','button_value','button4',this.value)" class="redradio"></button>
<button type="button" value="ON4" name="button4_button_on" id="button4_button_on" style="display:none;" class="greenradio"></button>
<label for="button4_button_on"> Ich will vier</label>
</span>
</div>
</form>
</body>
</html>