I'm trying to use the Bootstrap affix to create two "sticky" blocks side by side on top in the content area but they do not behave as expected. They always either overlap each other and/or the content or does not fill their parent.
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<text id="menu"></text>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-xs-12">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 col-lg-push-9 col-md-push-9 col-sm-push-9 col-xs-push-9" id="sticky2" data-spy="affix">
<text id="right"></text>
</div>
<div class="col-lg-7 col-md-7 col-sm-9 col-xs-9" id="sticky1" data-spy="affix">
<h1><span class="hidden-lg hidden-md hidden-sm">XS</span><span class="hidden-lg hidden-md hidden-xs">SM</span><span class="hidden-lg hidden-sm hidden-xs">MD</span><span class="hidden-md hidden-sm hidden-xs">LG</span></h1>
<text id="top"></text>
</div>
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<div class="row contentRow" id="contentRow">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="background-color: yellow;">
<text id="content"></text>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Have a look at this fiddle: http://jsfiddle.net/halvorsen/1zv6gqwu/42/
Any suggestion on how to solve this?
Do I have to set the size on the "sticky" blocks using JavaScript?
Related
What prettier rules do I need to make the formatting like this. To keep the tags on new lines and the text between them?
<template>
<div class="row">
<div class="col-sm-6 col-lg-8">
.col-sm-6 .col-lg-8
</div>
<div class="col-6 col-lg-4">
.col-6 .col-lg-4
</div>
</div>
<div class="row">
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
</div>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</template>
I'm having some trouble formatting text properly inside rows.
Here's what I've got so far:
And the code which produces that result:
<div class="row justify-content-center py-lg-4">
<div class="col-circle-width order-lg-2">
<i class="icon-heart large-circle-dati"></i>
</div>
<div class="w-100 d-block d-sm-none"></div>
<div class="col-auto col-lg-3 order-lg-1 main-text-right">
<div class="text-center text-sm-left text-lg-right">
<strong>Top Text</strong>
<p>Bottom Text</p>
</div>
</div>
<div class="col-circle-width d-none d-lg-block order-lg-3"></div>
<div class="w-100 d-lg-none p-3"></div>
<div class="col-circle-width order-lg-4">
<i class="icon-heart large-circle-dati"></i>
</div>
<div class="w-100 d-block d-sm-none"></div>
<div class="col-auto col-lg-3 order-lg-5 main-text-left">
<div class="text-center text-sm-left">
<strong>Boreal Text</strong>
<p>Austral Text</p>
</div>
</div>
<div class="w-100 d-lg-none p-3"></div>
</div>
<div class="row justify-content-center py-lg-4">
<div class="col-circle-width order-lg-2">
<i class="icon-heart large-circle-dati"></i>
</div>
<div class="w-100 d-block d-sm-none"></div>
<div class="col-auto col-lg-3 order-lg-1 main-text-right">
<div class="text-center text-sm-left text-lg-right">
<strong>Septentrional Text</strong>
<p>Meridional Text</p>
</div>
</div>
<div class="col-circle-width d-none d-lg-block order-lg-3"></div>
<div class="w-100 d-lg-none p-3"></div>
<div class="col-circle-width order-lg-4">
<i class="icon-heart large-circle-dati"></i>
</div>
<div class="w-100 d-block d-sm-none"></div>
<div class="col-auto col-lg-3 order-lg-5 main-text-left">
<div class="text-center text-sm-left">
<strong>Northern Text</strong>
<p>Southern Text</p>
</div>
</div>
<div class="w-100 d-lg-none p-3"></div>
</div>
I've been trying to get the text to the left to be aligned with the icons - as displayed on the columns on the right - but can't seem to get it to work. Any help would be appreciated! Thank you in advance!
My goal is to get like this.
I use bootstrap-grid.min.css from bootstrap-4.1.2
What do I do wrong? My code
<div class="wrapper d-flex flex-column" style="min-height: 100vh;">
<section class="main d-flex flex-grow-1">
<div class="container-fluid d-flex align-items-stretch">
<div class="row">
<div class="col-md-3">
<div class="menu">
Aside
</div>
</div>
<div class="col-md-9">
<div class="text">
Main
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
Footer
</footer>
</div>
You need to make changes in your structure. I have made some changes for you, please see if it serves the purpose.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<header class="footer">
Header
</header>
<div class="wrapper d-flex flex-column" style="min-height: calc(100vh - 24px);">
<section class="main d-flex flex-grow-1">
<div class="container-fluid">
<div class="row" style="height:100%;">
<div class="col col-md-3" style="background-color:blue;">
<div class="menu">
Aside
</div>
</div>
<div class="col col-md-9" style="background-color:pink;">
<div class="text">
Main
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
Footer
</footer>
</div>
I'm using MaterializeCSS for creating layouts, I've got a container which contains 2 rows but any content which is not in column displays outside of container.
Here is my code:-
<div class="container">
<div style="border: 1px solid #b1b1b1;">
<div class="row">
<div class="col s12">Hello</div>
</div>
<div class="row">World
<div class="col s12">Hello</div>
</div>
</div>
</div>
And here is how it looks:-
Container Layout
Why is this happening even though my content is inside container and should also display within container boundaries?
Edit:
<div class="add-arena grey lighten-3">
<div class="row">
<div class="col s12 center deep-orange white-text">Add Arena</div>
</div>
<div class="row">
<div class="add-arena-image-holder col s4">
<form action="#">
<div class="file-field input-field col s11">
<div class="btn">
<span>File</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</form>
</div>
<div class="add-arena-description col s8">
<div class="row">
<div class="input-field col s6">
<input placeholder="What will it be called?" id="first_name" type="text" class="validate">
<label for="first_name">Arena Name</label>
</div>
<div class="input-field col s6">
<input placeholder="Arena Number" id="first_name" type="text" class="validate">
<label for="first_name">Arena</label>
</div>
</div>
<div class="row">
<div class="col s3 right">
<a class="waves-effect waves-light btn deep-orange"><i class="material-icons left">send</i>Add</a>
</div>
</div>
</div>
</div>
</div>
All content should be in the actual cols as the rows apply negative margins to stretch them to the full width. Always put the content in the col's.
https://codepen.io/anon/pen/EXZzVr
<div class="container">
<div style="border: 1px solid #b1b1b1;">
<div class="row">
<div class="col s12">Hello</div>
</div>
<div class="row">
<div class="col s12">Hello World</div>
</div>
</div>
</div>
What exactly do you want to achieve?
Take a look at following lines:
https://github.com/Dogfalo/materialize/blob/0e13b80f6bfee1700dd2c2aa49494a44c8a61acb/sass/components/_grid.scss#L17-L18
https://github.com/Dogfalo/materialize/blob/0e13b80f6bfee1700dd2c2aa49494a44c8a61acb/dist/css/materialize.css#L3367-L3368
I am creating few accordions using bootstrap 3. My requirement is all accordions should be expanded by default in 1024 resolution and above. on click it should hide
But in mobile devices it should be in collapse mode by default. on click it should expand
Here is my code:
<div class="panel-group" id="accordion">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- Asia Starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseSix">
Asia
</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse in">
<!-- panel content starts-->
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">China
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">India
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Thailand
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Singapore
</div>
</div>
</div>
<!-- panel content ends-->
</div>
</div>
<!-- Asia ends-->
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- europe starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Europe
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse in">
<!-- panel content starts-->
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Germany
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">The Netherlands
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Denmark
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Italy
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">France
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Belgium
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Sweden
</div>
</div>
</div>
<!-- panel content ends-->
</div>
</div>
<!-- europe ends-->
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- middle east north africa starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Middle East and North Africa
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">UAE
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Israel
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Saudi Arabia
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Egypt
</div>
</div>
</div>
<!-- flags-->
</div>
</div>
<!-- middle east north africa ends-->
</div>
</div>
<!-- 1st row ends-->
</div>
http://jsfiddle.net/monicaRegal/q5rLx1dn/1/embedded/result/
Thank you
Monica Mandal
Try this:
$(document).ready(function(){
var windowWidth = $(window).width();
if(windowWidth <= 1024) //for iPad & smaller devices
$('.panel-collapse').removeClass('in')
});
In your css:
#media (max-width: 768px)
{
.collapse.in {
display: none;
}
}
Abdulla's answer almost worked for me, however, I had to use collapse() instead of removeClass('in')
jQuery(document).ready(function(){
var windowWidth = jQuery(window).width();
if(windowWidth <= 1024) { //for iPad & smaller devices
jQuery('.panel-collapse').collapse()
}
});
Try This.
function adjustCollapseView(){
var desktopView = $(document).width();
if(desktopView >= "1024"){
$("#accordion a[data-toggle]").attr("data-toggle","");
$("#accordion .collapse").addClass("in").css("height","auto")
}else{
$("#accordion a[data-toggle]").attr("data-toggle","collapse");
$("#accordion .collapse").removeClass("in").css("height","0")
$("#accordion .collapse:first").addClass("in").css("height","auto")
}
}
$(function(){
adjustCollapseView();
$(window).on("resize", function(){
adjustCollapseView();
});
});