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.
Related
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 am trying to build a website which I also use angular. I need to perfectly centre a div element which contains some icons (around 80) and those icons must be left aligned. Contents are filtered via text input and this filtration results in different numbers of icons every time. I've tried a grid system similar to a bootstrap's grid, flexbox, whatever. Either a small extra area is left blank on the right side when I align my contents to left, or all the elements are centred and the bottom elements are centred and the div does not look organized. Moreover, I need to keep at least 10 px of margins between each icon. Can anyone help me?
.notfound {
text-align: center;
}
.iconelement:hover {
background-color: #ffffff;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.16);
color: #000000;
}
.iconelement:active {
background-color: #2974d4;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.16);
color: #ffffff;
}
.grid-container {
background-color: #fdfdfd;
padding-bottom: 20px;
display: flex;
justify-content: center;
text-align: left;
flex-wrap: wrap;
}
.iconelement {
width: 60px;
height: 60px;
border-radius: 4px;
background-color: #fdfdfd;
text-align: center;
margin: 10px;
float: none;
color: #000000;
}
.icons {
position: relative;
top: 50%;
transform: translateY(-50%);
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="ui-g ">
<div class="ui-g-12" *ngIf="(icons|filter:searchText).length===0">
<div class=" ui-g-12 notfound">
<h3>No results for "{{searchText}}"</h3>
</div>
</div>
</div>
<div class="ui-xl-3 ui-lg-3 ui-md-2 ui-sm-1" (click)="unselectIcon()"></div>
<div class=" ui-xl-6 ui-lg-6 ui-md-8 ui-sm-10 ">
<div class="ui-g-12 grid-container">
<div class="ui-g-1 iconelement" *ngFor="let icon of icons| filter : searchText; let i = index " (click)="getIcon(icon.id)">
<i class="icons {{icon.name}}"></i>
</div>
</div>
</div>
<div class="ui-xl-3 ui-lg-3 ui-md-2 ui-sm-1" (click)="unselectIcon()"></div>
</div>
ps: text align: center does not solve this problem.
If your goal is to create a responsive auto-centering container where items (icons) maintain the same width while the gaps between items adapt, your best way to do that currently is probably flexbox (and grids in the future). An example here.
The issue with flexbox based layouts, though, is how to have the last row aligned to the left. You could try some of the solutions proposed in this thread, however they work only in certain situations. Oftentimes you would need to use javascript to achieve this. I created a function for that and could post it somewhere should you be interested.
Generally, when you're dealing with this kind of a problem, you should consider, which elements need to adapt. Whether the gap between elements, the elements themselves or the container where elements reside.
Flexible gap - fixed elements - fixed/flexible container
Manageable by the approach I described above - flexbox to stretch the gap, fixed width on the elements and possibly javascript to align last row.
Fixed gap - flexible elements - fixed/flexible container
Fixed padding and flex attribute on the element.
Fixed gap - fixed elements - fixed container
Use float: left on the elements and put all into a container of defined dimensions. The container's width must be in multiples of elements width + padding to be centered, affected by how many elements should be on each line.
Fixed gap - fixed elements - flexible container
This is fairly well doable with flex attribute again. Often though there is a need to set a minimal width and we're back at case #1.
So achieving a fully responsive centered element with left-aligned items is currently a challenge. If you need perfection at all costs, I'd suggest using several media queries instead to make sure it always looks the way you want (As discussed here for example).
I have found my solution but it was not in the way I've wanted. I've got rid of all the ui-g grid layout except the grid itself. (the main reason that I've been using it is to run my page on all browsers, ie11 cause many problems with new technologies) I also used flex (flex-wrap as recommended) to keep the elements in the div.
That way the icons covered 100% of the screen in width.
To contain the items I have a maximum width but this meant that the responsiveness of the container is not there anymore. that is why I don't like this solution. To patch this, I used #media screen to adjust the number of elements displayed depending on the screen size.
To make it perfect it needed many trials and errors but a fix is a fix.
Fixing all the elements is done by "margin: auto;"
here is the code after fix:
<div class="ui-g">
<div class="notfound" *ngIf="(icons|filter:searchText).length===0">
<h3>No results for "{{searchText}}"</h3>
</div>
<div class="ui-g-12 grid-container">
<div class="ui-g-1 iconelement" *ngFor="let icon of icons| filter : searchText; let i = index "(click)="getIcon(icon.id)">
<i class="icons pi pi-{{icon.name}}" ></i>
</div>
</div>
In the div at the top I still use class=ui-g" to push down the sticky element which displays the icon details.
Each icon has the width and height of 60 px and has 10 px margin, so I needed to calculate the sum of the width and apply it according to the screen and how many icons I need to see side by side.
CSS:
.notfound {
text-align: center;
margin: auto;
width: 100%;
}
.iconelement:hover {
background-color: #ffffff;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.16);
color: #000000;
}
.iconelement:active {
background-color: #2974d4;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.16);
color: #ffffff;
}
.grid-container {
background-color: #fdfdfd;
padding-bottom: 20px;
display:flex;
flex-wrap: wrap;
max-width: 660px;
margin: auto;
}
.iconelement {
width: 60px;
height: 60px;
border-radius: 4px;
background-color: #fdfdfd;
text-align: center;
margin: 10px;
float: none;
color: #000000;
}
.icons {
position: relative;
top: 50%;
transform: translateY(-50%);
font-size: 2em;
}
#media screen and (max-width: 430px) {
.grid-container{
max-width: 260px;
}
}
the last bit is for the width configuration.
I've been looking around, and haven't found a way to get my elements to display the way I want them too (Mostly because I've absolutey no idea what I'm doing in CSS).
Here's my JS fiddle:
https://jsfiddle.net/q0qjhk8p/2/
And here's an ASCII demonstation on how I wish for it to be displayed:
Title goes here
----------------------------------------------------------------------------
Content put here should be on [ image
the left side, yet not affect the goes
avatar on the right. here ]
And this
text should
be centered
underneath the
image.
---------------------------------------------------------------------------
Blablablablaba footer
So here's a solution using FlexBox
The things to note are...
I removed all your text-align stuff. That's the wrong property to use to get the layout you're looking for.
I made the Avatar container a percentage width, and set the width of the image inside to 100%. That way you have a somewhat responsive solution. You could set an explicit width of the avatar container if you wanted.
You can set an explicit width for the copy too, if you wanted. I'd suggest setting a percentage width and a right margin.
The heavy lifting is done with flexbox,
.user-profile-card > .user-profile-card-body {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
background: #AAA;
}
I've added some extra divs and also used the following CSS
float : left // float to content to the left side
float : right // float the avatar to the right side of the card.
display : inline-box // this is to make the image stay on the same line as the content
see fiddle below
https://jsfiddle.net/n4k469o3/
CSS
.user-profile-card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
padding: 10px;
border: solid 1px transparent;
}
.content {
width:100px;
display: inline-block;
float: left;
}
.user-profile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2)
}
.user-profile-card > .user-profile-card-title {
padding-bottom: 10px;
border-bottom: solid 1px #ccc;
text-align: left;
font-size: 24px;
}
.user-profile-card > .user-profile-card-body {
padding: 10px;
text-align: left;
}
.user-profile-card > .user-profile-card-body > .user-profile-card-avatar {
align-content: right;
text-align: right;
display: inline-block;
width: 110px;
float: right;
}
.img-card-avatar {
border-radius: 50px;
}
.user-profile-card > .user-profile-card-foot {
padding-bottom: 5px;
padding-top: 10px;
border-top: solid 1px #ccc;
text-align: left;
font-size: 10px;
margin-top:240px;
}
HTML
<div class="user-profile-card">
<div class="user-profile-card-title">
A title is put here
</div>
<div class="user-profile-card-body">
<div class="content">
Content put here should be on the left side, yet not affect the avatar on the right.
</div>
<div class="user-profile-card-avatar">
<img src="https://i.stack.imgur.com/pH9qA.jpg"><br>
And this text should be centered underneath the image.
</div>
</div>
<div class="user-profile-card-foot">
Some footer stuff is put here.
</div>
</div>
The simplest way to do this is to wrap the main content in a div. Then wrap that and the div with the image and subtext in another div. I have wrapped them in main tag below, just so that stands out, but you can use a div if you're not familiar with semantic tags just yet.
https://jsfiddle.net/g90xxaaj/
Then I gave the main tag a css property of display: flex this makes the divs inside it sit side by side.
Then I added have the div encasing the image and subtext a `text-align: center' property.
You don't have to use flexbox for this but it is an excellent way to deal with things like this is css. The other way you could do it is to look into something called floats. Joshua Duxbury's answer explains how to do this. One reason not to use flexbox is that it is relatively new and won't work on internet explorer 9 or older. If that is not a concern then flexbox is much less confusing than working with floats in the long run.
This is probably the best starting point for learning more about flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This is a great game to play for practice: http://flexboxfroggy.com/
And here is a fantastic free course if you have the time and are serious: https://flexbox.io/
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.
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