I'm inexperienced with JS and jQuery and have this simple script written to total up some numbers of form inputs within the scope of an h3 into a div in that same scope. But I'm coming up with nothing. Using the Console, I can tell that it's getting the initial values for the keyup event correctly, but when I attempt to get these items within an h3 scope, it comes up with an empty array. Reading the jQuery() docs,
$( 'input#survey_scores_score_item, div.my_group')
yields a hash which nicely shows three arrays of these groupings. But also all the individual input items. So clearly, I'm not setting up these query correctly. How would I set up the scoping so that the individual inputs are not cluttering up the array so I can run the jQuery .each over the groups?
Here is my markup:
<body>
<form accept-charset="UTF-8" action="/surveys/1" class="edit_survey" id="edit_survey_1" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="patch"></div>
<h2>General</h2>
<h3>Policies and Procedures</h3>
<div class="my_group">
<div class="item_enclosure row">
<div class="item_text small-9 large-9 columns">
GivEx and Smart Cards being tracked?
</div>
<div class="small-3 columns">
<div class="item_scoring">
<div class="row">
<div class="item_score item-6 small-6 columns">
<input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="2" type="text">
<input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">
</div>
<div class="item_hiscore item-6 small-6 columns">
/ 2
</div>
</div>
</div>
</div>
</div>
<div class="item_enclosure row">
<div class="item_text small-9 large-9 columns">
Change Fund/Petty Cash (810) reviewed daily?
</div>
<div class="small-3 columns">
<div class="item_scoring">
<div class="row">
<div class="item_score item-8 small-6 columns">
<input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="5" type="text">
<input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">
</div>
<div class="item_hiscore item-8 small-6 columns">
/ 5
</div>
</div>
</div>
</div>
</div>
<div class="item enclosure row">
<div class="item_text total small-9 large-9 columns">
Total:
</div>
<div class="item_scoring item_scoring_total small-3 total columns">
<div class="row">
<div class="item_score item_score_total small-6 columns">
XX
</div>
<div class="item_hiscore total small-6 columns">
/ 7
</div>
</div>
</div>
</div>
</div>
<h3>Physical Security</h3>
<div class="my_group">
<div class="item_enclosure row">
<div class="item_text small-9 large-9 columns">
POS area is neat and well organized
<!-- br--><p>No clutter around POS - Check card readers
<br>Bills $20.00 and larger and checks under till and neatly organized</p>
</div>
<div class="small-3 columns">
<div class="item_scoring">
<div class="row">
<div class="item_score item-7 small-6 columns">
<input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="1" type="text">
<input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">
</div>
<div class="item_hiscore item-7 small-6 columns">
/ 1
</div>
</div>
</div>
</div>
</div>
<div class="item enclosure row">
<div class="item_text total small-9 large-9 columns">
Total:
</div>
<div class="item_scoring item_scoring_total small-3 total columns">
<div class="row">
<div class="item_score item_score_total small-6 columns">
XX
</div>
<div class="item_hiscore total small-6 columns">
/ 1
</div>
</div>
</div>
</div>
<h3>Safety</h3>
<div class="my_group">
<div class="item_enclosure row">
<div class="item_text small-9 large-9 columns">
Attendant wearing gloves
</div>
<div class="small-3 columns">
<div class="item_scoring">
<div class="row">
<div class="item_score item-10 small-6 columns">
<input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="8" type="text">
<input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">
</div>
<div class="item_hiscore item-10 small-6 columns">
/ 8
</div>
</div>
</div>
</div>
</div>
<div class="item_enclosure row">
<div class="item_text small-9 large-9 columns">
Proper Lifting by attendants
</div>
<div class="small-3 columns">
<div class="item_scoring">
<div class="row">
<div class="item_score item-11 small-6 columns">
<input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="5" type="text">
<input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">
</div>
<div class="item_hiscore item-11 small-6 columns">
/ 5
</div>
</div>
</div>
</div>
</div>
<div class="item_enclosure row">
<div class="item_text small-9 large-9 columns">
Area in and around DEC clean
</div>
<div class="small-3 columns">
<div class="item_scoring">
<div class="row">
<div class="item_score item-9 small-6 columns">
<input id="survey_scores_score_item" name="survey[scores][score_item]" placeholder="1" type="text">
<input as="hidden" id="survey_scores_inspection_id" name="survey[scores][inspection_id]" type="hidden" value="1">
</div>
<div class="item_hiscore item-9 small-6 columns">
/ 1
</div>
</div>
</div>
</div>
</div>
<div class="item enclosure row">
<div class="item_text total small-9 large-9 columns">
Total:
</div>
<div class="item_scoring item_scoring_total small-3 total columns">
<div class="row">
<div class="item_score item_score_total small-6 columns">
XX
</div>
<div class="item_hiscore total small-6 columns">
/ 14
</div>
</div>
</div>
</div>
</div>
<input name="commit" type="submit" value="Edit survey">
</form>
</main>
</body></html>
The answers are helping me to see that I'm unable to select a specific tag within an h3 because it's its own element. so I've modified the markup so that each logical grouping is within a div with a class of "my_group". I'm trying to get my script in Fiddle to work on totaling up all the inputs found within these div's. I need to find a way to logically have this script find within these logical units.
My updated fiddle is here: http://jsfiddle.net/sam452/Yk33t/7/
I hope someone is kind enough to educate me on how I should scope this and get this script to work as expected.
The selector $('input#survey_scores_score_item', 'h3') is equivalent to $('h3').find('input#survey_scores_score_item').
Since the h3 contains no children you will never select any elements. If you already have the id of the element there is no need for placing the selector in any sort of context, just use: $("#survey_scores_score_item").
Related
What I'm trying to get is the immediate upper div value (Accounts Admin) when I'm clicking on a radio button.
Below is my HTML structure. Whenever I click on the admin or alan radio button give me the div inner text Accounts Admin.
How can get that value?
<div class="display-flex flex-row">
<div class="p-1 ez-sub-heading mt-1">
Accounts Admin
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input
id="admin"
type="radio"
value="admin"
name="eng-name"
class="eng-name userlist active"
/>
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input
id="alan"
type="radio"
value="alan"
name="eng-name"
class="eng-name userlist active"
/>
</div>
</div>
</div>
I'm trying this way but I can't get the value.
$(this).parent().find(".ez-sub-heading").text()
Assuming you have multiple blocks of this, I would change the html structure a bit so you have a wrapper around the complete block. With the closest() function you can find the first wrapper parent and then use find() to look for the header element.
You can use trim() to remove the whitespace caused by code indention.
$('.userlist').on('click', (e) => {
var text = $(e.currentTarget).closest('.wrapper').find('.ez-sub-heading').text();
console.log(text.trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-flex flex-row wrapper">
<div class="p-1 ez-sub-heading mt-1">
Accounts Admin
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
</div>
<div class="display-flex flex-row wrapper">
<div class="p-1 ez-sub-heading mt-1">
Accounts Admin 2
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="admin" type="radio" value="admin" name="eng-name2" class="eng-name userlist active">
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="alan" type="radio" value="alan" name="eng-name2" class="eng-name userlist active">
</div>
</div>
</div>
</div>
With your HTML structure as it is, you need to find the closest (nearest parent) .row and then use prevAll to get the header row.
$(this).closest(".row").prevAll(".flex-row").first().text().trim()
$("input.userlist").click(function() {
console.log($(this).closest(".row").prevAll(".flex-row").first().text().trim())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-flex flex-row">
<div class="p-1 ez-sub-heading mt-1">
Accounts Admin
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
<div class="display-flex flex-row">
<div class="p-1 ez-sub-heading mt-1">
Second Header
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
A small change to the HTML structure and adding some classes would make this much simpler (not included here as already suggested in the other answer).
I have an index like this:
<body>
<div id="page-container">
<div id="header">
<div class="main">
<div class="content">
<div id="website-link"></div>
<div id="cart">
<div class="price">120,00 €</div>
<div class="cart-icon"><img src="img/cart.png" /></div>
<div class="items">0</div>
</div>
</div>
</div>
<div class="bottom">
<div class="content">
<div id="bradcrumbs">3D TOOL > Upload > <span class="active"> Customize</span></div>
<div id="menu">
<ul>
<li>Help</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main-content">
<div class="block-container" id="block-container">
<div id="tools">
<form action="#" enctype="multipart/form-data" method="post" id="uploader">
<input type="file" name="fileUpload" id="fileUpload" style="display: none" multiple accept=".stl,.obj,.stp,.step">
<label for="fileUpload">
<div id="addmore" style="cursor: pointer"></div>
</label>
</form>
<div id="checkout">Checkout</div>
</div>
</div>
</div>
</body>
</html>
using a jquery function i prepend this code inside block-container div:
<div id='upload-container-<?php echo $i;?>' class='upload-container'>
<div class="form-data">
<div class="col col1">
<div class="col-content"><img src="img/square.jpg" /></div>
<div class="col-info">Nome del file</div>
</div>
<div class="col col2">
<div class="col-content">
<label class="label">MATERIALI</label>
<div class="select-style">
<?php
echo"<select name='materiali' class='materiali' autofocus tabindex='20' >";
foreach($oxmL->Materials->Material as $material)
{
echo "<option value=$material->MaterialID>$material->Name</option>";
}
echo"</select>";
?>
</div>
<label class="label">FINITURA</label>
<div id="selectmateriali2"class="select-style">
<?php
$id=$oxmL->Materials->Material['0']->MaterialID;
echo"<select name='materiali2' class='materiali2' id='materiali2' autofocus tabindex='20'>";
foreach($oxmL->Materials->Material as $material)
{
if($material->MaterialID==$id)
{
foreach($material->Finishes->Finish as $finish)
{
echo "<option value=$finish->FinishID>$finish->Name</option>";
}
}
}
echo"</select>";
?>
</div>
<label class="label">QUANTITA</label>
<input name="quantity" id="quantity" type="number" class="quantita" min="1" step="1" value="1">
</div>
<div class="col-info"></div>
</div>
<div class="col col3">
<div class="col-content">
<div class="size-form">
<div class="label">Resize</div>
<input class="size" type="text" value="100"/>
</div>
<div class="size-text">Change the size of your object in percent</div>
<div class="size-info">
<div class ="box-title">
<div class="title-icon"><img src="img/3dpr-form-xyz-cube.png" /></div>
</div>
<div class="axis-area">
<div class="axis axis-x">X: <label for="x" class="labelx">2</label></div>
<div class="axis axis-y">Y: <label for="y" class="labely">3</label></div>
<div class="axis axis-z">Z: <label for="z" class="labelz">4</label></div>
</div>
</div>
</div>
<div class="col-info">
<div class="icons">
<div class="button button-duplicate"></div>
<div class="button button-delete"></div>
</div>
<div class="price">450.20 €</div>
</div>
</div>
</div>
<div class="item-info">
<div class="filename col col1"> <label for="filename">filename.ciops</label></div>
<div class="icons col col2">
<div class="button button-zoom"></div>
<div class="button button-duplicate"></div>
<div class="button button-delete"></div>
</div>
<div class="price col col3"> <label for="price" class="labelprice">450.20</label> €</div>
</div>
</div>
I want to had a click listener to the div with the "button button-duplicate" class, i made it like this:
$('#block-container').on('input','.quantita',quantityChanged);
$('#block-container').on('input','.size',scaleChanged);
$('#block-container').on('click','.button button-delete', function(){
alert("ok");
//some code
});
$('input[type=file]').on('change', prepareUpload);
$('form').on('submit', uploadFiles);
but it doesn't works, instead every other listener in the page works using #block-container as static element. What can i do? Any suggestion? Thank you
The problem with your code is your selector.
You have:
$('#block-container').on('click','.button button-delete', function(){
alert("ok");
//some code
});
And it should be:
$('#block-container').on('click','.button.button-delete', function(){
alert("ok");
//some code
});
When you want to select an element by two or more classes, you have to write the class selectors all together, without white spaces between them, in this way '.class1.class2.class3'
These are the set of divs where i want to add the loop on some count.
I have tried jquery and javascript but doesn't work. Please help out.
It takes a count from checkbox and the count is values selected in checkbox the following set of divs need be populated dynamically. I have written a jquery that gets the count as well as the checkbox values.As and when user selects these boxes the set of divs need to be appear as the number of counts.
function arrayValues(item, index)
{
var cd = $("input[name=car_damage]:checked");
var eg = cd.map(function () {return this.value;}).get().join(",");
var temp = new Array();
temp = eg.split(",");
text="";
alert(temp);
//alert(eg);
var ef = cd.size();
alert(ef);
}
Checkbox code:
<hr>
<div class="car_map" id="carmap">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4">
<div class="item">
Front
<input type="checkbox" name="car_damage" value="Front" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Front Wing Left
<input type="checkbox" name="car_damage" value="Front Wing Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Front Wing Right
<input type="checkbox" name="car_damage" value="Front Wing Right"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4">
<div class="item">
Bonnet
<input type="checkbox" name="car_damage" value="Bonnet"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Windscreen
<input type="checkbox" name="car_damage" value="Windscreen"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-5 col-sm-4">
<div class="item">
Front Door Left
<input type="checkbox" name="car_damage" value="Front Door Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Front Door Right
<input type="checkbox" name="car_damage" value="Front Door Right"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Roof
<input type="checkbox" name="car_damage" value="Roof"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Back Door Left
<input type="checkbox" name="car_damage" value="Back Door Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Back Door Right
<input type="checkbox" name="car_damage" value="Back Door Right"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Rear Windscreen
<input type="checkbox" name="car_damage" value="Rear Windscreen"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Rear Left
<input type="checkbox" name="car_damage" value="Rear Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Rear Right
<input type="checkbox" name="car_damage" value="Rear Right"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Rear
<input type="checkbox" name="car_damage" value="Rear"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-custom btn-sm btn-decline center-block" data-scroll="step3">Back</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-custom btn-sm btn-decline center-block">Save For Later</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-sm btn-custom center-block" data-scroll="step5" id="add_trip" onclick="arrayValues()">Continue</div>
</div>
</div>
</div>
<hr>
<div class="col-xs-12 col-sm-6">
<div class="form-label">
Rear
</div>
<div class="photo-picker" id="photo-picker">
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="box photos">
<div class="row">
<div class="col-xs-12">
<h4>Photo Instructions</h4>
</div>
</div>
<div class="photo-sample" id="photo-sample">
<div class="row">
<div class="col-xs-12">
<div class="form-sublabel">
Stand approx. 2m back from the Rear of the vehicle.</div>
<imgsrc="/hfiprojectstorefront/_ui/desktop/common/hfiproject/images/placeholder-photo.png" class="img-responsive center-block" alt="" />
</div>
</div>
</div>
<div class="photo-real" id="photo-real">
<div class="row">
<div class="col-xs-12">
<div class="cont">
<video id="v" class="img-responsive center-block"></video>
<div class="player-buttons" id="take" style="display:none;"></div>
</div>
<canvas id="canvas" style="display:none;"></canvas>
<img src="" id="photo" class="img-responsive center-block" />
</div>
<div class="col-xs-12">
<div class="form-label">
Was this photo taken at the scene?
</div>
</div>
<div class="col-xs-12">
<div class="list-group segmented-control">
<span class="list-group-item half active">
YES
<input type="radio" name="scene_photo" value="YES" checked="checked"/>
</span>
<span class="list-group-item half ">
NO
<input type="radio" name="scene_photo" value="NO"/>
</span>
</div>
</div>
<div class="col-xs-12">
<div class="form-label">
Optional Comment
</div>
</div>
<div class="col-xs-12">
<textarea class="form-control" name="optional" id="optional"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
Delete
</div>
<div class="col-xs-12 col-sm-6">
Save
</div>
</div>
</div>
</div>
</div>
<hr>
It is not clear the solution you are seeking.
However requiring the least amount of work would be creating a function to execute on change and jquery to manipulate your DOM elements not a great solution though if you require state management.
I believe a better solution would be use reactjs where use can create components and utilise jsx.
Or AngularJS frameworks where you can do an ng-repeat or custom directive that takes inputs to display your divs.
It's really not clear what you are trying to populate, but you can generate any DOM element dynamically like this.
fnCreateDOMElement = function(el, num, context) {
var e = document.createElement(el);
for(var i=0; i<num; i++){
document.context.appendChild(e);
}
}
above snippet could be utilized like this.
document.getElementById("populator").addEventListener('change', function(){
//reset contents of container if needed. comment if not needed
document.getElementById('container').innerHTML = "";
var times = this.value;
for(var i=0; i<times; i++) {
var mydiv = document.createElement('div');
var myparag = document.createElement('p');
mydiv.setAttribute('class', 'foo');
myparag.setAttribute('class', 'fooized');
var txt = document.createTextNode('Foo #'+(i+1));
myparag.appendChild(txt);
mydiv.appendChild(myparag);
document.getElementById('container').appendChild(mydiv);
}
});
<div id="container">
</div>
<input type="number" min="0" placeholder="how many?" id="populator">
above functions can be refactored with javascript's default/optional arguments.
here is the code to reproduce the issue in bootstrap3.
what I want is to align the radio buttons below the center of the quiz title, while keeping text align left.
current title is inline flow by default bs3 sample form structure.
i'm thinking if using
position absolute; or display:block/inline-block; margin-left:auto; margin-right:auto; display:flex; methods etc. might break the responsive flow. any suggestions how you balance responsive and align nicely ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="main-content">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h3 class="quiz-title" style="">Question: Do you think it's easy to center align the radio button groups and keep bootstrap responsive.</h3>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="">
<input type="radio" name="Q2[score]" value="1" required="required">Agree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]"" class="">
<input type="radio" name="Q2[score]" value="2" required="required">Neither Agree nor Disagree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="answered">
<input type="radio" name="Q2[score]" value="3" required="required">Disagree
</label>
</div>
</div>
</div>
</div>
<div class="clear-both" style="clear:both;"></div>
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<button type="button" class="NextQuizBTN btn btn-default">NEXT</button>
</div>
</div>
</div><!--end of container-fluid-->
</div>
</body>
I received some suggestions among below answers for making it appear like center aligned in bootstrap3, however I also found some pitfalls using the above method , listed in below picture I roughly made.
Both the Answer text in radio label and the Quiz Title text length are Variable, so this is the tricky part in this case to make it center aligned while keep responsive using css.
Add Some CSS
.radio{display:inline-block;}
Add Class radio parent div to col-xs-12 with text-center
Have you tried changing the class "col-xs-12" to "col-xs-8 col-xs-offset-4" to center it?
You can achieve this by wrapping all your radio button divs inside a parent div. And then placing this div accordingly to the device using offset.
<div class="col-xs-8 col-xs-offset-4 col-sm-8 col-sm-offset-4 col-md-7 col-md-offset-5">
//.. all your radio buttons div's inside this
<div>
Below is the working snippet. Have a check.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="main-content">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h3 class="quiz-title" style="">Question: Do you think it's easy to center align the radio button groups and keep bootstrap responsive.</h3>
</div>
<div class="form-group">
<input type="hidden" name="Q2[cat]" value="Conscientiousness">
</div>
<div class="form-group">
<input type="hidden" name="Q2[POST_ID]" value="88">
</div>
<div class="col-xs-8 col-xs-offset-4 col-sm-8 col-sm-offset-4 col-md-7 col-md-offset-5">
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="">
<input type="radio" name="Q2[score]" value="1" required="required">Agree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]"" class="">
<input type="radio" name="Q2[score]" value="2" required="required">Neither Agree nor Disagree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="answered">
<input type="radio" name="Q2[score]" value="3" required="required">Disagree
</label>
</div>
</div>
</div>
</div>
</div>
<div class="clear-both" style="clear:both;"></div>
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<button type="button" class="NextQuizBTN btn btn-default">NEXT</button>
</div>
</div>
</div>
<!--end of container-fluid-->
</div>
</body>
I'm trying to display the details of an email side by side (this is only a section of the full page) but the details from the row containing the from/to and date/cc/bcc information overlap a lot before stacking when the page resizes and I'd like them to stack before this problem arises. The following is the simplified version of what I have:
<div>
<div class="row">
<div class="col-xs-10">
<span style="font-weight:bold;" data-bind="text:Subject"></span>
</div>
<div class="col-xs-2">
<button class="btn btn-default" style="float:right; height:30px;">
<img src="..." style="max-height:20px; border:none;" />
</button>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">FromName</div>
<div class="col-xs-12">email</div>
<div class="col-xs-12">ToName</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">Date: </div>
<div class="col-xs-12">Cc: </div>
<div class="col-xs-12">Bcc: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">date</div>
<div class="col-xs-12">Cc address</div>
<div class="col-xs-12">Bcc address</div>
</div>
</div>
</div>
</div>
</div>
<div>
Bootply Example
Columns overlap because the col-xs-2 is too small for the content in it:
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
Inspect with Dev tools the <div class="col-xs-2"> which contains From: to see that when the text overlaps the content area is smaller than the text length.
To solve it you can change the col-xs-NUMBER for a bigger NUMBER (try with 4) also changing the detailed column (to 8, if you replace the previous with 4).