I have a div width a fixed width:
// CSS
#media only screen
.column.small-centered:last-child, .columns.small-centered:last-child {
float: none;
}
.lesson_lt_mc_div .small-centered {
margin-top: 15px;
margin-bottom: 15px;
width: 296px;
}
foundation.css:1#media only screen
.column.small-centered, .columns.small-centered {
margin-left: auto;
margin-right: auto;
float: none;
}
.text-left {
text-align: left !important;
}
// HTML
<div class="small-3 small-centered text-left columns">
<input type="radio" name="lt_mc_ans" value="1" id="lt_mc_ans_1"><span> 1. </span>
<label for="lt_mc_ans_1">I</label>
<br>
<input type="radio" name="lt_mc_ans" value="2" id="lt_mc_ans_2"><span> 2. </span>
<label for="lt_mc_ans_2">rsr rs rsrs rsrs r rrrs</label>
<br>
<input type="radio" name="lt_mc_ans" value="3" id="lt_mc_ans_3"><span> 3. </span>
<label for="lt_mc_ans_3">Very</label>
<br>
<input type="radio" name="lt_mc_ans" value="4" id="lt_mc_ans_4"><span> 4. </span>
<label for="lt_mc_ans_4">She</label>
</div>
The reason I'm using fixed width is that I want the div to be centered and for the text to be aligned to the left. The problem is, when the text is too long it wraps, making the options look ugly.
Is there a way to dynamically change the width of the div with jQuery or JavaScript? (I'm also open to CSS solutions, although I doubt there's any).
Use an outer and inner element.
Align the text of the outer element in the center. And display the inner element as an inline-block, so it will only be as width as its content.
.outer {
text-align: center;
background: lightblue;
}
.inner {
background: lightgreen;
display: inline-block;
text-align: left;
}
<div class="outer">
<div class="inner">
Some text in it
<br />and some more
<br/>and more
</div>
</div>
Note: instead of using an inner div, you could use your form... (saves you an element).
Edit
With your HTML (note that I've added the form tag)
.outer {
text-align: center;
background: lightblue;
}
.inner {
background: lightgreen;
display: inline-block;
text-align: left;
}
<div class="outer small-3 small-centered text-left columns">
<form class="inner">
<input type="radio" name="lt_mc_ans" value="1" id="lt_mc_ans_1"><span> 1. </span>
<label for="lt_mc_ans_1">I</label>
<br>
<input type="radio" name="lt_mc_ans" value="2" id="lt_mc_ans_2"><span> 2. </span>
<label for="lt_mc_ans_2">rsr rs rsrs rsrs r rrrs</label>
<br>
<input type="radio" name="lt_mc_ans" value="3" id="lt_mc_ans_3"><span> 3. </span>
<label for="lt_mc_ans_3">Very</label>
<br>
<input type="radio" name="lt_mc_ans" value="4" id="lt_mc_ans_4"><span> 4. </span>
<label for="lt_mc_ans_4">She</label>
</form>
</div>
USE display:table; margin:auto; on small-centered class and remove width...
If you change your width attribute to be a min-width attribute and then set the width attribute as follows:
width: intrinsic;
width: -moz-max-content;
width: -webkit-max-content;
It should behave as you expect. More information on the 'max-content' option available here.
Edit: A codepen using your html structure: here
Can you not just set div with min-width, rather than width in the css allowing it to expand as the text did?
Related
I am using react styled components as styling in my project ok let me point out what actually i am feeling not right is the text between the box and also need to style it if it is checked
what i have tried ?
I craeted a outer div and inside it i put radio input which i display none and thought i can style the outer element but that make the radio button not clickable any solution to this problem if you present react specific solution will be great.
.radio__input{
display:none;
}
.radiobox{
width:60px;
height:60px;
border:1px solid black;
}
//i want the div radiobox to styled when one radiobox is selected
<div class="radiobox">
<input type="radio" class="radio__input" name="radio"/>
XS
</div>
<div class="radiobox">
<input type="radio" class="radio__input" name="radio"/>
S
</div>
You need to keep the radio button somewhere, for the sake of accessibility, and to still be able to select it.
A common solution to styling radio buttons is to style their <label> element instead, and use the CSS Adjacent sibling combinator to style it depending on the radio button’s state.
Some more things should be taken into account to make the component accessible to users who need assistive technology:
you should also use <fieldset> to provide an accessible name to the option group, even though “Green” might be self-explanatory
focus needs to be visible, and since you are hiding the radio button itself, one solution is to show it on the fieldset
each radio button still needs an accessible name, so add some hidden text also inside the labels
.color-options {
display: flex;
padding: .2em;
gap: .4em;
}
.color-options:focus-within {
outline: .2em solid blue;
}
.color-option {
width: 2em;
height: 2em;
}
input:checked+.color-option {
outline: .2em solid darkseagreen;
}
/* kudos to Scott O'Hara
https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html */
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
<fieldset>
<legend>Color</legend>
<div class="color-options">
<input type="radio" name="color" value="gray" id="color-gray" class="visually-hidden">
<label class="color-option" style="background-color: gray" for="color-gray">
<span class="visually-hidden">
Gray
</span>
</label>
<input type="radio" name="color" value="black" id="color-black" class="visually-hidden">
<label class="color-option" style="background-color: black" for="color-black">
<span class="visually-hidden">
Black
</span>
</label>
<input type="radio" name="color" value="darkgreen" id="color-darkgreen" class="visually-hidden">
<label class="color-option" style="background-color: darkgreen" for="color-darkgreen">
<span class="visually-hidden">
Dark Green
</span>
</label>
</div>
</fieldset>
I used unique ids for every radio button, which is used by the <label> element's for attribute to associate the labels with the radio buttons. So now the input is also checked when the label is clicked. Then i just styled the initial and checked state. But remember that you can only style elements according to the checked state of an input when they are a sibling or children. You can't access the parent element like in this case the .radiobox container with pure css.
.radiobox {
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
display: inline-block;
}
input[type="radio"] {
appearance: none;
}
input[type="radio"] + label {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
input[type="radio"]:checked + label {
background: blue;
}
<div class="radiobox">
<input type="radio" id="s" name="radio"/>
<label for="s">S</label>
</div>
<div class="radiobox">
<input type="radio" id="m" name="radio"/>
<label for="m">M</label>
</div>
what i am trying to do is when i click on check box then div is display horizontal.
but in my below code when i click on checkbox then div is showing div is vertically.
but i try to make when i click on checkbox then div is show horizontally.
how can we do that using CSS
is there any help.
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
.selectt {
color: #fff;
padding: 30px;
display: none;
margin-top: 30px;
width:20%;
}
label {
margin-right: 15px;
}
.d-flex-wrapper {
display: flex;
}
.d-flex-wrapper > div{
margin-right:5px;
}
.d-flex-wrapper > div:last-chid{
margin-right:30px;
}
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {background-color: #008CBA;} /* Blue */
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div>
<label>
<input type="checkbox" name="colorCheckbox"
value="C"> C</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Cplus"> C++</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Python"> Python</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Java"> Java</label>
</div>
<div class="d-flex-wrapper"> <!-- Added New div start here -->
<div class="C selectt">
<button class="button button2">Blue</button>
</div>
<div class="Cplus selectt">
<button class="button button2">Blue</button>
</div>
<div class="Python selectt">
<button class="button button2">Blue</button></div>
<div class="Java selectt">
<button class="button button2">Blue</button></div> <!-- Added New div end's here -->
</div>
You Can use- Display Flex
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
.selectt {
color: #fff;
padding: 30px;
display: none;
margin-top: 30px;
width:20%;
background: green
}
label {
margin-right: 20px;
}
.d-flex-wrapper {
display: flex;
}
.d-flex-wrapper > div{
margin-right:20px;
}
.d-flex-wrapper > div:last-chid{
margin-right:0px;
}
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div>
<label>
<input type="checkbox" name="colorCheckbox"
value="C"> C</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Cplus"> C++</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Python"> Python</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Java"> Java</label>
</div>
<div class="d-flex-wrapper"> <!-- Added New div start here -->
<div class="C selectt">
<strong>C</strong>
is a procedural programming language
</div>
<div class="Cplus selectt">
<strong>C++</strong>
is a general purpose programming language</div>
<div class="Python selectt">
<strong>Python</strong>
is a widely used general-purpose, high level
programming language.</div>
<div class="Java selectt">
<strong>Java</strong>
is a most popular programming language
for many years.</div> <!-- Added New div end's here -->
</div>
I Hope it's Help You :)
Thanks
wrap the green boxes inside a div with the css property and value: display: flex;
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
.selectt {
color: #fff;
padding: 30px;
display: none;
margin-top: 30px;
width: 20%;
background: green
}
label {
margin-right: 20px;
}
/* Added for the wrapper */
.flex-wrap {
display: flex;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div>
<label>
<input type="checkbox" name="colorCheckbox" value="C"> C</label>
<label>
<input type="checkbox" name="colorCheckbox" value="Cplus"> C++</label>
<label>
<input type="checkbox" name="colorCheckbox" value="Python"> Python</label>
<label>
<input type="checkbox" name="colorCheckbox" value="Java"> Java</label>
</div>
<div class="flex-wrap"> <!-- Added opening div -->
<div class="C selectt">
<strong>C</strong> is a procedural programming language
</div>
<div class="Cplus selectt">
<strong>C++</strong> is a general purpose programming language</div>
<div class="Python selectt">
<strong>Python</strong> is a widely used general-purpose, high level programming language.</div>
<div class="Java selectt">
<strong>Java</strong> is a most popular programming language for many years.</div>
</div> <!-- Added closing div -->
I am trying to fit 7 buttons horizontally but am seeing some overflow on the smaller screen sizes.
Button Group Overflow
<div data-mini="true">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
<label for="checkbox-h-2a">Sun</label>
<input type="checkbox" name="checkbox-h-2b" id="checkbox-h-2b">
<label for="checkbox-h-2b">Mon</label>
<input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c">
<label for="checkbox-h-2c">Tue</label>
<input type="checkbox" name="checkbox-h-2d" id="checkbox-h-2d">
<label for="checkbox-h-2d">Wed</label>
<input type="checkbox" name="checkbox-h-2e" id="checkbox-h-2e">
<label for="checkbox-h-2e">Thu</label>
<input type="checkbox" name="checkbox-h-2f" id="checkbox-h-2f">
<label for="checkbox-h-2f">Fri</label>
<input type="checkbox" name="checkbox-h-2g" id="checkbox-h-2g">
<label for="checkbox-h-2g">Sat</label>
</fieldset>
</div>
Try set mini version applied directly in the fieldset tag, something like this:
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
Well, i came across the same requirement some time ago and i found out that is not really easy. This is how i solved it:
Assuming your <div data-mini="true"> has a class: <div data-mini="true" class="no-wrap"> :
.no-wrap {
box-sizing: border-box;
text-align: center;
width: 100%;
}
.no-wrap .ui-controlgroup-controls {
display: inline-block !important;
width: 100%;
}
.no-wrap .ui-controlgroup-controls .ui-checkbox {
float: left;
clear: none;
width: 14%; // <- 100% / num. of controls
}
.no-wrap .ui-btn {
text-overflow: initial !important;
}
.no-wrap label.ui-btn {
text-align: center;
padding-left: 0 !important;
padding-right: 0 !important;
}
Explanation: the width of each control shall be set in percent as 100 / num. of controls in your controlgroup. For example, if you need:
8 controls: width: 12.5%
7 controls: width: 14.2%
... and so on.
By adding the container div you can also specify the width of the whole controlgroup inside the JQM page:
.no-wrap .ui-controlgroup-controls {
display: inline-block !important;
width: 80%; // <- this will set the width of the whole controlgroup
}
DEMO: https://plnkr.co/edit/fFU7Zf5Wr2jD6anD9h4L?p=preview
Maybe it seems a little bit overcooked, but the reason is to keep things cross-browser, also in IE.
I have a radio button inside a css accordion and for some reason it doesnt work. Maybe the css I'm using for the accordion is overriding the radio button? maybe because the accordion is made from a check box that is causing problems? I've also put dojo controls inside the accordion and some work, some don't Below is the code: The first radio button outside the accordion works fine
HTML:
<input type="radio" name="colors" value="green" />Green <!--this works fine-->
<input type="radio" name="colors" value="red" />Red
<section id="accordionMTF">
<div>
<div style="width: 450px;
height: 80px"></div>
<input type="checkbox" id="checkMTF-1" checked="checked" />
<label for="checkMTF-1">Input System Info</label>
<article>
<input type="radio" name="colors" value="green" />Green <!--this doesnt work-->
<input type="radio" name="colors" value="red" />Red</article>
</div>
<div>
<input type="checkbox" id="checkMTF-2" />
<label for="checkMTF-3">Input Marking Information</label>
<article>
<p style="width: 450px;
height: 400px">Fill out form</p>
</article>
</div>
<div>
<input type="checkbox" id="checkMTF-3" />
<label for="checkMTF-4">Complete and Submit</label>
<article>
<p style="width: 450px;
height: 400px">Fill out form</p>
</article>
</div>
</section>
css:
/Mark Ticket Form Accordion/
#accordionMTF input {
display: none;
}
#accordionMTF label {
background: #eee;
border-radius: .25em;
cursor: pointer;
display: block;
margin-bottom: .125em;
padding: .25em 1em;
z-index: 20;
}
#accordionMTF label:hover {
background: #ccc;
}
#accordionMTF input:checked + label {
background: #ccc;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
color: white;
margin-bottom: 0;
}
#accordionMTF article {
background: #f7f7f7;
height:0px;
overflow:hidden;
z-index:10;
}
#accordionMTF article p {
padding: 1em;
}
#accordionMTF input:checked article {
}
#accordionMTF input:checked ~ article {
border-bottom-left-radius: .25em;
border-bottom-right-radius: .25em;
height: auto;
margin-bottom: .125em;
}
I have a fiddle:
here
Thanks
So long as you continue to use the same HTML structure, all you need to do is rework your css a little bit. The follow css
#accordionMTF input {
display: none;
}
Needs to look like this
#accordionMTF > div > input[type='checkbox'] {
display : none;
}
This is an excellent attempt to create an accordion without javascript. You might also consider incorporating CSS3 animations.
There is also a bug where your labels have the wrong for attribute value.
Here is a working fiddle http://jsfiddle.net/czo2m22s/21/
The developer of you accordion has decided to hide ALL inputs (!?)
#accordionMTF input {
display: none;
}
A more sane approach would be to give the inputs that are required for the accordion functionality a class (.hidden) and use that as a selector instead of blanket hidding all inputs:
<input type="checkbox" class="hidden" id="checkMTF-1" class="hidden" />
.hidden {
display: none;
}
WORKING EXAMPLE
here is the reason:
accordionMTF input {
display: none;
}
I am trying to insert an image instead of a check on the check box. The code that am using is:
<html>
<head>
<style>
.bl {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #175899), color-stop(0.5, #7da4bf), color-stop(3, #9fbed3));
width: 90%;
height:30px;
border-radius: 5px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
margin-bottom:10px;
}
p
{
font-family:"Times New Roman";
font-size:10px;
}
checkbox
{
width: 75px;
height: 75px;
padding: 0 5px 0 0;
background: url(images/Green_tick.png) no-repeat;
display: block;
clear: left;
float: left;
}
.checked {
position: absolute;
width: 200px;
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial,sans-serif;
background: url(images/Green_tick.png) no-repeat;
overflow: hidden;
}
</style>
</head>
<body>
<script>
function Checked(id)
{
if(id.checked==1)
{
alert("Checked");
}
else
{
alert("You didn't check it! Let me check it for you.")
id.checked = 1;
}
}
</script>
<div class="main_menu">
<a id='menu' href="javascript:" onclick="loadMenuPage();"></a>
</div>
<p>
All verifications required for QR7 can be uploaded here. Any item which still requires verification is
marked in red until picture has been attached.
</p>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Income </input>
</div>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Property </input>
</div>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Court Order Child Support </input>
</div>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Future Medical Child Support </input>
</div>
</body>
</html>
Any suggestions on how do i achieve it. As of now i get a normal tick in the checkbox.
Thanks in advance.
This post is old but this is what i suggest:
Associate labels to your checkboxes like this:
<input type="checkbox" value="1" id="c1" />
<label class="check" for="c1"></label>
Hide by css your checkboxes:
.checkboxes input[type=checkbox]{
display:none
}
Style the label as you want to. I created a simple jsfiddle that fully demonstrate how to use personnalise checkboxes. I use backgrond-color in this example, but you could easily use your background image instead.
Here is the jsfiddle
Styling checkboxes using CSS is a nightmare and you'll never achieve the look you want. Try using a jQuery plugin, most of them 'hide' the checkbox by positioning the input off the visible screen and use a span replacement with a background image that you can edit to suit your needs.
Something like:
http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Also check this thread:
Pure CSS Checkbox Image replacement