I am using a slick slider inside a container.The container has two columns namely col-1 and col-2.
I want it to be side by side ,for that i have used flex but it doesn't work.Can anyone please help me to resolve this issue.My aim is to achieve such a slider where the testimonial text section is fixed and only the right one scrolls.The problem is that when flex is used the testmonial slider boxes get down as aseperate row
$(".testimonial-slider-wrap").slick({
dots: true,
arrows: true,
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
speed: 300,
})
.testimonial-main-wrap {
max-width: 136rem;
margin-left: auto;
}
.testimonial-main-wrap {
display: flex;
flex-wrap: wrap;
}
.testimonial-col-1 {
max-width: 39.5rem;
margin-right: 4.2rem;
}
<section id="testimonial">
<div class="testimonial-main-wrap">
<div class="testimonial-col-1">
<p>What Zaiyna clients say</p>
</div>
<div class="testimonial-col-2">
<div class="testimonial-slider-wrap">
<div class="testimonial-slides">
</div>
</div>
</div>
</div>
</section>
I don't understand exactly what you want to archieve, but try putting width:50% to both col-1 and col-2. This way the two elements can be sharing same row in the screen.
Related
The code below is simplified version of actual one, but it "correctly" shows the problem -- I have window with T-layout. Top section with toolbar, and below the left with some long content, and the right which should take the remaining space.
I used "absolute" position for the left pane because my first problem was how to scroll long content within pane, this is what I found, so I used it.
On the right there is ChartJs and initially it really takes the remaining space but if I move the mouse over it refreshes the content, resulting in squashing the left pane to zero.
How to prevent it (not using hardcoded sizes, like "min-width: 200px")? As left-right panes sizing goes, my intention is "left -- take all what is necessary, right -- take the rest".
The code:
<!DOCTYPE html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
</head>
<body style="background-color: pink; overflow:hidden;margin:0" onload="starter()">
<div style="display: flex;flex-direction:column; height: 100vh;width: 100%">
<!-- TOOLBAR -->
<div style="flex-shrink: 0; flex-grow: 0;">
<button>hello</button>
</div>
<div style="flex-shrink: 0; flex-grow: 1;
display: flex;flex-direction:row; ">
<!-- LEFT PANE -->
<div style="position:relative; background-color: aqua; overflow:scroll;
flex-shrink: 0; flex-grow: 1;">
<div style="position:absolute; width: 100%">
<div>
<h1>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>4</li>
<li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>1</li>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>4</li>
<li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>0</li>
</ul>
</h1>
</div>
<div>left</div>
</div>
</div>
<!-- RIGHT PANE -->
<div style="background-color: green; flex-shrink: 0; flex-grow: 1;
display: flex;flex-direction:column;">
<div style="position: relative;flex-shrink: 1; flex-grow: 1;">
<canvas id="bar-chart" style="" ></canvas>
</div>
<div style="flex-shrink: 0; flex-grow: 0;">right</div>
</div>
</div>
</div>
<script>
function starter(){
// https://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}]
},
options: {
maintainAspectRatio : false,
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
}
</script>
</body>
</html>
So I started from the initial problem -- how to take remaining space and enable scroll there? For two panes there is nice solution with the flex layout: https://stackoverflow.com/a/68516470/210342 but as in my case, when I have nested panes, I couldn't make flex take entire window and only window space (without using this hack with absolute position).
Since I don't know CSS I tried grid approach and it worked right on spot. I simply added "height:100vh" for entire grid container and for given scrollable pane "overflow:auto" and that's it.
Now I have scrolling and well sized chart.
Nice grid generator I used: https://cssgrid-generator.netlify.app/
I am trying to make the first column of a grid scrollable:
<div class="mud-grid">
<div class="mud-grid-item mud-grid-item-xs-4" >
<MudPaper>
<h1>Filter criterias</h1>
<div style="height: 100vh; overflow-y: auto;">
#for(int i=0;i<35;i++){
<div style="height:50px;border:1px solid;"> Filtering parameter ##i </div>
}
</div>
</MudPaper>
</div>
<div class="mud-grid-item mud-grid-item-xs-8">
<h1>Search Results</h1>
#for(int i=0;i<1500;i++){
<div style="height:50px;border:1px solid;"> Searc Results ##i </div>
}
</div>
</div>
My implementation is here and a style of height: 100vh is causing me some troubles
How can I set this value to automatically fit to the contents, even if I have 100 items on left side let the contents scroll completely till bottom allow the right section to stay as separate.
your link doesnt load in for me.. so im a bit confused by your explenation but you could try a width:fit-content overflow: auto
overflow auto should result in a scroll bar appearing
I am using gridstack for the first time and I am having trouble with the horizontal margins. Clearly there is something in my css that is making my items too wide.
I see in the demos that gridstack.css has left and right set at 10px each, and I am using that same default css.
I have set gridstack up to use 6 columns as follows:
<div id="container" class="grid-stack grid-stack-6">
<div class="grid-stack-item"
data-gs-x="0" data-gs-y="0"
data-gs-width="3" data-gs-height="2">
<div class="grid-stack-item-content">
<i class="icon-lock-open pinDiv warning"></i>
<i class="icon-cancel-circled"></i>
PRE MAP
</div>
<div class="grid-stack-item lockAspect"
data-gs-x="3" data-gs-y="0"
data-gs-width="3" data-gs-height="2">
<div class="grid-stack-item-content" style="background:pink;">
<i class="icon-lock pinDiv warning"></i>
<i class="icon-cancel-circled"></i>
POST MAP
</div>
</div>
</div>
I am using the following options:
DEFAULT_GRIDSTACK_OPTIONS = {
cellHeight: 150,
verticalMargin: 10,
width: 6
};
and I am including gridstack-extra as well as gridstack.css.
Why do my items have no horizontal margin at all?
thanks so much
i haved same problem. I fixed
.grid-stack > .grid-stack-item > .grid-stack-item-content{
left: 3px;
right: 3px;
}
But not best practices, i want config in javascript similar config option verticalMargin
var optionsLayoutDesign = {
width: 6,
float: true,
removable: '.trash',
verticalMargin:6,
cellHeight:50,
removeTimeout: 200,
acceptWidgets: '.grid-stack-item',
animate :true,
};
$('#layout-design').gridstack(optionsLayoutDesign);
you need to style the class
grid-stack-item-content
instead of
grid-stack-item
I want to create alternating 100% colored blocks. An "ideal" situation is illustrated as an attachment, as well as the current situation.
Desired setup:
Currently:
My first idea was to create an div class, give it a background color, and give it 100% width.
.block {
width: 100%;
background: #fff;
}
However, you can see that this obviously doesn't work. It's confined to a container area. I tried to close the container and that didn't work either.
The container class is intentionally not 100% width. It is different fixed widths depending on the width of the viewport.
If you want to work with the full width of the screen, use .container-fluid:
Bootstrap 3:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12"></div>
</div>
</div>
</body>
Bootstrap 2:
<body>
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
</div>
<div class="row">
<div class="span8"></div>
<div class="span4"></div>
</div>
<div class="row">
<div class="span12"></div>
</div>
</body>
QUICK ANSWER
Use multiple NOT NESTED .containers
Wrap those .containers you want to have a full-width background in a div
Add a CSS background to the wrapping div
Fiddles: Simple: https://jsfiddle.net/vLhc35k4/ , Container borders: https://jsfiddle.net/vLhc35k4/1/
HTML:
<div class="container">
<h2>Section 1</h2>
</div>
<div class="specialBackground">
<div class="container">
<h2>Section 2</h2>
</div>
</div>
CSS: .specialBackground{ background-color: gold; /*replace with own background settings*/ }
FURTHER INFO
DON'T USE NESTED CONTAINERS
Many people will (wrongly) suggest, that you should use nested containers. Well, you should NOT.
They are not ment to be nested. (See to "Containers" section in the docs)
HOW IT WORKS
div is a block element, which by default spans to the full width of a document body - there is the full-width feature. It also has a height of it's content (if you don't specify otherwise).
The bootstrap containers are not required to be direct children of a body, they are just containers with some padding and possibly some screen-width-variable fixed widths.
If a basic grid .container has some fixed width it is also auto-centered horizontally.
So there is no difference whether you put it as a:
Direct child of a body
Direct child of a basic div that is a direct child of a body.
By "basic" div I mean div that does not have a CSS altering his border, padding, dimensions, position or content size. Really just a HTML element with display: block; CSS and possibly background.
But of course setting vertical-like CSS (height, padding-top, ...) should not break the bootstrap grid :-)
Bootstrap itself is using the same approach
...All over it's own website and in it's "JUMBOTRON" example:
http://getbootstrap.com/examples/jumbotron/
This is how you can achieve your desired setup with Bootstrap 3:
<div class="container-fluid">
<div class="row"> <!-- Give this div your desired background color -->
<div class="container">
<div class="row">
<div class="col-md-12">
... your content here ...
</div>
</div>
</div>
</div>
</div>
The container-fluid part makes sure that you can change the background over the full width. The container part makes sure that your content is still wrapped in a fixed width.
This approach works, but personally I don't like all the nesting. However, I haven't found a better solution so far.
There is a workaround using vw. Is useful when you can't create a new fluid container.
This, inside a classic 'container' div will be full size.
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
}
After this there is the sidebar problem (thanks to #Typhlosaurus), solved with this js function, calling it on document load and resize:
function full_row_resize(){
var body_width = $('body').width();
$('.row-full').css('width', (body_width));
$('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
return false;
}
In bootstrap 4, you can use 'w-100' class (w as width, and 100 as 100%)
You can find documentation here:
https://getbootstrap.com/docs/4.0/utilities/sizing/
If you can't change the HTML layout:
.full-width {
width: 100vw;
margin-left: -50vw;
left: 50%;
}
<div class="container">
<div class="row">
<div class="col-xs-12">a</div>
<div class="col-xs-12">b</div>
<div class="col-xs-12 full-width">c</div>
<div class="col-xs-12">d</div>
</div>
</div>
Demo: http://www.bootply.com/tVkNyWJxA6
Sometimes it's not possible to close the content container.
The solution we are using is a bit different but prevent a overflow because of the
firefox scrollbar size!
.full-width {
margin-top: 15px;
margin-bottom: 15px;
position: relative;
width: calc(100vw - 10px);
margin-left: calc(-50vw + 5px);
left: 50%;
}
Here is a example: https://jsfiddle.net/RubbelDeKatz/wvt9253q
Instead of
style="width:100%"
try using
class="col-xs-12"
it will save you 1 character :)
Sorry, should have asked for your css as well. As is, basically what you need to look at is giving your container div the style .container { width: 100%; } in your css and then the enclosed divs will inherit this as long as you don't give them their own width. You were also missing a few closing tags, and the </center> closes a <center> without it ever being open, at least in this section of code. I wasn't sure if you wanted the image in the same div that contains your content or separate, so I created two examples. I changed the width of the img to 100px simply because jsfiddle offers a small viewing area. Let me know if it's not what you're looking for.
content and image separate: http://jsfiddle.net/QvqKS/2/
content and image in same div (img floated left): http://jsfiddle.net/QvqKS/3/
I would use two separate 'container' div as below:
<div class="container">
/* normal*/
</div>
<div class="container-fluid">
/*full width container*/
</div>
Bare in mind that container-fluid does not follow your breakpoints and it is a full width container.
I'd wonder why someone would try to "override" the container width, since its purpose is to keep its content with some padding, but I had a similar situation (that's why I wanted to share my solution, even though there're answers).
In my situation, I wanted to have all content (of all pages) rendered inside a container, so this was the piece of code from my _Layout.cshtml:
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
<div class="container">
#RenderBody()
</div>
</section>
</div>
In my Home Index page, I had a background header image I'd like to fill the whole screen width, so the solution was to make the Index.cshtml like this:
#section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
<div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}
<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
<div class="container">
<div class="row">
MORE CONTENT
</div>
</div>
</div>
I think this is better than trying to make workarounds, since sections are made with the purpose of allowing (or forcing) views to dynamically replace some content in the layout.
Though people have mentioned that you will need to use .container-fluid in this case but you will also have to remove the padding from bootstrap.
The following answer is not exactly optimal by any measure, but I needed something that maintains its position within the container whilst it stretches the inner div fully.
https://jsfiddle.net/fah5axm5/
$(function() {
$(window).on('load resize', ppaFullWidth);
function ppaFullWidth() {
var $elements = $('[data-ppa-full-width="true"]');
$.each( $elements, function( key, item ) {
var $el = $(this);
var $container = $el.closest('.container');
var margin = parseInt($container.css('margin-left'), 10);
var padding = parseInt($container.css('padding-left'), 10)
var offset = margin + padding;
$el.css({
position: "relative",
left: -offset,
"box-sizing": "border-box",
width: $(window).width(),
"padding-left": offset + "px",
"padding-right": offset + "px"
});
});
}
});
This must work (Mobile phone as well as Desktop screen):
class: alignfull and class: img-fluid will do the magic.
<div class="alignfull">
<img class="img-fluid" style="background-size: cover;
background-position: center ;
background-repeat: no-repeat;
height: auto;
min-width: 100%;
width: -moz-available; "
src="{{ $image->image }}" alt="An image">
</div>
I'm using foundation 3 to build a responsive website but I want to have the Footer and Navigation background width to occupy the entire width? I have named my rows as
class="row navigation"
class="row footer"
I tried looking for how to fix this but I'm out of options. I'm assuming it is a small fix in the foundation.css file but it's a bit too overwhelming at the moment as I'm new to it.
Any poiinters much appreciated.
I ran into the same problem yesterday. The trick is, for full width spanning blocks, you just keep them out of the row/column structure, since row/column will always apply the default padding. Keep your footers and headers on their own, and use row/column inside them.
<header>
This will span the full width of the page
</header>
<div class="row">
<div class="twelve columns">
This text will flow within all typical padding and margins
</div>
</div>
<footer>
This will span the full width of the page
<div class="row">
<div class="twelve columns">
This text will flow within all typical padding and margins
</div>
</div>
</footer>
What I have been doing is to add a custom class so that I can chain it with .row and override the max-width setting.
<div class="row full-width"></div>
.row.full-width {
width: 100%;
max-width: 100%;
}
I put width in here too to cover bases, but it is already declared in foundation.css so you can just omit it.
If you're using Zurb Foundation Framework, simply remove the row class and wrap the element in a class container that is 100% width. Now you probably want to center the stuff, use class centered like this:
<div class="container navigation">
<div class="centered">
Some navigation stuff
</div>
</div>
I completely disagree with the answer. You shouldn't have to use !important
Please refer to my article and demo at http://edcharbeneau.github.com/FoundationSinglePageRWD/
You should be able to get what you need from there. The demo is for 2.2 but is very similar in function to v3.
Foundation 6 supports this feature naturally with row expanded. code example:
<div class="expanded row">
...
</div>
Read more here: http://foundation.zurb.com/sites/docs/grid.html#fluid-row
Use "Section" as in:
<section>
<div class="row">
<div class="small-12 columns">
</div>
</div>
</section>
Then, assign an ID to the section and use that for your background.
This is in regards to Foundation 5. None of the answers given so far, provide edge-to-edge, full widths. That's because inner .columns add padding.
For a true edge-to-edge, full width content, add this to your CSS.
.row.full { width: 100%; max-width: 100%; }
.row.full>.column:first-child,
.row.full>.columns:first-child { padding-left: 0; }
.row.full>.column:last-child,
.row.full>.columns:last-child { padding-right: 0; }
Simply add .full class to a .row you wish to extend full width.
<div class="row full">
<div class="medium-6 column">This column touches Left edge.</div>
<div class="medium-6 column">This column touches Right edge.</div>
</div>
Just override the max-width property as max-width: initial;, for example,
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
<div class="row fullWidth"> </div>
this works for me :)
I know that there are already many answers, but I think I have something new to add in this topic if someone is using Foundation 5 and stumbled upon this question (like me).
As Foundation is using REM units, it would be best to alter .row class using them and by adding extra class, so you can have only selected rows full-width. For example by using .full class:
.row.full {
max-width: 80rem; /* about 90rem should give you almost full screen width */
}
You can see that it is used like this even in documentation page of Zurb Foundation (they altered .row class, though): http://foundation.zurb.com/docs/ (just look into page source code)
You really would want to keep the row class otherwise you lose a lot of the power of the grid system. Why not change the setting for $rowWidth from 1000 (default) to 100%. This can be found in the file foundation_and_overrides.scss
Just set the
$row-width: 100%;
http://foundation.zurb.com/forum/posts/927-full-width-layouts
I am not sure if I am missing something, but I had to add a .row div for the .centered to work. I can still style the .header to have a full width background in this case, but the .container method did not work for me.
<header class="header">
<div class="row">
<div class="centered">
Logo and stuff
</div>
</div>
<div class="row">
Some navigation stuff
</div>
</header>
If you don't give it the "row" class and put columns inside it works on a 100% width
If you're using sass, this is a better way:
<div class="row full-width"></div>
.row{
&.full-width{
width: 100%;
max-width: 100%!important; //might be needded depending on your settings
&>.column:first-child,
&>.columns:first-child{
padding-left: 0;
}
&>.column:last-child,
&>.columns:last-child{
padding-right: 0;
}
}
}
yes, just use like this:
<div class="large-12 columns">
<h2>Header Twelve Columns (this will have full width of the BROWSER <---->></h2>
</div>