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>
Related
I have a linkbutton that should show:
Register >
I tried to solve this by putting 2 divs floated into a parent div. Adding 2 linkbuttons inside one with Register as text and one with > as text.
I then added a css class to have the a tag take up the full div. For the register part this works perfectly, for the > part this does not work at all.
Any suggestions?
Tried to replace > with text to see what that does, but also no solution there, the > character doesn't seem to be the problem
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
.eventWebsite {
/*padding:10px 10px;*/
font-weight: bold;
background-color: #ffc903;
align-items: center;
}
.eventWebsite a {
color: inherit;
}
.eventArrow {
color: #000;
}
.link_class2 {
display: inline-block;
width: 100%;
height: 100%;
padding: 6% 8%;
}
<div class="row noMargin col-12 pl0 pr0 eventWebsite">
<div class="col-10 pl0">
<a id="cntModal_hypEventWebsite" class="link_class2" href="https://www.eventbrite.co.uk/e/new-crestron-cpd-transforming-design-with-light-tickets-55068781207">Event website</a>
</div>
<div class="col-2 EventArrow" style="text-align:right;">
<a id="cntModal_hypEventWebsiteArrow" class="link_class2" href="https://www.eventbrite.co.uk/e/new-crestron-cpd-transforming-design-with-light-tickets-55068781207">></a>
</div>
<br style="clear:both;">
</div>
I'm working on updating checkbox inputs to use the styles from the US Web Design Standards. However, I've ran into an issue when trying to update the checkboxes in pages still within our .NET app that have the runat="server" attribute.
Without the runat="server" attribute, the checkboxes render as in https://standards.usa.gov/components/form-controls/. With the runat="server" attribute, only the square outline renders and clicking on it does nothing - it doesn't change the background to blue, nor does it insert the checkmark svg.
Any help in understanding what is going on in order to make the styles work with runat="server" will be greatly appreciated.
This is the.NET code
<fieldset class="fieldsGroup standardFieldsGroup termsAndConditions"
runat="server" id="termsAndConditions">
<legend><span class="uppercase small">Terms & Conditions</span></legend>
<div class="formField fieldTypeCheckbox authorized">
<input type="checkbox" runat="server" id="idAuthorized"
name="authorized" class="authorized gs-input"/>
<label for="idAuthorized" class="gs-input">I am authorized by this
organization to update the information on their Page
</label>
<span class="validators">
<span id="idAuthorizedValidator" class="displayHidden">You must be
authorized to update the information on this organization's
Page Form</span>
</span>
</div>
<div class="formField fieldTypeCheckbox acceptTerms">
<input type="checkbox" runat="server" id="idAcceptTerms"
name="acceptTerms" class="acceptTerms gs-input" />
<label for="idAcceptTerms" class="gs-input">I agree to X's <a
id="aTermsAndConditions" href="https://x.org/terms-of-
use" target="_blank" class="black-link underline">Terms and
Conditions</a>
</label>
<span class="validators">
<span id="idAcceptTermsValidator" class="displayHidden">You must
agree to the X Terms and
Conditions
</span>
</span>
</div>
</fieldset>
The following is the CSS
input.gs-input {
//webkit-appearance: none;
//-moz-appearance: none;
//appearance: none;
border: 0.1rem solid #5b616b;
border-radius: 0;
box-sizing: border-box;
color: #212121;
display: block;
font-size: 1.7rem;
height: 4.4rem;
line-height: 1.3;
margin: 0.2em 0;
max-width: 46rem;
padding: 1rem 0.7em;
width: 100%;
}
label.gs-input {
position: relative;
left: 30px;
}
input.gs-input[type="checkbox"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
input.gs-input[type=checkbox] {
position: absolute;
left: -999em;
}
.lt-ie9 [type=checkbox], .lt-ie9
[type=radio] {
border: 0;
float: left;
margin: 0.4em 0.4em 0 0;
position: static;
width: auto;
}
[type=checkbox] + label.gs-input {
cursor: pointer;
font-weight: 400;
margin-bottom: 0.65em;
}
[type=checkbox] + label.gs-input::before {
background: #ffffff;
border-radius: 2px;
box-shadow: 0 0 0 1px #757575;
content: '\a0';
display: inline-block;
height: 2rem;
line-height: 2rem;
margin-right: 0.6em;
text-indent: 0.15em;
vertical-align: middle;
width: 2rem;
position: absolute;
left: -30px;
}
[type=checkbox]:checked + label.gs-input::before {
background-color: #0071bc;
box-shadow: 0 0 0 1px #0071bc;
}
[type=checkbox]:checked + label.gs-input::before {
background-image: url("../img/correct8.png");
background-image: url("../img/correct8.svg");
background-position: 50%;
background-repeat: no-repeat;
}
[type=checkbox]:disabled + label.gs-input {
color: #d6d7d9;
}
[type=checkbox]:focus + label.gs-input::before {
outline: 2px dotted #aeb0b5;
outline-offset: 3px;
}
[type=checkbox]:disabled + label.gs-input::before {
background: #f1f1f1;
box-shadow: 0 0 0 1px #aeb0b5;
cursor: not-allowed;
}
I did a bit of research based on #wazz comment above regarding setting ClientIdMode="Static" in the web.config file. I did not want to affect the entire application, however; just the specific inputs. I came across this blog
https://weblogs.asp.net/scottgu/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series
It mentioned that clientIdMode="Static" could be applied to individual elements. I modified the inputs as shown below and it solved my problem.
<input type="checkbox" clientIdMode="Static" runat="server" id="idAuthorized" name="authorized" class="authorized"/>
Sorry not really an answer; have to post here so i can add an image.
I'm not having trouble with this, but it did take a while to deal with the checkboxes and labels being off the page.
I'm sure you've covered this but just in case, make sure you're accessing the right element. The checkbox is left: -999em; and the label is -30. I took those off just so i could see them and got this (after creating the image and putting it in the right place).
I think it would be worth trying Static. Static will render the id you use on the page, AutoID "concatenates the ID values of each parent naming container with the ID value of the control."
I've seen a few questions that seem similiar to my issue, but I haven't been able to nail my question yet - so I'm hoping someone has either had the same issue or knows how best to approach this.
I have a SelectedItemList of Locations from a database. It returns a list of Locations, mostly cities but some countries are listed too. This list would appear as such;
Australia
Melbourne
Perth
Sydney
Bermuda
Canada
Calgary
Toronto
Vancouver
All the items in the list have an Id and Text property, and any cities that belong to countries have a ParentLocation_Id property, which corresponds to the country Id (Australia is 8, so Sydney and Perth will have "ParentLocation_Id" of 8, etc.) So I know this is the conditional I will use to target those items within the list, in order to indent the correct ones.
I would like to use the #Html.DropDownListFor() method and be able to target the countries in order to indent them, so the list would appear within the Select list like so;
but I wondered if there was a neater way to do this by using an HTML Extension. Has anyone ever tried this before?
I have managed it so far by doing it this way, but you can see it looks hideous :(
<select id="SelectedLocation" name="SelectedLocation">
#{
foreach (var location in Model.Locations)
{
if (location.Item.ParentLocation != null && location.Item.ParentLocation.Id != null)
{
<option value="#location.Item.Id" class="styled"> #location.Item.Text</option>
}
else
{
<option value="#location.Item.Id" class="styled">#location.Item.Text</option>
}
}
}
</select>
It may even be that this is the only way to achieve this UI, but I'd love to know if anyone thinks of anything better to handle this.
Thanks!
Thanks to all for helping with my issue.
I spoke with my boss re my problem, and he suggested I was over-complicating things slightly by wanting to do an Extension method.
I have managed to get the look and effect I want from a simple radio-button list, a little bit of JS and some styling.
It's taken me a little bit longer but I've learned something so I'm seeing it as a worthwhile task :)
Anyone whom is interested can check out the code below
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
$('#selectLocation').click(function () {
document.getElementById("locationDropdown").classList.toggle("show");
return false;
});
// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
$('input[name="SelectedLocation"]').on('change', function () {
var idVal = $(this).attr("id");
$("#selectLocation").text($("label[for='" + idVal + "']").text());
});
.field {
float: left;
clear: left;
margin: 1em 0;
width: 100%;
}
field-label {
float: left;
margin: 0 10px 0 0;
width: 180px;
line-height: 140%;
font-size: .9375em;
}
.dropdown {
display: inline-block;
position: relative;
vertical-align: middle;
width: 200px;
}
#selectLocation a {
cursor: pointer;
text-decoration: none;
}
#content a {
text-decoration: underline;
color: #333;
}
#selectLocation {
-moz-appearance: none;
-webkit-appearance: none;
background: #fff url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png) no-repeat;
background-position: right 10px center;
background-size: 20px;
border: 1px solid #ccc;
display: block;
padding: 10px;
width: 100%;
}
#locationDropdown {
border: 1px solid #799BD2;
height: 300px;
list-style-type: none;
margin: 0;
margin-top: 0;
overflow-y: scroll;
padding-left: 0;
}
ul#locationDropdown li:hover {
background-color: #1E90FF;
}
#content ul {
list-style: disc outside;
}
.dropdown-content {
background-color: #f9f9f9;
box-shadow: 0 8px 16px 0px rgba(0, 0, 0, 0.2);
display: none;
min-width: 160px;
position: absolute;
z-index: 1;
}
.lblLocation {
display: inline-block;
width: 100%;
}
input[name="SelectedLocation"] {
display: none;
}
.indent {
padding-left: 10px;
}
.indentExtra {
padding-left: 30px;
}
.dropdown-content.show {
margin: 0;
width: 110%;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="dropdown">
<a id="selectLocation">
<span>Select location</span>
</a>
<ul id="locationDropdown" class="dropdown-content">
<li>
<label class="lblLocation" for="8" value="Australia">
<input id="8" name="SelectedLocation" type="radio" value="8">
<span class="indent">Australia</span>
</label>
</li>
<li>
<label class="lblLocation" for="9" value="Melbourne">
<input id="9" name="SelectedLocation" type="radio" value="9">
<span class="indentExtra">Melbourne</span>
</label>
</li>
<li>
<label class="lblLocation" for="10" value="Perth">
<input id="10" name="SelectedLocation" type="radio" value="10">
<span class="indentExtra">Perth</span>
</label>
</li>
<li>
<label class="lblLocation" for="11" value="Sydney">
<input id="11" name="SelectedLocation" type="radio" value="11">
<span class="indentExtra">Sydney</span>
</label>
</li>
<li>
<label class="lblLocation" for="12" value="Bermuda">
<input id="12" name="SelectedLocation" type="radio" value="12">
<span class="indent">Bermuda</span>
</label>
</li>
<li>
<label class="lblLocation" for="13" value="Canada">
<input id="13" name="SelectedLocation" type="radio" value="13">
<span class="indent">Canada</span>
</label>
</li>
<li>
<label class="lblLocation" for="14" value="Calgary">
<input id="14" name="SelectedLocation" type="radio" value="14">
<span class="indentExtra">Calgary</span>
</label>
</li>
<li>
<label class="lblLocation" for="15" value="Toronto">
<input id="15" name="SelectedLocation" type="radio" value="15">
<span class="indentExtra">Toronto</span>
</label>
</li>
<li>
<label class="lblLocation" for="16" value="Vancouver">
<input id="16" name="SelectedLocation" type="radio" value="16">
<span class="indentExtra">Vancouver</span>
</label>
</li>
</ul>
</div>
Thanks again to all who commented!
I'm using nopcommerce 3.80 for my site and wanted to use vertical full width slides on home page. I used Jssor slider jquery in place of nivo by editing my Nivo slider plugin. I'm able to see a vertical slider at homepage now, but it is giving a horizontal scroll bar and the image is not extending to full width instead it is giving white blank space in the right side. And also the scrollbar is making the page in the right side with white space and below the slider also. Please see the attached image for reference. Below also is the jssor slider plugin. Any help would be appreciated.
#model Nop.Plugin.Widgets.NivoSlider.Models.PublicInfoModel
#{
Layout = "";
Html.AddScriptParts("~/Plugins/Widgets.NivoSlider/Scripts/jssor.slider-21.1.6.min.js");
#*Html.AddScriptParts("~/Plugins/Widgets.NivoSlider/Scripts/jquery.nivo.slider.js");
Html.AddCssFileParts("~/Plugins/Widgets.NivoSlider/Content/nivoslider/nivo-slider.css");
Html.AddCssFileParts("~/Plugins/Widgets.NivoSlider/Content/nivoslider/themes/custom/custom.css");*#
}
#using Nop.Web.Framework.UI
#helper RenderSliderLine(string pictureUrl, string text, string link, string dataTransition = "")
{
if (!string.IsNullOrEmpty(pictureUrl))
{
if (!string.IsNullOrEmpty(link))
{
<a href="#link">
<img src="#pictureUrl" data-thumb="#pictureUrl" data-transition="#dataTransition" alt="" title="#text" />
</a>
}
else
{
<img src="#pictureUrl" data-thumb="#pictureUrl" data-transition="#dataTransition" alt="" title="#text" />
}
}
}
<script type="text/javascript">
jssor_1_slider_init = function () {
var jssor_1_options = {
$AutoPlay: true,
$DragOrientation: 2,
$PlayOrientation: 2,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 1920);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<style>
/* jssor slider arrow navigator skin 08 css */
/*
.jssora08l (normal)
.jssora08r (normal)
.jssora08l:hover (normal mouseover)
.jssora08r:hover (normal mouseover)
.jssora08l.jssora08ldn (mousedown)
.jssora08r.jssora08rdn (mousedown)
*/
.jssora08l, .jssora08r {
display: block;
position: absolute;
/* size of arrow element */
width: 50px;
height: 50px;
cursor: pointer;
background: url('~/Plugins/Widgets.NivoSlider/Content/nivoslider/themes/a08.png') no-repeat;
overflow: hidden;
opacity: .4;
filter: alpha(opacity=40);
}
.jssora08l {
background-position: -5px -35px;
}
.jssora08r {
background-position: -65px -35px;
}
.jssora08l:hover {
background-position: -5px -35px;
opacity: .8;
filter: alpha(opacity=80);
}
.jssora08r:hover {
background-position: -65px -35px;
opacity: .8;
filter: alpha(opacity=80);
}
.jssora08l.jssora08ldn {
background-position: -5px -35px;
opacity: .3;
filter: alpha(opacity=30);
}
.jssora08r.jssora08rdn {
background-position: -65px -35px;
opacity: .3;
filter: alpha(opacity=30);
}
</style>
<div class="slider-wrapper theme-custom" id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture1Url, Model.Text1, Model.Link1)
</div>
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture2Url, Model.Text2, Model.Link2)
</div>
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture3Url, Model.Text3, Model.Link3)
</div>
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture4Url, Model.Text4, Model.Link4)
</div>
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture5Url, Model.Text5, Model.Link5)
</div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora08l" style="top:8px;left:8px;width:50px;height:50px;" data-autocenter="1"></span>
<span data-u="arrowright" class="jssora08r" style="bottom:8px;right:8px;width:50px;height:50px;" data-autocenter="1"></span>
<script type="text/javascript">jssor_1_slider_init();</script>
</div>
I need to do a lot of divs inside other divs, and I can't seem to understand what is the problem with my code, so the divs do not get the height of the divs below the- and everything is a mess!
my aspx code:
<div class="tabcontent">
<div class="tabcontent-inner">
<div class="tabcontent-inner-left grid_20">
</div>
<div class="tabcontent-inner-right grid_20">
</div>
</div>
</div>
my stylesheet css:
.tabcontent-inner {
width: inherit;
padding: 10px 10px 10px;
margin-top: 10px;
margin-bottom: 1px;
position: relative;
display: block;
}
.tabcontent-inner-left {
padding: 20px 20px;
border-left: solid 1px #ddd;
width: 45%;
float: left
}
.tabcontent-inner-right{
padding: 20px 20px;
border-right: solid 1px #ddd;
width: 45%;
float: right
}
Basically, I want the tabcontent-inner div to get the height of what is inside of it.
this is because on parent .tabcontent-inner you need to put overflow:auto property so that it will cover ups its children's height
you can find more suitable answer here How do you keep parents of floated elements from collapsing?
Add this code to Your CSS
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
and
change
<div class="tabcontent-inner">
to
<div class="tabcontent-inner clearfix">
Semi colons are missing in the css after
float : left
and
float : right