I have this
<div class="flex flex-col">
<main class="max-w-screen-lg mx-auto">...</main>
...
</div>
I use mx-auto to center main
I also want main to have some maximal width on large screen that's why I use max-w-screen-lg!
But in result margin left and right takes all space around and shrinks main to its minimal possible width on large screen
I just want main to have max width centered inside container
Some possible solution might be this, but it requires extra div
<div class="flex flex-col">
<div>
<main class="max-w-screen-lg mx-auto">...</main>
</div>
...
</div>
Related
In my three-column Vuetify layout, I have one column that is very tall. I want only this column to have a scroll bar. However, the code below causes the entire page to overflow! Any help?
<template>
<v-container fluid class="secondary fill-height">
<v-row class="fill-height ">
<v-col class="accent rounded overflow-y-auto" cols="2">
<div class="text-center">
Lorem ipsum....super long
</div>
</v-col>
<v-col class="primary rounded" cols="5">Editor</v-col>
<v-col class="success rounded" cols="5">Stage Stuff</v-col>
</v-row>
</v-container>
</template>
Add max-height: calc(100vh - 48px) style to the div that encloses the long stuff.
<template>
<v-container fluid class="secondary fill-height">
<v-row class="fill-height">
<v-col class="accent rounded overflow-y-auto" cols="2">
<!-- Add max-height to this div so its height won't expand past the viewport's height -->
<div class="text-center" style="max-height: calc(100vh - 48px)">
Lorem ipsum....super long
</div>
</v-col>
<v-col class="primary rounded" cols="5">Editor</v-col>
<v-col class="success rounded" cols="5">Stage Stuff</v-col>
</v-row>
</v-container>
</template>
Basically, you just limit the max height of the div when its content gets longer. The 100vh is the full height of the viewport. The 48px is the cumulative vertical padding of <v-container /> and the <v-col />.
See live demo.
Note:
The 48px comes from the cumulative vertical paddings/margins/borders of the whole page. In our case, it is the 12px top and bottom padding of the <v-container/> plus 12px top and bottom padding of the <v-col/>. This is a known trick when we want to achieve a full pager div. You can read more here: https://dev.to/lennythedev/css-gotcha-how-to-fill-page-with-a-div-270j
I want to do div, it has 2 different items, first one, can be shorter or longer depending on data. The second one is fixed height and it position starts when the first one ends.
The first have scroll if needed.
<div fxLayout="column" fxFlexFill>
<!-- other items -->
<div fxFlex fxLayout="column">
<div fxFlex class="scroll">
<ng-container *ngFor="let item of items">
{{item}}
</ng-container>
</div>
<div fxFlex="15%">
<button> button </button>
</div>
</div>
</div>
With this code what I get is the second div is always at bottom.
how can I do the first div have the height it needs depending on its content?
You can do this: [fxFlex]='height', where 'height' its a variable in your .ts file, you can change this height depending on the data you get.
For example, if you want that every item had height = 50px, you can make
height = items[lenght] * 50;
height = height + 'px';
Later, if you want that div don't get higher than 300px, you can add an additional step:
height = items[lenght] * 50;
if (height > 300) height = 300;
height = height + 'px';
I hope this can help you
I'm new to flexbox and it seems really complex compared to bootstrap. I have a splash screen where I am required to vertically and horizontally center a content:
<div layout="row" layout-align="center center">
<div layout="row" layout-wrap>
<div flex="30">
<img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
</div>
<div flex="45">
<h2 class="title">example.com</h2>
</div>
<div flex="25">
<h1 class="bang">Bang!</h1>
</div>
</div>
</div>
however it doesn't center till I add a height to it:
style="height:500px"
Why does it behave this way? Is my code wrong? This doesn't seem like the right way of doing it.
Also with the items in my second row with the layout-wrap the last div with flex=25 overlaps the second div with flex=45.
Basically what I want to do this vertically and horizontally center a div and be able to split that div into as many columns as I like while maintaining a responsive width that adjusts depending on screen size.
Maybe this can point you in the right direction - CodePen
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="row" layout-xs="column" layout-align="center center">
<div flex="30">
<img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
</div>
<div flex="45">
<h2 class="title">example.com</h2>
</div>
<div flex="25">
<h1 class="bang">Bang!</h1>
</div>
</div>
I drew a line chart using flot in the studentchart div using:
$.plot(jQuery("#studentavgchart"), DATA, options);
Graph will draw outside the div with class oneTwo. If I can remove the style of the div studentchart it shows javascript error.
I need to draw the graph inside the parent div ie; in oneTwo
<div class="oneTwo">
<div class="widget" >
<div class="header">
<span>
<span class="ico gray info2"></span>Total Class No
</span>
</div>
<div class="content">
<div id="studentchart" style="width:100%;height:300px;"></div>
</div>
</div>
</div>
I see your plot function call is using "studentavgchart" and your div has the id of "studentchart"
I ran into this issue as well and found that my Plot div needed a style or a class that specified the height. Either in pixels or %.
Hope that helps.
<div style="display:inline;">
<textarea rows="10" cols="50"></textarea><br />
<div style="float:right;">remaining characters: 300</div>
It is not working in either firefox or IE. The text remaining characters is not within the "inline" bounds instead goes 100% out of the containing div.
what is the best way of accomplish something like this where text is aligned right in parent div with textarea before that?
Try this.
<div style="display:inline; text-align:right; float:left;">
<textarea cols="50" rows="10"></textarea><br />
remaining characters: 300
</div>