I'm finding a solution. When the user lands on the page scroll down normally when the main page scroll ends I have a fixed height footer with scroll bar. I want to scroll the fixed height footer to the end without the taking the mouse on the section. Using Bootstrap but this feature is completely different.
Hide the scrolling bar of the fixed height footer
Scroll the content to the bottom with mouse scroll no matter if the user mouse is on the section or not.
Reset the footer position to the top when the user scroll the main page.
Here is the image to clear the understanding.
Image link
<div id="sidebar">
<div id="scroller">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="Callus">Call Us <span>+56465454</span>
</p>
</div>
<!-- col-md-3 -->
<div class="col-md-3 col-sm-6 col-xs-12">
<p class="share">Share
</p>
</div>
<!-- col-md-3 -->
<div class="col-md-6 col-sm-12 col-xs-12 no-gutter">
<div class="col-md-3 col-sm-12 col-xs-12">
<p class="course">Get Our Free Course</p>
</div>
<!-- col-md-3 -->
<div class="col-md-9 col-sm-12 col-xs-12 no-gutter">
<div class="col-md-9 col-sm-8 col-xs-12 no-gutter">
<div class="form-group">
<input type="email" class="form-control newsletter" placeholder="Email address">
</div>
<!-- form-group -->
</div>
<!-- col-md-9 -->
<div class="col-md-3 col-sm-4 col-xs-12">
<button type="submit" class="btn btn-default outlineSubmit">Sign Up</button>
</div>
<!-- col-md-3 -->
</div>
<!-- col-md-9 -->
</div>
<!-- col-md-6 -->
</div>
<!-- row -->
</div>
<!-- container -->
<hr />
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 FooterForm">
<div class="col-md-8 col-sm-8 col-xs-12 no-gutter">
<h4>Say Hello</h4>
<div class="footerForm form-style" id="contact_form">
<div id="contact_results"></div>
<div id="contact_body">
<div class="form-group col-md-6 col-sm-6 col-xs-12 no-gutter">
<input type="text" name="name" id="name" required="true" class="input-field form-control footerFields" placeholder="Name"/>
<input type="text" name="surname" id="surname" required="true" class="input-field form-control footerFields" placeholder="Surname"/>
<input type="email" name="email" required="true" class="input-field form-control footerFields" placeholder="Email"/>
</div><!-- col-md-6 -->
<div class="form-group col-md-6 col-sm-6 col-xs-12 no-gutter">
<textarea name="message" id="message" class="textarea-field form-control" required="true" rows="3"></textarea>
<input type="submit" id="submit_btn" value="Submit" class="btn outlineSubmit2" />
</div><!-- col-md-6 -->
</div><!-- contact_body -->
</div><!-- contact_form -->
</div><!-- col-md-8 -->
<div class="col-md-3 col-sm-3 col-xs-12 customRight">
<h4>Sitename</h4>
<p class="address">Address</p>
<h4>Twitter</h4>
<p class="address"><i class="fa fa-twitter"></i> #twitter
</p>
</div>
<!-- col-md-3 -->
</div>
<!-- col-md-12 -->
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-12 col-sm-12 col-xs-12 no-gutter">
<p class="copyright">COPYRIGHT 2015 ARTIOS. All rights reserved.</p>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 no-gutter">
<div id="top-link-block" class="goTop pull-right">
<a href="#top" class="linkup" onclick="$('html,body').animate({scrollTop:0},'slow');return false;">
<i class="fa fa-angle-up"></i>
</a>
</div><!-- top-link-block -->
</div>
</div><!-- col-md-12 -->
</div><!-- row -->
</div><!-- container -->
</div><!-- footer -->
</div>
</div>
CSS
#sidebar{
float: left;
width: 100%;
height: 300px;
border: 0px solid #000;
overflow: hidden;
}
#scroller{
float: left;
width: 101%;
height: 300px;
overflow: scroll;
}
1) Take a look at the accepted answer to this question.
2) Look into programatically setting the focus to your footer after the user reaches the bottom of the main content - .focus() More Info on focus
3) jQuery has a method called scrollTop() which you could look into using on the footer once the focus switches back to the main content. More Info on scrollTop
Related
I have a form which validates with bootstrap validator:
http://1000hz.github.io/bootstrap-validator/
I want to separate this form into steps and have each the inputs in each step validate when the next button is clicked and if it validates, then go to step 2.
I believe this can be achieved if we can combine jQuery steps and Bootstrap validator.
http://www.jquery-steps.com/
Like this comment suggests:
https://github.com/1000hz/bootstrap-validator/issues/491
I have been trying to do this but unsuccessful so far. Is there a way?
I have made a JSFiddle for this:
https://jsfiddle.net/mpLpwt7L/
This is my code so far:
<div class="steps-nav">
<div class="row bs-wizard" style="border-bottom: 0;">
<div class="col-xs-3 bs-wizard-step complete step-active">
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot">
1
</a>
<div class="bs-wizard-info text-center">Vehicle details</div>
</div>
<div class="col-xs-3 bs-wizard-step">
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot">
2
</a>
<div class="bs-wizard-info text-center">Location</div>
</div>
<div class="col-xs-3 bs-wizard-step">
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot">
3
</a>
<div class="bs-wizard-info text-center">Type of Wash</div>
</div>
<div class="col-xs-3 bs-wizard-step disabled">
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot">
4
</a>
<div class="bs-wizard-info text-center">Bills</div>
</div>
</div><!-- end bs-wizard -->
</div><!-- end steps-nav -->
</div><!-- end container -->
</header><!-- end header -->
<main id="main">
<div class="container">
<form role="form" class="order-form" method="post">
<div class="row setup-content" id="step-1">
<div class="steps-inner">
<div class="col-md-12">
<h3>Vehicle Details</h3>
<p>
Tell us what are we washing
</p>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<!--<label></label>-->
<input type="text" name="vehicle_year" class="form-control" placeholder="Car Year" data-error="Car Year is required" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
<div class="col-sm-4">
<div class="form-group">
<input type="text" name="vehicle_make" class="form-control" data-error="Make is required" placeholder="Make" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
<div class="col-sm-4">
<div class="form-group">
<input type="text" name="vehicle_model" class="form-control" data-error="Model is required" placeholder="Model" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
</div><!-- end row -->
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input type="text" name="vehicle_color" class="form-control" data-error="Color is required" placeholder="Color" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="text" name="plate_number" class="form-control" data-error="Plate number is required" placeholder="Lic Plate" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
</div><!-- end row -->
<div class="text-center form-submit">
<button class="btn next-btn" type="submit">Next <i class="fa fa-long-arrow-right"></i></button>
</div>
</div>
</div><!-- end steps-inner -->
</div><!-- end setup-content -->
<div class="row setup-content" id="step-2">
<div class="steps-inner">
<div class="col-md-12">
<h3>Location</h3>
<p>
Tell us where it is
</p>
<p class="map-address">
<i class="fa fa-map-marker"></i>
<input type="text" name="address" id="address_autocomplete" placeholder="Enter Your Address" />
</p>
<div class="text-center form-submit">
<button class="btn next-btn" type="submit">Next <i class="fa fa-long-arrow-right"></i></button>
</div>
</div><!-- end steps-inner -->
</div>
</div><!-- end setup-content -->
I think bootstrap validator isn't the best solution for your needs. Try to use Twitter Bootstrap Wizard which includes wizard + form validation so you can implement it easily.
I wasn't able to get nth-of-type(2n+1) selector to select odd and even rows in the following example.
What I'd like the nth-of-type selector to do is to provide a different style for the odd rows having class "row-data row-header" and a different style for the odd rows having class "row-data row-content".
I resorted to using jQuery on document load to accomplish this by manually adding an "odd" class to the rows selectively. Is there a better (CSS-only) way of doing this?
function toggleRowContent(cnt) {
$(cnt).parents(".row-header").first().next(".row-cnt").slideToggle("fast");
$(".toggleIcon", $(cnt)).toggleClass("fa-chevron-right");
$(".toggleIcon", $(cnt)).toggleClass("fa-chevron-down");
}
function alternateRowBackgroundColours() {
$(".row-header").each(function(i, e) {
if (i % 2 != 0)
$(this).addClass("odd");
$(".row-content", $(this).next(".row-cnt")).each(function(j, e) {
if (j % 2 != 0)
$(this).addClass("odd");
});
});
}
$(document).ready(function() {
alternateRowBackgroundColours();
});
.row-data {
border-bottom: solid 1px #ccc;
}
.row-cnt {
border: solid 1px #5A82B3;
}
.row-content {
margin: 0 15px;
}
.row-content .col {
padding-top: 5px;
padding-bottom: 5px;
}
.row-header .col {
padding-top: 10px;
padding-bottom: 10px;
}
.row-header .btnToggleContent {
width: 35px;
height: 30px;
}
.row-data.row-header(2n+1) .col {
background-color: #e7e7e7;
}
.row-data.row-content(2n+1) .col {
background-color: #c8ebed;
}
.row-data.row-header.odd .col {
background-color: #e7e7e7;
}
.row-data.row-content.odd .col {
background-color: #c8ebed;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css" />
<div class="container">
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 1
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon"></i></a>
</div>
</div>
<div class="row row-cnt container" style="display: none">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.2</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.3</div>
</div>
</div>
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 2
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon"></i></a>
</div>
</div>
<div class="row row-cnt container" style="display: none">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 2.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 2.2</div>
</div>
</div>
</div>
EDIT: Adding some more detail to my attempt. Check the full working snippet above.
This is my desired CSS:
.row-data.row-header(2n+1) .col { background-color: #e7e7e7; }
.row-data.row-content(2n+1) .col { background-color: #c8ebed; }
But it doesn't work. Using "odd" instead of 2n+1 doesn't make any difference.
So what I did was this:
<script>
function alternateRowBackgroundColours()
{
$(".row-header").each(function (i, e)
{
if (i % 2 != 0)
$(this).addClass("odd");
$(".row-content", $(this).next(".row-cnt")).each(function (j, e)
{
if (i % 2 != 0)
$(this).addClass("odd");
});
});
}
$(document).ready(function ()
{
alternateRowBackgroundColours();
});
</script>
And then I added this CSS:
.row-data.row-header.odd .col { background-color: #e7e7e7; }
.row-data.row-content.odd .col { background-color: #c8ebed; }
The number of row-header(s) and the corresponding row-content(s) is dynamic and there is a toggle button on each row-header which shows the corresponding row-content(s) like an accordion.
This is the result
Since all rows are siblings the use of odd ore even will take in count both headers and contents so you really need for your headers a selector to skip the content rows like this:
.row-header:nth-child(4n+1) {
background:red;
}
And for the intern content just use:
.row-cnt > div:nth-child(odd){
background:#999;
}
Check this snippet:
body {
font-family: sans-serif;
font-size: 14px;
}
.row-cnt > div{
background: #f1f1f1;
padding:3px;
}
.row-cnt > div:nth-child(odd) {
background: #999;
}
.row-header {
color: white;
background: blue;
font-size: 1.5em;
padding: 10px;
}
.row-header:nth-child(4n+1) {
background: red;
}
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 1
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon"></i></a>
</div>
</div>
<div class="row row-cnt">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.2</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.3</div>
</div>
</div>
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 2
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon"></i></a>
</div>
</div>
<div class="row row-cnt">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 2.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 2.2</div>
</div>
</div>
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 3
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon"></i></a>
</div>
</div>
<div class="row row-cnt">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 3.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 3.2</div>
</div>
</div>
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 4
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon"></i></a>
</div>
</div>
<div class="row row-cnt">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 4.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 4.2</div>
</div>
</div>
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 5
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon"></i></a>
</div>
</div>
<div class="row row-cnt">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 2.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 2.2</div>
</div>
</div>
Use nth-child instead of nth-of-type to target odd numbers locally.
.row.row-data.row-header:nth-child(odd) {
/* your styles here */
}
.row.row-data.row-header:nth-child(odd) {
background: red;
}
.row.row-data.row-content:nth-child(odd) {
background: green;
}
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 1
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon">icon</i></a>
</div>
</div>
<div class="row row-cnt" style="">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.2</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 1.3</div>
</div>
</div>
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 2
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon">icon</i></a>
</div>
</div>
<div class="row row-cnt" style="">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 2.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12">
<!-- ROW CONTENT -->My content 2.2</div>
</div>
</div>
check this code snippet
div.row-data.row-header:nth-of-type(2n+1){
display:block;
background:red;
}
div.row-data.row-content:nth-of-type(2n+1){
display:block;
background:green;
}
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 1
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon">hello</i></a>
</div>
</div>
<div class="row row-cnt">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12"><!-- ROW CONTENT -->My content 1.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12"><!-- ROW CONTENT -->My content 1.2</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12"><!-- ROW CONTENT -->My content 1.3</div>
</div>
</div>
<div class="row row-data row-header">
<div class="col col-sm-12 col-md-12">
<!-- HEADER CONTENT ... -->
My header 2
<a class="btn btn-primary btn-sm btnToggleContent" onclick="toggleRowContent(this)"><i class="fa fa-chevron-right toggleIcon"></i></a>
</div>
</div>
<div class="row row-cnt" style="display: none">
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12"><!-- ROW CONTENT -->My content 2.1</div>
</div>
<div class="row row-data row-content">
<div class="col col-sm-12 col-md-12"><!-- ROW CONTENT -->My content 2.2</div>
</div>
</div>
Hope this helps
It may be more worthwhile to use the odd keyword.
.row-data.row-content:nth-of-type(odd) {
}
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 want to achieve these:
Computer view:
Tablet Portrait view:
Mobile Portrait view:
Currently I have this following code, where the "home-content" part will generate the items#1-items#X:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="../_lib/normalize.css/normalize.css">
<link rel="stylesheet" href="index.css">
<script src="../_lib/jquery/jquery.min.js"></script>
<script src="../_lib/jquery/jquery.fittext.js"></script>
<script src="../_lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<title></title>
</head>
<body>
<script>
init();
</script>
<div class="home-bg"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="home-noti">
<div class="news-noti">
<div class="news-panel panel">
<div class="news-title panel-heading">
<h2 class="panel-title">NEWSFLASH!</h2>
</div>
<div class="news-items-wrapper">
<ul id="news-items" class="news-items list-group"></ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div id="home-content" class="home-content"></div>
</div>
</div>
</div>
</body>
</html>
This piece of code can achieve the "Computer view" and "Tablet Portrait view". I could have done it in using 4 of "col-md-3" but that will mean sometimes I might get Notifications col with 2 items on the same row OR Notifications col with 1 item on the same row, which is not what I want. How do I achieve the "Mobile Portrait view" without breaking the layout of the previous 2?
You can use nested columns for this.
row
col-*-*
row
col-*-*
row
col-*-*
Review the Docs and view working example at Full Screen then reduce the viewport.
/**FOR DEMO PURPOSES ONLY**/
html,
body {
margin-top: 50px;
text-align: center;
}
.alert.alert-info {
height: 100px;
border-radius: 0;
}
.alert.alert-info-tall {
height: 340px;
border-radius: 0;
}
/**FOR DEMO PURPOSES ONLY**/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="row">
<div class="col-sm-12">
<div class="alert alert-info alert-info-tall">Notifications</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-sm-4">
<div class="alert alert-info">1</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">2</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">3</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">4</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">5</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">6</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">7</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">8</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">9</div>
</div>
</div>
</div>
</div>
</div>
Try to figure out Bootstrap Gird Options and
you just Need to know when to use which class for which screen and you are good to go.
Here is the working structure for your reference.
<div class="row">
<div class="left-block col-lg-4 col-md-12 col-xs-12">
Aside Section
</div>
<div class="content-block col-lg-8 col-md-12 col-xs-12">
<div class="row" style="padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 1</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 2</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 3</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 4</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 5</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 6</div>
</div>
</div>
</div>
Use this :
<div class="container">
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="col-xs-12 notification">
<p>Notifications</p>
</div>
</div>
<div class="col-md-9 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 1</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 2</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 3</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 4</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 5</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 6</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 7</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 8</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 9</p>
</div>
</div>
</div>
</div>
</div>
And this style will help to get a better look :
.notification {
background-color:#000;
height:auto;
padding-top: 50px;
padding-bottom:50px;
margin-bottom:10px;
}
.item {
background-color:#333;
height: auto;
margin-bottom:10px;
}
p {
color:#ffffff;
}
Here is the fiddle : http://jsfiddle.net/xwmmfu0e/
You need to add an xs prefix. Try this adding col-xs-6 to both divs.
<div class="col-md-3 col-xs-6">
...
</div>
...
<div class="col-md-9 col-xs-6">
...
</div>
The input-group-btn for the targetDate element stays pinned to the right hand side of the input group irrespective of screen width until I add in the autogenerated CSS that comes with the hottowel generator.
I need some assistance in working out what aspect of CSS is affecting the behaviour.
Check out this jsfiddle
Tried all 3 sizes of grid layout to no avail but i dont think that is the issue.
<section class="mainbar">
<section class="matter">
<div class="container">
<div class="row">
<div class="widget wviolet">
<div ht-widget-header title="{{vm.title}}"></div>
<div class="widget-content user">
<form name="submitjobform" novalidate id="submitjobform" ng-submit="vm.processForm()">
<div class="form-group">
<div class="row">
<label for="name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input ng-model="vm.submitjobform.name" type="text" class="form-control" name="name" ng-required="true" >
<span class="error" ng-show="submitjobform.name.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="description" class="col-lg-2 control-label">Description</label>
<div class="col-lg-10">
<textarea ng-model="vm.submitjobform.description" class="form-control" name="description" ng-required="true" ></textarea>
<span class="error" ng-show="submitjobform.description.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="category" class="col-lg-2 control-label">Category</label>
<div class="col-lg-10">
<select ng-model="vm.submitjobform.category" class="form-control" name="category" ng-required="true" ng-options="name.name for name in vm.categories"></select>
<span class="error" ng-show="submitjobform.category.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="assignee" class="col-lg-2 control-label">Assignee</label>
<div class="col-lg-10">
<select ng-model="vm.submitjobform.assignee" class="form-control" name="assignee" ng-required="true" ng-options="name.name for name in vm.names"></select>
<span class="error" ng-show="submitjobform.assignee.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="targetDate" class="col-lg-2 control-label">Target Date</label>
<div class="col-lg-8">
<!-- <div class="col-lg-4"> -->
<div class="input-group">
<input name="targetDate" type="text" class=" form-control" datepicker-popup="{{vm.format}}" ng-model="vm.submitjobform.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close">
</input>
<span class="input-group-btn">
<!-- " -->
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div> <!--input group -->
<!-- </div> /col-lg-4 -->
</div> <!--/col-lg-8 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<div class="col-lg-2">
<input type="submit" ng-disabled="submitjobform.$invalid" value="Submit" id="submitjobform_submit" class="btn btn-danger">
</div> <!--/col-lg-2 -->
</div>
</div>
<div>
<tt>name = {{vm.submitjobform.name}}</tt><br/>
<tt>desc = {{vm.submitjobform.description}}</tt><br/>
<tt>category = {{vm.submitjobform.category.name}}</tt><br/>
<tt>assignee = {{vm.submitjobform.assignee.name}}</tt><br/>
<tt>targetdate = {{vm.submitjobform.targetDate}}</tt><br/>
</div>
</form>
</div> <!-- content-user div -->
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div> <!-- widget violet -->
</div> <!-- row div -->
</div> <!-- container div -->
</section>
</section>
Thanks
Simon
http://jsfiddle.net/voykuL65/
I assume you're using bootstrap as you import it in your css on your fiddle.
The main issue is you aren't including bootstrap JS as well. If you delete your CSS in your fiddle and switch the framekwors & extensions to jquery 2.1 and select Bootstrap 3.2 your code looks fine.
Another point to remember is always design bootstrap smallest up.
You've got everything
class="col-lg-2"
You might have just been tinkering, but remember to start with xs/sm and move larger.
There is also a stray </input> Kill him as well.