Overlaping text with radio buttons in bootstrap col - javascript

I have a radio button with .html added to it. But the result it's a overlap text with the radio button.
Overlapping Radio buttons with text.
Also as you can see the text goes downward instead of covering all of the bootstrap col-4 , col-4, col-4.
function addQAs() {
randQuestion = Math.floor(Math.random() * library.length); //this is a nuber, dont forget!
console.log(randQuestion);
$("#question").html(library[randQuestion].question);
$("#answer1").html(library[randQuestion].answer[0]);
$("#answer2").html(library[randQuestion].answer[1]);
$("#answer3").html(library[randQuestion].answer[2]);
}
<div class="container-fluid">
<form>
<div class="row">
<div class="col-4">
<input type="radio" id="answer1" value="answer1" index="0">
<label for="answer1"></label>
</div>
<div class="col-4">
<input type="radio" id="answer2" value="answer2" index="1">
<label for="answer2"></label>
</div>
<div class="col-4">
<input type="radio" id="answer3" value="answer3" index="2">
<label for="answer3"></label>
</div>
</div>
</form>
</div>
I havent tried any CSS for this issue.
Thanks

try to add this css
.col-4 {
position: relative;
}
input[type="radio"] {
position: absolute;
left: -15px; // set as per your requirement
top: 5px; // set as per your requirement
}

Related

How to use focus in this satisfaction survey

I need to use focus for this satisfaction survey, but I don't know how to use it, help me!
I need to select one of the faces for a satisfaction survey. I send the satisfaction survey of example. I am working in Angular, so if it's possible, I need the typescript. This was my attempt, but I can't get the svg RELLENO to highlight. I don't know where to put the focus. I don't know if the structure used is the right one.
Images face are in SVG example Cara-muy-feliz Relleno
<form action="/action_page.php" class="form-satisfaction">
<div class="items-calification row align-items-start">
<input id="test" class="calification" type="image"
src="./assets/images/page/dashboard/satisfaction-survey/Cara-triste.svg">
<div id="scripted" class="circle">
<img src="./assets/images/page/dashboard/satisfaction-survey/Relleno.svg">
</div>
<label class="face">
<h3>
Deficiente
</h3>
</label>
<input class="calification" type="image"
src="./assets/images/page/dashboard/satisfaction-survey/Cara-neutra.svg">
<div id="circle" class="circle">
<img src="./assets/images/page/dashboard/satisfaction-survey/Relleno.svg">
</div>
<label class="face">
<h3>
Regular
</h3>
</label>
<input class="calification" type="image"
src="./assets/images/page/dashboard/satisfaction-survey/Cara-feliz.svg">
<div id="circle" class="circle">
<img src="./assets/images/page/dashboard/satisfaction-survey/Relleno.svg">
</div>
<label class="face">
<h3>
Bueno
</h3>
</label>
<input class="calification" type="image"
src="./assets/images/page/dashboard/satisfaction-survey/Cara-muy-feliz.svg">
<div id="circle" class="circle">
<img src="./assets/images/page/dashboard/satisfaction-survey/Relleno.svg">
</div>
<label class="face">
<h3>
Excelente
</h3>
</label>
</div>
</form>
document.getElementById('test').onclick = () => {
document.getElementById('scripted').focus();
console.log('SÍ');
};
.form-satisfaction
overflow: hidden
.items-calification
position: relative
top: 90.76px
width: 1080px
height: 244.24px
left: 200px
.calification
position: relative
margin-left: -90px
.circle
img
z-index: -1
visibility: hidden
position: relative
left: -166px
.img:focus
visibility: visible

on selecting radio button, div is not displaying in html

i have created a radio button such that when user click any button some content is displayed in a div.
i have done the following code for it:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});
.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.cheque {
background: #ff0000;
}
.bank {
background: #228B22;
}
.cash {
background: #0000ff;
}
<div style="margin-top: 1%;" class="row">
<div class="col-md-12">
<div style="background-color: #f5f5f5; border-radius: 10px;" class="col-md-12 border-1px">
<div class="payment-method">
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="bank">
Direct Bank Transfer </label>
</div>
</div>
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="cheque">
Cheque Payment </label>
<p></p>
</div>
</div>
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="cash" checked="">
Pay In Cash </label>
</div>
</div>
</div>
<div class="bank box">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</strong> so i am here</div>
<div class="cheque box">Please send your cheque to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</div>
<div class="cash box">Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</div>
</div>
</div>
</div>
i have tried adding
> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
but no use
but when i select any radio button nothing is happening. can anyone please tell me what is wrong in my code. thanks in advance
Your are only missing the default show for the cash the rest is working fine.
$(document).ready(function() {
$(".cash").show();
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});
.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.cheque {
background: #ff0000;
}
.bank {
background: #228B22;
}
.cash {
background: #0000ff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="margin-top: 1%;" class="row">
<div class="col-md-12">
<div style="background-color: #f5f5f5; border-radius: 10px;" class="col-md-12 border-1px">
<div class="payment-method">
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="bank">
Direct Bank Transfer </label>
</div>
</div>
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="cheque">
Cheque Payment </label>
<p></p>
</div>
</div>
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="cash" checked="">
Pay In Cash </label>
</div>
</div>
</div>
<div class="bank box">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</strong> so i am here</div>
<div class="cheque box">Please send your cheque to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</div>
<div class="cash box">Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</div>
</div>
</div>
</div>

Combining two filters when clicking two different sections of buttons

I would like to combine two filters when clicking two different sections of buttons. Right now, when I click one button it removes the selection of the previous one. I have tried several functions but I have not been able to come with the right logic.
I have written a schema of my current status.
HTML
<!-- Buttons -->
<p> Language: <button class="btn" data-category="en"> EN </button> <button class="btn" data-category="it"> IT </button> </p>
<p> Stuff: <button class="btn" data-category="a"> A </button> <button class="btn" data-category="b"> B </button> <button class="btn" data-category="c"> C </button> </p>
<!-- Elements to select -->
<div class="element en a">
<p>en A</p>
</div>
<div class="element en b">
<p>en B</p>
</div>
<div class="element it c">
<p>it C</p>
</div>
<div class="element it b">
<p>it b</p>
</div>
js / jQuery
$(".btn").click(function(e){
e.preventDefault();
var category = $(this).data("category")
$('.element').hide();
$('.element.'+category).fadeIn();
})
It's also in this fiddle.
Also, nice to haves:
I would like to know how to color the button once it is selected.
Add a reset button (which I guess would be easy adding "reset" in data-category.
Thanks for the advice and the suggestions in advance!
One method is to use radio buttons. They allow one selection per group.
One downside is that you can't uncheck a radio button unless its by selecting another one in the same group, so I've added a "reset" button to each group.
Upon selection, I'm building a selector string of classes based on the checked buttons.
$(".mycb input").on('change', function(e) {
// select all the checked buttons.
var $checked = $('.mycb :checked');
// build an array of all the checked values.
var checked_classes = $checked.map(function() {
return this.value;
}).toArray();
// add the baseline "element" class to the array.
checked_classes.unshift('.element');
// build the class selector string.
var classes=checked_classes.join('.');
// debug the class selector string.
// console.log(classes);
// hide all elements.
$('.element').hide();
// show the elements that match the class selector string.
$(classes).fadeIn();
});
$('.reset').on('click', function() {
var $container = $(this).closest('p');
$('input', $container).prop('checked', false).last().trigger('change');
});
btn-selected {
color: red;
}
.mycb input {
display: none;
}
.mycb span {
background-color: white;
border: 1px solid #CCC;
border-radius: .3em;
padding: 0 .3em;
cursor:pointer;
user-select: none;
}
.mycb input:checked+span {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Button -->
<p>Language:
<label class="mycb">
<input type="radio" name="lang" value="en">
<span>EN</span>
</label>
<label class="mycb">
<input type="radio" name="lang" value="it">
<span>IT</span>
</label>
<span class="mycb reset"><span>Reset</span></span>
</p>
<p>Stuff:
<label class="mycb">
<input type="radio" name="stuff" value="a">
<span>A</span>
</label>
<label class="mycb">
<input type="radio" name="stuff" value="b">
<span>B</span>
</label>
<label class="mycb">
<input type="radio" name="stuff" value="c">
<span>C</span>
</label>
<span class="mycb reset"><span>Reset</span></span>
</p>
<!-- Elements to select -->
<div class="element en a">
<p>en A</p>
</div>
<div class="element en b">
<p>en B</p>
</div>
<div class="element it c">
<p>it C</p>
</div>
<div class="element it b">
<p>it b</p>
</div>
I have forked your js fiddle to provide a solution using your CSS class
https://jsfiddle.net/sguex20k/
JavaScript
$('.btn').removeClass('btn-selected'); // resetting all buttons to remove class
/* other code */
$(this).addClass('btn-selected'); // adding class to clicked button
And the problem in your CSS you were missing the . in your selector
.btn-selected { }

text is beneath other text instead of next to it, though I haven't used any weird code

I made a quiz and the plan is when you click submit there is going to be some text next to the answers with some more information. But now, when I click on submit the information is displayed beneath the answers instead of next to it.
You can see the problem in question 2 answer 1 after submitting.
demo: https://plnkr.co/edit/OvcwBzfFte4A0F0NbNSi?p=preview
What can be the problem ?
<style>
.quizbox {
width: 58%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
margin-top: 7%;
text-align: center;
position: relative;
}
.quizstyle {
padding-right: 50%;
}
.row {
text-align: left;
margin-left: 10%;
}
</style>
<div class="quizbox">
<!-- open main div -->
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="quizstyle">
<h3>Moths are a member of what order?</h3>
<div class="row">
<input name="variable" type="radio" value="0" />Octagon</div>
<div> </div>
<div class="row">
<input name="variable" type="radio" value="0" />Leprosy</div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera</div>
<h3>Question 2</h3>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1</div> <span id="demo"></span>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3</div>
<h3>Question 3</h3>
<div class="row">
<input name="con" type="radio" value="0" />Answer 1</div>
<div class="row">
<input name="con" type="radio" value="33" />Answer 2</div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 3</div>
</div>
<input type="submit" onclick="myFunction()" value="Submit" />
</form>Your grade is: <span id="grade">__</span>
<p id="grade2"></p>
</div>
<!-- close main div -->
<span>fdf</span> <span>fdf</span><span>fdf</span>
fd
<script>
document.getElementById("form1").onsubmit = function(e) {
e.preventDefault();
variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
con = parseInt(document.querySelector('input[name = "con"]:checked').value);
result = variable + sub + con;
document.getElementById("grade").innerHTML = result;
var result2 = "";
if (result == 0) {
result2 = "I don't think you studied."
};
if (result == 33) {
result2 = "You need to spend more time. Try again."
};
if (result == 66) {
result2 = "I think you could do better. Try again."
};
if (result == 99) {
result2 = "Excellent!"
};
document.getElementById("grade2").innerHTML = result2;
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
hgf
<div> </div>
With these couple of changes, the text "Hello World" was getting displayed next to the answer.
Adding a css for the "demo" span tag to stay inline.
span#demo {
display: inline;
}
/* A small bonus */
.quizstyle {
padding-right: 20%;
}
Moving it inside your "row" div tag.
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1
<span id="demo"></span>
</div>
Ofcourse, you'll have to work out the other detailing (like adding sufficient margin between your row div and demo span, providing enough width for the span to be shown on same line, reducing it's size, giving it some color, etc.), but this kind of achieves what your original requirement was.
Just add float: right; for span#demo element

jqm flipswitch, float label left, switch right?

I am trying to get a bunch of flipswitches on a page in a mobile app.
I am using:
<div class="ui-content">
<form>
<fieldset>
<div data-role="fieldcontain">
<label for="checkbox-based-flipswitch">Checkbox-based:</label>
<input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch">
</div>
</fieldset>
</form>
</div>
It seems my "container" field is shortened. It does not stretch the entire width of the screen.
What am I missing?
I am looking to have the option fill the entire width of the screen. Label left, flipswitch right.
In this case a jQM grid might work better for you than a fieldcontain:
<div class="ui-grid-a flipContain">
<div class="ui-block-a">
<label for="chk1">Checkbox-based:</label>
</div>
<div class="ui-block-b">
<input type="checkbox" id="chk1" data-role="flipswitch" />
</div>
<div class="ui-block-a">
<label for="chk2">Checkbox-based:</label>
</div>
<div class="ui-block-b">
<input type="checkbox" id="chk2" data-role="flipswitch" />
</div>
</div>
Then with CSS, you can align the second column to the right and set the column widths as desired:
.flipContain .ui-block-a {
width: 70%;
line-height: 48px;
}
.flipContain .ui-block-b {
width: 30%;
text-align: right;
}
Apparently field-contain has been deprecated in 1.4 and will be removed in 1.5.
Can't you use a table width 100% and table cell ?
JsFiddle
<table width="100%">
<tr>
<td><label for="checkbox-based-flipswitch">Checkbox-based:</label></td>
<td><input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch"></td>
</tr>
</table>
And you can set the cell alignement as you want, as in the exemple both are centered.
td{
text-align:center;
}
You can set the alignment directly on the td JsFiddle :
<td align="right">

Categories