The idea is to make sidebar stay at the top when screen size is smaller than 1200px or so. When screen size is bigger than 1200px - affix sidebar should be fixed as user scrolls down a page. At the moment affix sidebar <div class="side-tool-panel" layout="column"> interferes with neighbour container <div class="content-wrapper" layout="row" layout-wrap>. How to make <div class="content-wrapper" layout="row" layout-wrap> to shift automatically and make up the room for <div class="side-tool-panel" layout="column">?
codepen
You can use the layout system of Angular Material to do that. Try this:
<div ng-app="MyApp" ng-controller="AppCtrl" class="dialogdemoBasicUsage" id="popupContainer" ng-cloak="" layout="column" layout-gt-md="row" layout-wrap>
<div class="side-tool-panel" layout="column" flex-gt-md="15"></div>
<div class="content-wrapper" layout="row" layout-wrap flex-gt-md="85"></div>
</div>
In this code I use layout-gt-md which width >= 1280px. Then, I use flex-gt-md in 2 children div. Here
Hope this help.
Related
I would like to have 2 columns, with the left column being a video (with aspect ratio 16x9) and the right column being a sidebar (with min-width). When the width of the window changes, the video should resize accordingly and the sidebar should maintain it's width.
However, I can't understand why there is a padding top for .ratio::before.
https://imgur.com/a/OtavqX3
Codepen: https://codepen.io/yewzy/pen/PoOxLyO
Here is my code:
<div class="container" id="main">
<div class="d-flex" id="row-main">
<div class="col-sm-9 col-12">
<div class="flex-grow-1" id="content">
<div class="ratio ratio-16x9">
<video id="vid"></video>
</div>
</div>
</div>
<div class="col-sm-3 col-12" id="sidebar">
<iframe class="chat"></iframe>
</div>
You should put the ratio class on the element you want to have the 16x9 aspect ratio. This just leaves the ratio-16x9 class on the parent div, and the ratio itself on the video.
Check out the CodePen ~ A Pen for Yew AMP & Ratio-16x9
I'm learning Bootstrap and I want to create simple div which is centered on the page.
I really like that auto-margin of container class, but it seems to be jump-changing based on breakpoints when resizing window width.
I want to make margins getting smaller smoothly until they become 0 when window is small enough.
I have tried to explicitly set one column layout like this:
<div class="container border">
<div class="row">
<div class="col-12">
<p>container with some content</p>
</div>
</div>
</div>
but the results are just the same and breakpoints all still used.
For that you shouldn't use bootstrap containers, because they have fixed width on breakpoints. For smooth transition you should manually set width to you container in % or vw and margin in same units.
There are two types of Bootstrap 4 Container: Fixed and Fluid.
Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).
If you don't want the breakpoints, use the container-fluid class:
Use .container-fluid for a full width container, spanning the entire width of the viewport.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid border">
<div class="row">
<div class="col-12">
<p>container with some content</p>
</div>
</div>
</div>
If you must, you can manually override Bootstrap's responsive max-width settings.
.container.nobreakpoints {
max-width:100%;
width:800px; /* maximum width before margins appear */
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container border nobreakpoints">
<div class="row">
<div class="col-12">
<p>container with some content</p>
</div>
</div>
</div>
I am simply trying to get my main view pages to scroll but can not seem to achieve this without setting the height of the div to a specific amount, even whilst using md-content.
The container div that I am using to place all the views is nested two levels deep using ui-view.
The root state is as follows:
<md-toolbar layout="row" layout-align="center center">
<h3>Site Title</h3>
</md-toolbar>
<div layout="column" flex id="content" ui-view></div>
Then the next view is used to display a toolbar and a sidenav that is present across all child states/views:
<div layout="row" flex>
<md-sidenav>
<md-list layout="column" flex>
//SCROLLABLE SIDENAV WORKS PERFECTLY
//NAVIGATION ITEMS LIVE HERE
</md-list>
</md-sidenav>
<div layout="column" flex>
<md-toolbar layout="row" layout-align="center center">
<h2>Subheading</h2>
</md-toolbar>
<div class="md-padding" ui-view flex>
//THIS IS WHERE THE CHILD VIEWS GO
</div>
</div>
I have tried adding a class to both this final ui-view and also to a div but can only achieve scrolling with a specific height (which obviously doesn't work across devices) and by changing the position which causes problems given that there are two toolbars above it (and also with FAB's that float on top).
md-content doesn't work properly, I'm not sure why something so simple is so difficult in this situation. I am redesigning my webapp which has always used Bootstrap so please forgive my lack of CSS skills as it was already layed out when I received it.
Thank you for your help.
The Parent class which contains the following code must have layout="column" and use md-content wherever you use ui-view.
<md-toolbar layout="row" layout-align="center center">
<h3>Site Title</h3>
</md-toolbar>
<md-content layout="column" flex id="content" ui-view>
</md-content>
Similarly you should use md-content in following child elements to get the desired result.
Here is the Codepen.
I am trying to use md-grid-tile of angular material.The Issue I am facing is content of md-grid-tile is aligned center.How to make to work it from Start
<md-content layout-padding>
<md-grid-list md-cols="6"
md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter-gt-md="16px"
md-gutter-gt-sm="8px" md-gutter="4px">
<md-grid-tile
ng-repeat="room in floorDetails.roomDetails"
ng-style="{'background': '#f2f2f2'}"
md-colspan-gt-sm="3"
md-rowspan-gt-sm="2">
<div layout="row" layout-align="center center">
<b >Room1</b>
</div>
<div class='md-padding' layout="row" layout-wrap>
<md-card class="md-card" ng-repeat="bed in room.bedIds">
<md-card-content>
</md-card-content>
</md-card>
</div>
</div>
</md-grid-tile>
</md-grid-list>
Current snap
Desired snap
Try to provide a codepen/plunkr with an example next time, people are more inclined to help you if they have sample code to play around with.
You should read up on angular-material layout. You are mainly missing a <div layout="column" layout-fill> container inside of your md-grid-tile. The layout-fill makes the container fill the whole tile.
You can then adjust the size of your cards with fixed css sizes or flex them. The example flexes them horizontally which may not be desired.
codepen
I have bootstrap container (div class="container") and there are two rows (div class="row").
But between those rows I need one full width horizontal line. Full width - I mean that it should be full width - outside container. This line is just for design issues, it would have background color and that is it. I do not know how to create it.
Divide your content into 2:
<div class="container">
<div class="row">
stuff here
</div>
</div>
<div class="line"></div>
<div class="container">
<div class="row">
stuff here
</div>
</div>