I'm trying to create a flexbox horizontal scrollable div like this.
<div class="hz-panel">
<div class="list-holder">
<img src="abc.png" width="40"/>
<p>Deals</p>
</div>
</div>
Here's the CSS for the same
.hz-panel {
background: #ffffff;
overflow-x: scroll;
display: flex;
padding: 0 3%;
}
.hz-panel .list-holder {
padding: 15px 13px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
Works fine on my chrome browser and Android Marshmallow webview, the problem occurs on kitkat webview where the whole scrollable list gets collapsed on condensed (one over other) since the width of every list holder becomes Zero while the padding is there. How can I avoid this problem. The parent should grow based on its children divs content. One solution is to set the min-width of list-holder div to say 54px. But there has to be a good way to avoid this.
Please Help.
Related
I have the following header with items and am using flexbox
<header class="header">
<div class="row container header__items">
<h2 class="header__logo">Test</h2>
<input type="text" class="input input--outlined" placeholder="Serach">
<h5>Karim</h5>
<h5>Karim</h5>
<h5>Karim</h5>
</div>
</header>
And my scss code with flexbox classes i have
.header{
height: 50px;
background-color: white;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
display: flex;
align-items: center;
&__items{
display: inherit;
flex-direction: row;
align-items: center;
background-color: red;
}
&__logo{
font-size: 35px;
font-weight: 200;
color: inherit;
}
}
The following has the header__items overflowing on the y-axis. How can i stop this. See the attached screenshot on the red background. Also it doesn't center the red box even if i reduce its height.Am using materialize css. I have also created https://codepen.io/geowan/pen/gOpzOEm which shows this.
Yash - there are so many things wrong with your markup. Firstly, Materializecss have already created a navbar for you - why re-invent the wheel? They don't use flexbox, but you can adapt their example to create what you need.
https://materializecss.com/navbar.html
Secondly, you are using a row inside a div that is also a container - and there are no cols inside. Here's how it works:
.container
This restricts the width of content. Consider it the inner-wrapper.
.row
Rows sit inside containers - they add margin-bottom for spacing, and are a container for cols.
.col
cols sit inside rows and lay your content out in columns. Please refer to the grid system, you are not suing elements as per the documentation.
https://materializecss.com/grid.html
input {
width: auto !important;
}
.links {
display: flex;
}
In terms of fixing your code, I removed .row from the element, put justify-content:space-between on the header__items to force the three items away from each other, wrapped your right hand links in a new div (and display: flex on these) and then changed the input width to auto, because the materialize default is 100% (so it was spreading the available width of your div.
https://codepen.io/doughballs/pen/MWwGwme
You need to spend some time in the docs and use the provided examples until you know what you're doing.
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 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>
I am developing a forum theme at the moment, and am trying to figure out how to do the last bits, the posts. Example of what I'd like to make:
So the key things to keep in mind here is how User Info and Post Content have different colors, as well as the Post Description in the grid is in the same column as the Post Content.
Using a simple div setup doesn't work, as I need the User Info height to control the height of Post Content and vice versa. Having a wrapper element with the background color of User Info would work, but only if the Post Content is taller than User Info.
I am really just looking for brainstorming here. What would be the best way to go about doing this?
I created a draft of what the final result should look like here:
It should be fine with the code you have provided altered slightly, but I have some questions.
1) You commented the description has a set height? Does it need to? Worst case scenario I just adjust this height in media queries.
2) I probably need to have some columns within Post description too. As you see in my draft there's a left container with the timestamp (let's call that desc-meta) of the post, and to the right there's a permalink with ID (let's call that desc-ID). There's also a set of post options (Edit, report etc.) between the two (let's call that desc-edit), but aligned to the right side of the description. From my brief understanding of flex I can't figure out how to always keep the desc-meta and desc-ID on the same row, while desc-meta can be moved down if needed on smaller screens.
This layout can be achieved with CSS flexbox.
For both columns to have equal height we can use the align-items property, which controls space distribution among flex items on the cross-axis.
The default value is stretch, which enables items to extend the full length of the container.
.container-outer { align-items: stretch; }
We can also use the flex-grow property to control how free space is distributed among flex items in the main-axis.
.post-content { flex-grow: 1; }
The code below renders this (with borders only for demo purposes):
.container-outer {
display: flex;
align-items: stretch; /* tells boxes to stretch vertically (default value) */
width: 75%;
min-height: 250px;
border: 5px solid mistyrose;
}
.user-info {
display: flex; /* nested flexbox, to enable flex properties */
flex-direction: column;
justify-content: center;
align-items: center;
width: 25%;
border: 3px solid red;
font-family: verdana;
font-weight: bold;
font-size: 2em;
color: red;
box-sizing: border-box;
overflow: auto;
}
.container-inner {
display: flex; /* nested flexbox */
flex-direction: column;
width: 100%;
border: 3px dashed black;
overflow: auto;
}
.post-description {
display: flex; /* nested flexbox */
justify-content: center;
align-items: center;
height: 50px; /* fixed height */
border: 3px solid green;
font-family: verdana;
font-weight: bold;
font-size: 1.5em;
color: green;
box-sizing: border-box;
overflow: auto;
}
.post-content {
display: flex; /* nested flexbox */
justify-content: center;
align-items: center;
flex-grow: 1; /* box takes all available space (stretch, basically) */
border: 3px solid blue;
font-family: verdana;
font-weight: bold;
font-size: 2em;
color: blue;
box-sizing: border-box;
overflow: auto;
}
<article class="container-outer">
<section class="user-info">USER<br>INFO</section>
<div class="container-inner">
<section class="post-description">POST DESCRIPTION</section>
<section class="post-content">POST CONTENT</section>
</div><!-- end .container-inner -->
</article><!-- end .container-outer -->
jsFiddle
Regardless of how much or how little content is placed in USER INFO or POST CONTENT, both columns will remain equal height.
The container is given a minimum height (min-height: 250px;) to ensure it doesn't get too small if there is no content in either box.
flex-grow is only applied to POST CONTENT because USER INFO already expands full height by inheriting height from the container, and POST DESCRIPTION has a fixed height, so it won't expand.
Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
My initial thoughts would be to do something like this:
<div class="one">
</div>
<div class="container">
<div class="two">
</div>
<div class="three">
</div>
</div>
And then give the left div a display of inline-block and the right container of inline-block, and the inner divs remain block.
.one {
display: inline-block;
}
.container {
display: inline-block;
}
I would use display: table with the corresponding rows/cells. See this http://jsfiddle.net/ycsmo9vg/ it should be easy extend this for your needs
notice how in the second cell, I have 2 divs, 1 has class row and the second div is plain (no class needed). This is up to you. Since a div is a block level element it will automatically take a row. Though I'd say keep it consistent and have a class of row wherever you have a row