I have a split screen, with a fixed right side. Left hand side will be a markdown editor, but with different configurations and styles to add to the output text.
Whereas the right hand side will basically be a preview. Left hand side is scrollable, and right hand side isn't.
After completing the form, users will be able to print out whatever they create basically. So to preview this, I created a content div (that will be printed out) with 210mm x 297mm dimensions to mimic A4 format.
What I want to do is to shrink it down using scale, to show the entire preview of the page to the user, but I want to have it vertically centered.
Here is the sandbox for it:
https://codesandbox.io/s/silly-cloud-cgsnd0?file=/index.html
And to see the actual issue, just uncomment width, height and scale, within content class.
I agree with Paulie_D.
Always give direct code snippets, in this case scale doesn't matter for you, flexbox is a responsive tool, and question is actually just how do you center that div in your setup.
To give others context this is the setup:
<div class="main-col second">
<header>...</header>
<main>
<div class="content">...</div>
</main>
<footer>...</footer>
</div>
.main-col.second {
display: flex;
align-items: center;
flex-direction: column;
background-color: #cccccc;
height: 100vh;
position: fixed;
right: 0;
top: 0;
}
.main-col.second main {
flex-grow: 1;
}
You have two options:
Apply flex-box to the main element inside the .second div.
.main-col.second main {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
Or remove the entire styling for the selector .main-col.second main and add justify-content: space-between to your .main-col.second selector.
Related
I have some html like this:
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
padding: 10px;
background-color: aqua;
}
.box {
width: 100%;
height: 100%;
flex-grow: 1;
background-color: cadetblue;
display: flex;
flex-direction: column;
}
.fill {
flex-grow: 1;
background-color: antiquewhite;
}
.middle {
height: fit-content;
background-color: azure;
justify-self: flex-end;
}
.bottom {
height: fit-content;
background-color: darkgray;
justify-self: flex-end;
}
<div class="container">
<h3>Title</h3>
<div>Some Stuff</div>
<div class="box">
<div class="fill">Fill</div>
<div class="middle">Middle</div>
<div class="bottom">Bottom</div>
</div>
</div>
I want the divs middle and bottom to stack at the bottom of the screen, and for the div fill to, as the name suggests, fill the remaining space without pushing the middle/bottom divs off the screen or creating a scrollbar, however it doesn't display like that:
Note that the middle and bottom divs are not visible and the scrollbar created by the fill div expanding beyond the available height.
See this StackBlitz for a demo: https://stackblitz.com/edit/angular-ivy-mwtwdg?file=src/app/hello.component.scss
I had to update a lot of CSS but feel free to take a look.
The right approach to any angular project is to have clean from the very first component (app component), and cascade it down to any other component.
Demo stackblitz
EDIT : comment explanation
"The right approach" can be explained quickly like this :
html and body should be at 100% of the page
App component should be at 100% and in display block
Any component that requires some specific layout (flex, grid), should be constrained by its parent or an absolute size, and display block.
The issue with Angular is that when you create a component, it is not set to display: block. This means the component is kind of free in the DOM flow, and this results in the kind of issues you have encountered.
When you set display: block to EVERY component (you can use angular.json to make it automatic), then you have a more deterministic approach to the CSS, where what you expect is what you get.
In your case, since the components were not display:block, they could not be constrained by height, width, or their parents.
Added to that, the fact that you wrote some probelmatic CSS (for instance, the sidenav-container being 100% of the height of its parent : what about the toolbar ?), this resulted in your issue.
As a final word, when it comes to CSS in Angular, be sure to have clean CSS from the top, and when you have any issue like you did, crawl back component by component, to find and correct the unclean ones !
I want to create a website, part of which has two elements in a container: title text and a button. I want to place them in the center of the main axis (the container), with some space between them. I don't like the justify-content: space-around option because it leaves too much space in the middle. So to do this, I would use left/right margins for each of the elements. But I also want to use flex-wrap: wrap;, meaning that if the screen size is too small to fit both of the elements, css would transfer the button to the next line. Every time this happens however, the margin-left still remains on the button, so it looks off-centered (see image).
Any ideas? Thanks.
EDIT: Using media queries messes things up, so my new question is this: Is there a way to make the space between two centered elements hold constant to all screen sizes without margins?
You can set the margin only for bigger screen sizes using CSS media queries
You're probably looking for justify-content: space-evenly in combination with text-align: center, align-items: center, and flex-wrap: wrap. This will separate the content out evenly, whilst simultaneously allowing it to wrap around without any margins when the viewport isn't wide enough to contain both elements.
.container {
display: flex;
align-items: center;
justify-content: space-evenly;
text-align: center;
flex-wrap: wrap;
border: 1px solid black;
height: 100px;
/*max-width: 80px;*/ /* Turn on to see the wrap */
}
.content {
flex: 1;
}
<div class="container">
<div class="content">content</div>
<div class="content">content</div>
</div>
I try to make site content vertically centered with display: flex; align-items: center; on normal mode. But if content changes and centered element height goes longer than window, it should behave like normal as align-items: flex-start;.
Use-case is that and I will share a sample fiddle belove with you.
Actual problem is that I should not use javascript on this issue, it should be solved by pure CSS code. (I added javascript to just show you how to increase content and see problem.)
If you try to click button on fiddle it will demonstrate my issue click more and see overflow is not run well and you can not see top elements. I need a clever option to make run this, thank you for helping.
html:
<div id="box">
<div>
<button id='click'>
click me
</button>
</div>
</div>
css:
html,body{
min-height:100%;
height:100%
}
#box {
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
#box div {
background:tomato;
width: 100px;
height: auto;
}
javascript:
document.addEventListener("click", function(){
var para = document.createElement("P");
para.innerHTML = "This is a paragraph.";
document.getElementById("box").children[0].appendChild(para);
});
let me show real-life sample images and then share fiddle to make it more cleaner.
normal mode:
long content mode:
jsfiddle:
link
as it is shown on this image overflow is not true also, it shows top but it is not top of the window.
I'm not sure if this will work for your requirements, but you need to start by changing the direction of the flexbox (you are using the default flex-direction: row but you'll need to switch to flex-direction: column). This will allow you to really take advantage of the dynamic sizing nature of flexboxes in the way that you need.
Since you are switching the orientation of the flexbox, you'll also need to switch your align-items and justify-content values. Since the effect you want is to end up with is justify-content: flex-start, go ahead and switch that now. You'll simulated justify-content: center with some placeholder elements.
Once you are using the flexbox vertically, you can then put in some placeholders that will shrink as the actual content grows. Put an empty div with this placeholder class above an below the actual content. The placeholder class then needs to be styled so that it can only shrink using flex-grow: 0 and flex-shrink: 1 (this works best if all other elements have flex-shrink: 0). It will also need to be styled with an initial height (I used height: 50vh but that might vary based on your needs).
With the flex-direction switched and the placeholders added, the last thing you need to do is set a height or max-height on the flexbox so that the placeholders will actually shrink. I recommend using height: 100vh but you can use something different based on the needs of your project.
Here's the end result (based on your sample code). I've made a few other tweaks (like setting the background on the placeholder) that are pretty specific to the example code and likely not what you need for your actual solution. I also eliminated some unnecessary code (like the styling on the HTML and body).
document.addEventListener("click", function() {
var para = document.createElement("P");
para.innerHTML = "This is a paragraph.";
document.getElementById("box").children[1].appendChild(para);
});
#box {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
height: 100vh;
overflow: auto;
}
#box>* {
background: tomato;
width: 100px;
margin: 0;
flex-grow: 1;
flex-shrink: 0;
}
#box>.placeholder {
height: 50vh;
flex-grow: 0;
flex-shrink: 100;
background: none;
}
<div id="box">
<div class="placeholder"></div>
<div>
<button id='click'>
click me
</button>
</div>
<div class="placeholder"></div>
</div>
I solved this problem with javascript but I should not use javascript. I decided to do not use flex center on my project.
So I am sharing this javascript solution to help if someone has the same problem and can use javascript on his project.
document.addEventListener("click", function(){
var para = document.createElement("P");
para.innerHTML = "This is a paragraph.";
document.getElementById("box").children[0].appendChild(para);
var el=document.getElementById("box");
if(el.children[0].offsetHeight>document.body.offsetHeight){
el.style.height='auto';
}else{
el.style.height='100%';
}
});
fiddle
I am building a website from an image given to me to practice (it comes from his employer as a test). I know he mainly used flexbox in the entire site, so im trying to stick with that (havent learned grid at all). On the top of the website is a sort of 'header' that includes some button links, a logo, and a search bar in the middle. The searchbar is located vertically about halfway down the entire header.
I am trying to do that without using a margin hack, but none of the typical align or justify commands seem to work. I also set a height, still nothing. Any thoughts?
Included a height property, also tried various commands like: align-item, align-items, align-self, justify-content, etc.
#searchbar {
height: 100px;
width: 15rem;
flex: 1;
/* margin-top: 15px; */
margin-right: -5px;
text-align: center;
}
I want to move the search bar down to the middle of its parent element, but nothing seems to work.
You need to apply align-self: center to the #searchbar - asyou can see - the display: flex is applied to the parent, then align-self to the div. This centeres it withing the parent. Then you will need to apply that same logic to the contents of the searchbar div itself - in order to center them within it. and adding justify-content: center to center the content horizontally within the parent div as well.
I have applied a yellow background on the parent div, a red border on the searchbar div to demonstrate the relationship and the centering of the inner div and a blue border on the text withon the searchbar div to show its centered..
#wrapper {
height : 200px;
display: flex;
background: yellow
}
#searchbar {
height: 100px;
width: 15rem;
flex: 1;
text-align: center;
align-self: center;
border: solid 1px red;
display: flex;
align-items: center;
justify-content: center
}
#searchbar-content {
border: solid 1px blue;
}
<div id="wrapper">
<div id="searchbar">
<span id="searchbar-content">Search bar content goes here</span>
</div>
I have two div elements which I want to center within an 'li' element. I found out that this could be done by using a flex layout. My parent div has the following properties:
display: -webkit-flex;
justify-content: center;
align-items: center;
This works and the two child divs are centering within the 'li'. Those are an image and a text element. But the additional behaviour this has, is not what I want. When the screen is too small for one line text, it is overriding the image. It looks like the following:
The more I shrink the page, the more the image dissappears. Does anybody know how this comes and how I can fix it?
EDIT Currently I am finding out how to add a working code snippet. For now, I have an image with the content structure, maybe this helps a bit.
I fill the image using the following css code:
.img_info_icon_png {
background: url("adapter-images.png") no-repeat -432px -0px;
width: 24px;
height: 24px;
}
Although the width is set to '24px', it is changing within the browser.
EDIT The following url is pointing to an example with the same behaviour: https://jsfiddle.net/Lkpxhux0/
As the flex-shrink defaults to 1, it allows for the items to shrink when not fit its parent.
Add flex-shrink: 0 to the .img_info_icon_png rule.
.outer {
display: flex;
justify-content: center;
align-items: center;
}
.outer .image {
background: url(http://placehold.it/50/f00) no-repeat;
width: 24px;
height: 24px;
flex-shrink: 0;
}
<div class="outer">
<div class="image"></div>
<div class="text">
This is some text that should not overlap the left aligned image
</div>
</div>