I have an angular webpage using Angular Material and Flex-box. This page will have a graph that retains its ratio and therefore has a max-width set to prevent it from taking up too much vertical space. I want to set the parent div of the graph to only take up as much horizontal space as the child element. I will fill the rest of the horizontal space with a div that has fxLayout column and will stretch vertically.
Currently
<div fxLayout="row">
<div fxLayout="column" fxFlex>
<app-graph></app-graph> //max-width: 1300px
<app-results></app-results>
</div>
<div fxLayout="column" fxFlex="30" style="background-color: red;">
</div>
</div>
Update
I am getting closer. I found setting the fxFlex="0 1 1300px" gives me the behavior I want of the first div. I can't figure out what to do for the 2nd div so that it continues to fill the remaining space.
<div fxLayout="row">
<div fxLayout="column" fxFlex="0 1 1300px">
<app-graph></app-graph>
<app-results></app-results>
</div>
<div fxLayout="column" fxFlex="20" style="background-color: red;">
</div>
</div>
This is what I came up with to get what I wanted. Still not perfect, but it retains the min and max size of the first component.
<div fxLayout="row" fxLayout.lt-md="column" fxLayout="start stretch">
<div fxLayout="column" fxFlex="0 1 1100px" style="margin: 0 5px;">
<app-graph></app-graph>
<app-results></app-results>
</div>
<div fxLayout="column" fxFlex style="border: black solid 1px; margin: 0 5px;">
<p style="font-size: 4em">Stuff will go here</p>
</div>
</div>
Related
I am working on an angular project where I am getting the data in image and title and location. I tried to make a responsive div but unable to make them in one size.
<div *ngFor="let company of companies" class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
<div class="card">
<div class="card-content">
<div class="card-body py-0 text-center">
<input [checked]="true" type="radio" formControlName="scope" (click)="nextFormPostion(nextFormPostionName)" (change)="nextFormPostion(nextFormPostionName)" id="img{{company.scope}}" class="d-none imgbgchk" value="{{company.scope}}">
<label for="img{{company.scope}}">
<div class="row justify-content-center">
<div class="col-12" style="height: 6rem ; display:table-cell; vertical-align: middle;">
<img src="{{company.logo}}" class="mt-1 img-fluid mh-100" alt="Image 1">
</div>
<div class="col-12 mt-2" style="min-height: 3rem;font-size: 12px;text-transform: none;">
<span>{{company.company}}</span>
</div>
<div class="col-12 mt-1" style="min-height: 2.5rem;font-size: 12px;text-transform: none;">
<span>{{company.country}}</span>
</div>
</div>
<div class="tick_container">
<div class="tick"><i class="fa fa-check"></i></div>
</div>
</label>
</div>
</div>
</div>
</div>
company.logo is the image path and company.company is the name of the company. I want to make image in vertical and horizontal align center and if company name length is new line it change the size of all divs.
You don't need bootstrap exactly to do that you can use JavaScript to get the div side you want and apply as width + height.
Also you can use CSS with, for example:
width: 100%
The first thing you need to check if you have any border, margin, padding that is affecting your code. I don't know, I don't have enough information. But I believe it could be because Bootstrap puts automatic padding on .row
For this you can put
<div class="row g-0">
</div>
Bootstrap 5 - No gutters
Or if it is in another element, simply add the px-0 class that removes the padding from the widths.
I am using Bootstrap v5 and would like to get a grid layout, where one column has position:fixed so that it scrolls with the very long column left to it.
The issue is the following:
Whenever the height of the first row gets too large such that the second row (with the position:fixed column) moves out of the viewport, then also the column ("Some sample content") disappears. For smaller heights, it works as expected.
The example code is:
<div class="container">
<div class="row mt-5">
<div class="col-md-8" style="min-height:200px; border: 1px solid red">
</div>
<div class="col-md-4">
Box1
</div>
</div>
<div class="row mt-3">
<div class="col-md-8" style="min-height:4000px; border: 1px solid red">
</div>
<div class="col-md-4">
<div style="position:fixed">
Some sample content
</div>
</div>
</div>
<div class="row">
<div class="col-md-8" style="min-height:500px; border: 1px solid red">
</div>
<div class="col-md-4">
Box End
</div>
</div>
You can find an example at: https://jsfiddle.net/4cma32k9/1/
Do you have any ideas to resolve it?
Best,
Tom
Use sticky position:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" >
<div class="container">
<div class="row mt-5">
<div class="col-md-8" style="min-height:200px; border: 1px solid red">
</div>
<div class="col-md-4">
Box1
</div>
</div>
<div class="row mt-3">
<div class="col-md-8" style="min-height:4000px; border: 1px solid red">
</div>
<div class="col-md-4">
<div class="sticky-top">
Some sample content
</div>
</div>
</div>
<div class="row">
<div class="col-md-8" style="min-height:500px; border: 1px solid red">
</div>
<div class="col-md-4">
Box End
</div>
</div>
</div>
When I try to fix problem in JSFiddle i just add border and i see already your
Some sample Content
text is positioned by viewport whatever you do. In this point your result is what you want with large screen?
<div class="col-md-4" style="border:1px solid green;" >
<div style="position:fixed; border:1px solid gold;">
Some sample content
</div>
</div>
position:fixed similarty position:absolute both abolute and fixed
take the defined element out of the normal flow. Depends on the relatively positioned parent element.
Maybe some bootstrap problem occurs. Try to figure out without bootstrap codes. give Two or more divs and style it. Then try to shape it and reach what you want, if it is not working , I'll write and try it when I'm available.
Please make you sure, all option you try and give me feedback.
<div>
<div style="position:fixed; z-index:9999;">
do something ....
</div>
</div>
So whatever content is in this div, its position is always in front of other content. If you want the content in this div to be behind the content of another div then you can use z-index:-9999
I want to have a image at left and at right some information. This information div at right have a orange border around. And I want that this information area occupies the same height of the image. So i created a div .details with display flex and align-items stretch. But its not working, the image and the information area dont occupy the same width. Do you know why?
example: https://jsfiddle.net/wjvwovy2/
html:
<div class="container py-4">
<div class="row">
<div class="details">
<div class="col-8 px-0" style="background-color: red">
<img style="width: 100%" src="http://via.placeholder.com/700x350"/>
</div>
<div class="col-4 px-0">
<div class="details-title d-flex flex-column align-items-start">
<span class="font-size-sm font-weight-semi-bold">Date</span>
<h1 class="h5 font-weight-bold">Title</h1>
<span class="details-title-subtitle font-size-sm font-weight-bold">Subtitle</span>
Subtitle2
</div>
</div>
</div>
</div>
</div>
This is because you have applied the visual styles in a descendant which is not a direct child of the .details element. There are several ways to fix this, depending on what you are trying to achieve.
A quick one is to apply d-flex class in <div class="col-4 px-0"> and flex-grow: 1 in <div class="details-title d-flex flex-column align-items-start">.
https://jsfiddle.net/todorito/32ukpemr/1/
In your fiddle it's just the closing bracket of details-title in the CSS which is missing:
https://jsfiddle.net/468p5rj7/2/
I have an h4 nested in 2 divs like so
<div id="my-team-lineup" style="text-align:center">
<div id="myteamDiv" style="width:100%; ">
<div id="myTeamBeforeDiv" style="width:50%; float: left;">
<center>
<h4>Before Trade</h4>
<div class="tableRow header blue" id="statTable0">
<div class="cell">Pos</div>
<div class="cell">Players</div>
<div class="cell">Opp</div>
<div class="cell">Proj Pts</div>
</div>
<div class="tableRow">
<div class="cell">
Text
</div>
<div class="cell">
Text
</div>
<div class="cell">
Text
</div>
<div class="cell">
Text</div>
</div>
<br />
<h4>Week At Bottom</h4>
</center>
</div>
</div>
I want to have this h4 sticky to the bottom of the page. I have tried every combination of position and bottom I can think of and nothing is working. Just a note as I have an exact replica of this that takes up the other 50% of the page, and the height of the divs can be different due to content.
First, you didn't closed all divs in your code. correct it.
You can set position as fixed and bottom as 0.
HTML
<h4>text</h4>
CSS
h4{
position: fixed;
bottom: 0;
}
https://jsfiddle.net/xxfhqv36/
I've a fluid row in which i have a item (nontext) and I want to align it horizontal centered
text
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" style="text-align: center">
<img src="#Url.Content("~/Images/Domain/IMG_1710.jpg")" />
</div>
</div>
</div>
this works pretty fine
but as soon as I add a max-width and max-height the alignment doesn't work anymore.
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" style="text-align: center;max-height: 300px; max-width: 400px" >
<img src="#Url.Content("~/Images/Domain/IMG_1710.jpg")" />
</div>
</div>
What am I doing wrong ? How can I set max width and hight and have a centered alignment?
To follow bootstrap rules, try to center it with the offset class
<div class="row-fluid">
<div class="span4 offset4">
<img src="yourimage" />
</div>
</div>
see documentation
Applying max-height and max-width on one of Bootstrap's span# classes will override grid styling. I would recommend adding the height/width on the image (if the text align doesn't work, you can try margin: 0 auto on the image.