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
Related
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>
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 came upon strange situation. I have a List and each list item consists of span and image element. They are both inline and as long as span is empty they are next to each other, but when span has text, image acts as if it was display:block and falls underneath the span element which is not my desired effect. (I fill span with text dynamically)
<ul id="playerListInsideRoom">
<li class="playerCircleInsideRoom circleFull" seatnumber="1">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span> </span></li>
<li class="playerCircleInsideRoom circleEmpty" seatnumber="2">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
<li class="playerCircleInsideRoom circleEmpty" seatnumber="3">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
<li class="playerCircleInsideRoom circleEmpty" seatnumber="4">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
</ul>
.playerCircleInsideRoom span{
position:relative;
left:50px;
}
#playerListInsideRoom img {
height:15px;
width:15px;
display:inline-block;
position:relative;
right:40px;
}
Even when I get rid of relative positions the problem is still occuring.
If the width of inline elements is larger than the allowed width of the container (your li element) then the line will break.
You could use whitespace: nowrap on the li to prevent it (though that could possibly break the rest of your layout).
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>