I have the following html:
<div id="inner-container">
<div id="titles">
<div id="main-title">Main title here</div>
<div id="page-title">Page title here</div>
</div>
<nav id="progress-container>
<div id="page-counter">Page count here</div>
<a id="link-to-page-1"></a>
<a id="link-to-page-2"></a>
<a id="link-to-page-3"></a>
<a id="link-to-page-4"></a>
<a id="link-to-page-5"></a>
<a id="link-to-page-6"></a>
</nav>
</div>
and this css:
#inner-container {
display: flex;
}
#titles > div {
width: 100%;
}
#progress-container #page-counter {
float: left;
}
#progress-container a {
display: inline-block;
width: 30px;
height: 12px
border: 3px solid #ffffff;
}
#media (max-width: 900px) {
#progress-container #page-counter {
display: none;
}
}
I would like to add the necessary css flex rules so that #titles occupies the full remaining width, left over by #progress-container.
I have tried:
#titles {
flex-grow: 1;
}
And I've tried various rules for #page-progress, including 'flex-basis: auto' and 'flex-basis: content', but nothing has worked.
Note that I cannot set a fixed width to #progress-container as the number of 'pages' is dynamic and will vary. Also the #page-counter disappears below 900px.
If anyone has any ideas, I'd like to hear them!
try adding flex: 1; in #titles.
learn about flex properties over here
#titles {
flex: 1;
}
codepen link
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
What are the differences between flex-basis and width?
(6 answers)
Closed 3 years ago.
Using flex for the main menu that has three boxes. The first and third do not flex, and the second grows to fill. The second box is a nested flex that has two boxes, the first does not flex and the second grows to fill. The nested flex, second box is configured to use ellipsis for overflow, but that did not work. The box expands and pushes the nested flex, but not the parent flex, beyond the parent max width. Then discovered if the second boxe has a defined width, any value, even 1px, it works as expected. Concerned and courious why that is, and if i'm doing something wrong.
Codepin to see in action: https://codepen.io/nws-jholmberg/pen/mdyEyWq
<div class="menu-container">
<div class="menu">
<div class="menu-item-1 menu-item">X</div>
<div class="menu-item-2 menu-item">
<div class="menu-search">
<div class="menu-item-search-1">X</div>
<div class="menu-item-search-2">The search result goes here and does not fit</div>
</div>
</div>
<div class="menu-item-3 menu-item">X</div>
</div>
</div>
<br>
<div class="menu-container">
<div class="menu">
<div class="menu-item-1 menu-item">X</div>
<div class="menu-item-2 menu-item">
<div class="menu-search">
<div class="menu-item-search-1">X</div>
<div class="menu-item-search-2 add-width">The search result goes here and does not fit</div>
</div>
</div>
<div class="menu-item-3 menu-item">X</div>
</div>
</div>
.menu-container {
background-color: #f00;
max-width: 200px;
}
.menu {
display: flex;
}
.menu-item {
margin: 4px;
}
.menu-item-1 {
flex: none;
}
.menu-item-2 {
flex: 1;
background-color: #0ff;
}
.menu-item-3 {
flex: none;
}
.menu-search {
display: flex;
}
.menu-item-search-1 {
flex: none;
background-color: #3A3;
color: #fff;
}
.menu-item-search-2 {
flex: 1;
background-color: #3F3;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.add-width {
width: 1px;
}
there is 2 other hurtless ways you can use :
.menu-item-2 {
flex: 1;
background-color: #0ff;
overflow:hidden;
}
or
.menu-item-2 {
flex: 1;
background-color: #0ff;
min-width:0;
}
https://codepen.io/gc-nomade/pen/yLyJypm
I have a flexbox and I would like my form-control (width: 100%) button to extend to the same length as the h2, not the h1. Unfortunately, because the div that both the h2 and the button are placed in does not have a width declared, the form-control class is extending the width of the button to the parent that has a width declared.
I have tried setting the parent div (.landing-header div) to position relative, and I have tried setting a min-width on it but it has not worked.
The reason I don't want to explicitly declare a width is because I don't want my h2 to wrap around, rather I want my h2 to dictate the width of the div and therefore the width of the button.
Screenshot:
screenshot
#landing-page {
.row {
height: 100vh;
}
.btn-custom {
margin-top: 50px;
}
}
.landing-header {
padding-left: 5%;
div {
min-width: 60%;
}
}
.landing-graphic {
background: $blue;
width: 40%;
}
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) {
}
<div class="container-fluid">
<div class="row d-flex flex-row justify-content-between align-items-stretch">
<div class="landing-header d-flex flex-column justify-content-center">
<h1>SAMUEL COLE</h1>
<div>
<h2>Web Development and Design</h2>
<button class="btn form-control btn-custom about-nav">Get Started</button>
</div>
</div>
<div class="landing-graphic">
test
</div>
</div>
</div>
To achieve what you wanted to do I would set display: inline-block to the parent div of the h2 and the button.
With this change your snippet will look like this:
If you remove the flex characteristics from your landing-header div this is possible.
Then set the div holding the h2 and button to display:table and width:1%.
This will collapse the div to its own width.
Apply white-space:nowrap; to the h1 and h2 so the text doesn't wrap and...
#landing-page .row {
height: 100vh;
}
#landing-page .btn-custom {
margin-top: 50px;
}
.landing-header {
padding-left: 5%;
}
.landing-header div {
min-width: 60%;
}
.landing-graphic {
background: blue;
width: 40%;
}
button.about-nav {
background: limegreen;
}
.this-one {
display: table;
width: 1%;
}
.this-one h2 {
white-space: nowrap;
font-size: 14px;
}
.landing-header h1 {
white-space: nowrap;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row d-flex flex-row justify-content-between align-items-stretch">
<div class="landing-header ">
<h1>SAMUEL COLE</h1>
<div class="this-one">
<h2>Web Development and Design</h2>
<button class="btn form-control btn-custom about-nav">Get Started</button>
</div>
</div>
<div class="landing-graphic">
test
</div>
</div>
</div>
Having a problem trying to get a repeating two-column layout in AngularJS. My dataset is a JSON object of image information. I want to show a two column layout of images. No matter what I tweak, something is wrong in my odd/even logic, but I can't seem to figure it out. What am I doing wrong?
.left {
float: left !important;
width: 50% !important;
}
.right {
float: right !important;
width: 50% !important;
}
.group:after {
content:"";
display: table;
clear: both;
}
img {
max-width: 100%;
height: auto;
}
#media screen and (max-width: 480px) {
.left,
.right {
float: none;
width: auto;
}
}
<div ng-repeat="issue in issues">
<div ng-if="$even" class="group">
<div class="left" ng-if="$even">
<img src="{{ issue.image }}" ng-src="{{ issue.image }}">
</div>
<div class="right" ng-if="$odd">
<img src="{{ issue.image }}" ng-src="{{ issue.image }}">
</div>
</div>
</div>
The issue with code is you had wrap your logic inside
<div ng-if="$even" class="group">
Div which is restricting to show odd logic div.
instead of having two different div, I'd say use ngClassEven & ngClassOdd directive. Also remove the wrapper div which has ng-if="$even" condition.
<div ng-repeat="issue in issues">
<div ng-class-even="'left'" ng-class-odd="'right'">
<img ng-src="{{ issue.image }}">
</div>
</div>
I guess you already got your answer, but still here are some alternatives which may prove useful:
Simply ng-class - it's a little more flexible, so you may find it useful in other cases too. In this case:
<div ng-repeat="issue in issues" ng-class="{left: $even, right: $odd}">
<img ng-src="{{ issue.image }}">
</div>
or
<div ng-repeat="issue in issues" ng-class="$even ? 'left' : 'right'">
<img ng-src="{{ issue.image }}">
</div>
Note that unlike some other properties ng-class can coexist with class in harmony so you could also add class="item" or something similar.
Since it's a styling issue you may want to try to solve it in css. As long as you think IE 6-8 should die you can use the nth-child selector:
:nth-child(odd) { ... }
:nth-child(event) { ... }
Also since both my and Pankaj's answers removed your group class here is some simpler css which you could use instead:
.item {
float: left;
width: 50%;
}
.left {
clear: left;
}
#media screen and (max-width: 480px) {
.item {
float: none;
width: auto;
}
}
Or again if you're not all about IE you could use flexbox (which removes the need for any JS):
.parent {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 0 0 50%;
}
#media screen and (max-width: 480px) {
.item {
flex-basis: 100%;
}
}
So, I'm pretty certain it's not possible to do the following, but thought I'd ask anyway!
I've got 2 columns of content on my website design. Both have a wrapper div, floated, so they sit side by side. This looks fine on the desktop layout, and on the mobile (responsive) layout they currently both fill out to 100% width, and stack on top of each other.
What I'd really like to do is change the order of the nested divs inside each floated wrapper on the mobile layout so that, essentially, the two columns merge into one single column and the nested divs ordering changes as below:
DESKTOP
1 5
2 6
3 7
4 8
MOBILE
1
5
2
3
6
7
8
4
Hope this is clear enough! I know I can use flexboxes to change the order on the mobile layout, but as far as I can get is to change the order only within each individual wrapper div. Have also tried floating the nested divs in various ways on the desktop layout, but to no avail.
EDIT:
Apologies, I should have pasted my code, either:
<div id="container">
<div class="wrapper-left">
<div class="divInside div1">1</div>
<div class="divInside div2">2</div>
<div class="divInside div3">3</div>
<div class="divInside div4">4</div>
</div>
<div class="wrapper-right">
<div class="divInside div5">5</div>
<div class="divInside div6">6</div>
<div class="divInside div7">7</div>
<div class="divInside div8">8</div>
</div>
</div>
or
<div id="container">
<div class="wrapper">
<div class="divInside div1">1</div>
<div class="divInside div2">2</div>
<div class="divInside div3">3</div>
<div class="divInside div4">4</div>
<div class="divInside div5">5</div>
<div class="divInside div6">6</div>
<div class="divInside div7">7</div>
<div class="divInside div8">8</div>
</div>
</div>
Also here's an image to illustrate what I'm after. Sincere apologies, it's my first question here!
After the feedback on the comments, I change my answer using flexbox and order property as you point in your question that you have tried before. You do not need two wrappers to get it, instead.
html,body{
width: 100%;
height: 100%;
margin: 0;
}
#container{
width: 100%;
height: 100%;
}
.wrapper{
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
.divInside{
border: 1px solid;
height: 25%;
width: 50%;
flex-basis: 49%;
}
.div1{
order: 1;
}
.div2{
order: 3;
}
.div3{
order: 5;
}
.div4{
order: 7;
}
.div5{
order: 2;
}
.div6{
order: 4;
}
.div7{
order: 6;
}
.div8{
order: 8;
}
#media screen and (max-width: 400px){
.wrapper{
width: 100%;
}
.divInside{
flex-basis: 100%;
}
.div3{
order: 4;
}
.div4{
order: 8;
}
.div8{
order: 7;
}
}
<div id="container">
<div class="wrapper">
<div class="divInside div1">1</div>
<div class="divInside div2">2</div>
<div class="divInside div3">3</div>
<div class="divInside div4">4</div>
<div class="divInside div5">5</div>
<div class="divInside div6">6</div>
<div class="divInside div7">7</div>
<div class="divInside div8">8</div>
</div>
</div>
It would be simple to solve this if you set the HTML to a css table structure (display:table-row; and display:table-cell;) setting the desired values for the Desktop format.
Then, using media queries you just set these display properties on the desktop size, and when it goes to mobile size it will stack one on top of the other:
.main > div > div {
border: 1px solid silver;
}
#media (min-width: 400px) {
.main {
display: table;
width: 100%;
}
.main > div {
display: table-row;
}
.main > div > div {
display: table-cell;
}
}
<div class='main'>
<div>
<div>1</div>
<div>5</div>
</div>
<div>
<div>2</div>
<div>6</div>
</div>
<div>
<div>3</div>
<div>7</div>
</div>
<div>
<div>4</div>
<div>8</div>
</div>
</div>
Note: Firefox ONLY Solution
There is an experimental CSS display property of contents which will allow us to have our required structure but unbundle the respective wrappers as required.
I record it here for information purposes pending adoption by other browsers.
MDN Reference
These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.
Codepen Demo
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
#container {
width: 100%;
height: 100%;
display: flex;
}
.wrapper {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
}
.red > .divInside {
background-color: red;
}
.yellow > .divInside {
background-color: yellow;
}
.divInside {
border: 1px solid;
height: 25%;
width: 100%;
order: 0;
}
.red .divInside:nth-child(1) {} .red .divInside:nth-child(2) {
order: 3;
}
.red .divInside:nth-child(3) {
order: 5
}
.red .divInside:nth-child(4) {
order: 8
}
.yellow .divInside:nth-child(1) {
order: 2;
}
.yellow .divInside:nth-child(2) {
order: 5
}
.yellow .divInside:nth-child(3) {
order: 6
}
.yellow .divInside:nth-child(4) {
order: 7
}
#media screen and (max-width: 760px) {
.wrapper {
display: contents;
}
#container {
flex-direction: column;
}
}
<div id="container">
<div class="wrapper red">
<div class="divInside">1</div>
<div class="divInside">2</div>
<div class="divInside">3</div>
<div class="divInside">4</div>
</div>
<div class="wrapper yellow">
<div class="divInside">5</div>
<div class="divInside">6</div>
<div class="divInside">7</div>
<div class="divInside">8</div>
</div>
</div>
I have this header bar.
<div id="header">
<div class="container">
<img src="img/logo.png"/>
<div id="searchBar">
<input type="text" />
</div>
<div class="buttonsHolder">
<div class="button orange inline" id="myAccount">
My Account
</div>
<div class="button red inline" id="basket">
Basket (2)
</div>
</div>
</div>
</div>
I need the searchBar to fill whatever the remaining gap is in the div. How would I do this?
Here's my CSS
#header {
background-color: #323C3E;
width:100%;
}
.button {
padding:22px;
}
.orange {
background-color: #FF5A0B;
}
.red {
background-color: #FF0000;
}
.inline {
display:inline;
}
#searchBar {
background-color: #FFF2BC;
}
Use calc!
https://jsbin.com/wehixalome/edit?html,css,output
HTML:
<div class="left">
100 px wide!
</div><!-- Notice there isn't a space between the divs! *see edit for alternative* --><div class="right">
Fills width!
</div>
CSS:
.left {
display: inline-block;
width: 100px;
background: red;
color: white;
}
.right {
display: inline-block;
width: calc(100% - 100px);
background: blue;
color: white;
}
Update: As an alternative to not having a space between the divs you can set font-size: 0 on the outer element.
You can realize this layout using CSS table-cells.
Modify your HTML slightly as follows:
<div id="header">
<div class="container">
<div class="logoBar">
<img src="http://placehold.it/50x40" />
</div>
<div id="searchBar">
<input type="text" />
</div>
<div class="button orange" id="myAccount">My Account</div>
<div class="button red" id="basket">Basket (2)</div>
</div>
</div>
Just remove the wrapper element around the two .button elements.
Apply the following CSS:
#header {
background-color: #323C3E;
width:100%;
}
.container {
display: table;
width: 100%;
}
.logoBar, #searchBar, .button {
display: table-cell;
vertical-align: middle;
width: auto;
}
.logoBar img {
display: block;
}
#searchBar {
background-color: #FFF2BC;
width: 90%;
padding: 0 50px 0 10px;
}
#searchBar input {
width: 100%;
}
.button {
white-space: nowrap;
padding:22px;
}
Apply display: table to .container and give it 100% width.
For .logoBar, #searchBar, .button, apply display: table-cell.
For the #searchBar, set the width to 90%, which force all the other elements to compute a shrink-to-fit width and the search bar will expand to fill in the rest of the space.
Use text-align and vertical-align in the table cells as needed.
See demo at: http://jsfiddle.net/audetwebdesign/zWXQt/
I know its quite late to answer this, but I guess it will help anyone ahead.
Well using CSS3 FlexBox. It can be acheived.
Make you header as display:flex and divide its entire width into 3 parts. In the first part I have placed the logo, the searchbar in second part and buttons container in last part.
apply justify-content: space-between to the header container and flex-grow:1 to the searchbar.
That's it. The sample code is below.
#header {
background-color: #323C3E;
justify-content: space-between;
display: flex;
}
#searchBar, img{
align-self: center;
}
#searchBar{
flex-grow:1;
background-color: orange;
padding: 10px;
}
#searchBar input {
width: 100%;
}
.button {
padding: 22px;
}
.buttonsHolder{
display:flex;
}
<div id="header" class="d-flex justify-content-between">
<img src="img/logo.png" />
<div id="searchBar">
<input type="text" />
</div>
<div class="buttonsHolder">
<div class="button orange inline" id="myAccount">
My Account
</div>
<div class="button red inline" id="basket">
Basket (2)
</div>
</div>
</div>
This can be achieved by wrapping the image and search bar in their own container and floating the image to the left with a specific width.
This takes the image out of the "flow" which means that any items rendered in normal flow will not adjust their positioning to take account of this.
To make the "in flow" searchBar appear correctly positioned to the right of the image you give it a left padding equal to the width of the image plus a gutter.
The effect is to make the image a fixed width while the rest of the container block is fluidly filled up by the search bar.
<div class="container">
<img src="img/logo.png"/>
<div id="searchBar">
<input type="text" />
</div>
</div>
and the css
.container {
width: 100%;
}
.container img {
width: 50px;
float: left;
}
.searchBar {
padding-left: 60px;
}
in css:
width: -webkit-fill-available
I would probably do something along the lines of
<div id='search-logo-bar'><input type='text'/></div>
with css
div#search-logo-bar {
padding-left:10%;
background:#333 url(logo.png) no-repeat left center;
background-size:10%;
}
input[type='text'] {
display:block;
width:100%;
}
DEMO
http://jsfiddle.net/5MHnt/
Include your image in the searchBar div, it will do the task for you
<div id="searchBar">
<img src="img/logo.png" />
<input type="text" />
</div>
I did a quick experiment after looking at a number of potential solutions all over the place. This is what I ended up with:
http://jsbin.com/hapelawake