I'm trying aligned on one line sections new-setstion, user-section with inline-block but when I put text they diverge.
This is my css code, if you have better suggestions or criticisms please share them.
.page-content {
margin: 0 auto;
text-align: center;
}
div.news-section {
display: inline-block;
max-width: 500px;
min-width: 200px;
background-color: #fff;
word-wrap: break-word;
text-align: left;
}
div.user-section {
display: inline-block;
max-width: 300px;
min-width: 200px;
background-color: #fff;
word-wrap: break-word;
text-align: left;
}
This is my html code
<div class="page-content">
<div class="news-section">
<div class="news-section-header">
<h2>News</h2>
</div>
<!-- content -->
</div>
<div class="user-section">
<div class="user-section-header">
<h2>User section</h2>
</div>
<form class="user-login-form" method="POST">
<div><input type="email" name="user-name" placeholder="John-Doe#mail.com" /></div>
<div><input type="password" name="user-pass" placeholder="*****" /></div>
<div><input type="submit" name="sub-button" value="Login"/></div>
</form>
<!-- another div content -->
</div>
I think you want something like this: https://jsfiddle.net/oqvzraxs/, if I understood correctly your question.
I have added display: inline-flex to .page-content
.page-content {
display: inline-flex;
margin: 0 auto;
text-align: center;
}
Related
What I have now:
display: flex;
align-items: center;
flex-direction: column;
How it looks with error:
What's the target:
I can do it with
margin-left: *X*px, but it is not the way I want to solve it.
May I do it with some flex properties ?
It is important to do it without bootstrap and grid.
This could be a possible solution: Center the box with flexbox and display the errors with position: absolute;. You need to take care of responsive optimization if you want to use it on a wider range of devices.
* {
box-sizing: border-box;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.box {
border: 1px solid black;
padding: 10px;
width: 400px;
}
.field {
position: relative;
}
.input {
margin-bottom: 10px;
width: 100%;
}
.error {
position: absolute;
left: 105%;
top: 0;
width: 200px;
}
<div class="container">
<div class="box">
<div class="field">
<input class="input" type="text">
<div class="error">error 1</div>
</div>
<div class="field">
<input class="input" type="text">
<div class="error">error 2</div>
</div>
<button>Send</button>
</div>
</div>
For a personal project with Angular, Angular Material and Flex-Layout I am trying to achieve a similar layout used by Bring! App:
Having images of different size (not all squared) I would like to center them proportionally and allow some text under them.
I have the following template and scss styles:
<div fxLayout="row" fxLayoutGap="5px" class="cards-container">
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/apple.png" alt="Mela" />
</div>
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/milk.png" alt="Latte" />
</div>
<span class="item-name">Latte</span>
<span class="description">1 description comes here, must be hidden if long text</span>
</div>
</div>
//---------------------------------------------------
.cards-container {
flex-wrap: wrap;
.item-card {
display: flex;
flex-direction: column;
justify-items: end;
color: white;
width: 7em;
height: 7em;
text-align: center;
background-color: darkslategray;
margin: 5px 0;
img {
width: 40%; // TODO: how to scale?
height: 40%;
}
.text-container {
display: flex;
flex-direction: column;
.item-name {
display: inline-block;
font-size: 1.1em;
}
.description {
width: 99%;
font-size: 0.8em;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
}
}
}
}
However the images do not scale down to keep the proportions with the others images, especially if narrow and long.
It all seems to look fine but it looks like your HTML code is missing the .text-container div and class.
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/apple.png" alt="Mela" />
</div>
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
should be
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/apple.png" alt="Mela" />
</div>
<div class="text-container">
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
</div>
Now for the text-overflow: ellipsis; this doesn't work on multi-lines unless you implement some JavaScript or something.
If there is any change to your code, I'd make the images a background-image instead. There could be other ways without this, but it's what I use to make sure the container is responsive with the image always responsive and centred.
For Example: https://codepen.io/StudioKonKon/pen/wRjOzr (Includes SCSS)
.image {
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
font-size: 0;
}
.image-mela {
background-image: url("https://via.placeholder.com/150x175");
}
.image-latte {
background-image: url("https://via.placeholder.com/200x50");
}
.image-long {
background-image: url("https://via.placeholder.com/50x100");
}
.cards-container {
width: 100%;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.cards-container .item-card {
display: flex;
flex-direction: column;
justify-items: end;
color: white;
width: 7em;
height: 7em;
text-align: center;
background-color: darkslategray;
margin: 5px;
padding: 0.5em;
box-sizing: border-box;
overflow: hidden;
}
.cards-container .item-card .image {
display: block;
margin: auto;
width: 40%;
height: 40%;
}
.cards-container .item-card .text-container {
display: flex;
flex-direction: column;
}
.cards-container .item-card .text-container .item-name {
display: inline-block;
font-size: 1.1em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cards-container .item-card .text-container .description {
font-size: 0.8em;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
<div fxLayout="row" fxLayoutGap="5px" class="cards-container">
<div class="item-card">
<div class="image image-mela">Mela</div>
<div class="text-container">
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
</div>
<div class="item-card">
<div class="image image-latte">Latte</div>
<div class="text-container">
<span class="item-name">Latte</span>
<span class="description">1 description comes here, must be hidden if long text</span>
</div>
</div>
<div class="item-card">
<div class="image image-long">Long Image</div>
<div class="text-container">
<span class="item-name">Long Image Text</span>
<span class="description">must be hidden if long text</span>
</div>
</div>
</div>
Have you tried:
img {
width: 40%;
height: auto;
}
It should leave the image proportions consistent.
It is simple. I think it will solve the problem. :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>item</title>
<style type="text/css" media="screen">
.item-single{
width: 100px;
background-color: #e7e7e7;
height: 100px;
text-align: center;
}
.item-single span{
display: block;
border: 1px solid #000; /* just to show the alignment */
}
.item-single img{
width: 50%; /* you can scale it down using width */
border:1px solid #000; /* just to show the alignment */
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="item-single">
<img src="http://sugamparajuli.com.np/wp-content/uploads/2019/01/banana.png">
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
</body>
</html>
This is the result.
item-image
I'm trying to get a UI that looks somewhat like this:
In the image pretend the top bar with "New York..." and the "Book it" button are fixed and the stuff between is scrollable.
The HTML I have so far is this (note that the .button and .form are just divs to try to keep the example as simple as possible)
<div class="wrapper">
<div class="sidebar"> <!-- Hidden from UI unless you swipe left to right --> </div>
<div class="inner-wrapper">
<div class="header">Title here</div>
<div class="balance-bar">$0</div>
<div class="app-content">
<div class="body-content">
<div class="form">
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
</div>
<div class="button">Submit</div>
</div>
</div>
</div>
</div>
The CSS is:
.button, input {
width:100%;
box-sizing: border-box;
}
.wrapper {
border: 2px solid blue;
height:200px;
overflow: auto;
}
.header {
background: lightblue;
flex-shrink: 0;
}
.balance-bar {
background: lightgreen;
flex-shrink: 0;
}
.inner-wrapper {
border: 2px solid red;
display: flex;
flex-direction: column;
}
.app-content {
border: 2px solid green;
overflow:auto;
}
.body-content {
border: 2px solid orange;
display: flex;
flex-direction:column;
}
.form {
}
.button {
background: pink;
flex-shrink: 0;
}
If I move the button outside the form and as a child of the first flexbox (so .button would be a sibling of .app-content) this all works great and you don't even need a flexbox within a flexbox. One flexbox works perfect. The issue tho is that the semantics are all wrong, you don't get built in browser features like enter to submit, and the flow for the JS to get it to work is super janky.
I was hoping with flexbox I can set the wrapper to the height of the window and flexbox would just calculate all children to fit within the window (which it does, but not for children set to flex)
http://jsbin.com/gumozexihi/1/edit?html,css,output
I hope this helps. I kept the button inside the form and gave it a position: fixed and a bottom: 0.
HTML:
<div class="wrapper">
<div class="inner-wrapper">
<div class="header">Header</div>
<div class="balance-bar">$0</div>
<div class="app-content">
<div class="body-content">
<div class="form">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<div class="button">Submit</div>
</div>
</div>
</div>
</div>
</div>
And the CSS:
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
}
.inner-wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.app-content {
flex: 1;
overflow: auto;
}
.body-content {
height: 1000px;
display: flex;
flex-direction: column;
}
.button {
position: fixed;
bottom: 0;
width: 100%;
}
I added height: 1000px to .body-content to mimic having more content than the available screen height. And I fixed the button to the bottom using position: fixed and bottom: 0, which may not be ideal solutions but it seems to work while keeping the button inside the form element.
Update
Just saw you specifically didn't want to use a fixed position on the button. If I can find another solution I'll edit this response, but for a single button this should do the trick.
I am attempting to put together a web page that has four areas: a header, footer, content, and controls. The header and footer should be fixed at the top and bottom of the page (respectively) and automatically size to their content. The controls should go on the far right side of the page (vertically between the header and footer) and is fixed-width. The content area should fill the remainder of the page.
I had this working, but now whenever I add any kind of content (even just a single-word paragraph element), the controls area moves to almost the very bottom of the page. You can see what I'm referring to here: http://jsfiddle.net/ym8vY/1/
If I leave the controls div completely empty, it lays out exactly how I want it: http://jsfiddle.net/ym8vY/
My body currently looks like:
<header>
<p>Header</p>
</header>
<div class="main">
<div id="streamGraph" class="page">
<div class="page-row">
<div class="page-content-container-outer">
<div class="page-content-container-inner">
<div id="graphContainer" class="page-content"></div>
</div>
</div>
<div class="page-controls-container-outer">
<div class="page-controls-container-inner">
<div class="page-controls"><!-- If anything goes inside here, it breaks -->
<div style="display: table; height: 100%;">
<div style="display: table-row; height: 0;">
<div>
<label for="sampleCount"># Samples:</label>
<input type="text" id="sampleCount" name="sampleCount" value="100" />
</div>
<div>
<label for="tagCount"># Tags:</label>
<input type="text" id="tagCount" name="tagCount" value="25" />
</div>
<div>
<label for="fromDate">From:</label>
<input type="date" id="fromDate" name="fromDate" />
</div>
<div>
<label for="toDate">To:</label>
<input type="date" id="toDate" name="toDate" />
</div>
<button id="tagsButton">Customize Tags</button>
<button id="refreshButton">Apply</button>
</div>
<div style="display: table-row;">
<div id="tagContainer" style="overflow: auto; height: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>Footer</p>
</footer>
And my CSS is:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
display: table;
}
header, .main, footer {
display: table-row;
width: 100%;
}
header, footer {
background: lightgray;
}
.main {
height: 100%;
}
.page {
height: 100%;
display: table;
}
.page-row {
display: table-row;
width: 100%;
}
.page-content-container-outer {
display: table-cell;
width: 100%;
height: 100%;
padding: 10px;
}
.page-controls-container-outer {
display: table-cell;
height: 100%;
padding: 10px;
}
.page-content-container-inner {
border: solid;
border-color: gainsboro;
border-width: 5px;
border-radius: 10px;
width: 100%;
height: 100%;
padding: 5px;
}
.page-controls-container-inner {
border: solid;
border-color: gainsboro;
border-width: 5px;
border-radius: 10px;
height: 100%;
padding: 5px;
}
.page-controls {
height: 100%;
width: 300px;
}
.page-content {
height: 100%;
}
Your right-side div is being pushed down to the baseline. Add vertical-align:top to fix it:
div
{
vertical-align: top;
}
JSFiddle
Side note: The default value for vertical-align is baseline. Always keep this in mind when using cells and inline-blocks.
Add vertical-align:top; to your .page-controls-container-outer class
Change this
<div style="display: table-row; height: 0;">
to this
<div style="display: table-row; height: 0; float:left;">
Am using Ninja Forms on a WP website. There are 2 different fields (textbox & submit button) that are separate DIVs, both children of single DIV.
They appear on consecutive lines and I cannot seem to get the on same line. Help?
Can see current code of the DIVs on the site: http://theroadmap.co/generation/
<div id="ninja_forms_form_2_all_fields_wrap" class="ninja-forms-all-fields-wrap">
<div class="field-wrap text-wrap label-above ninjacomment-wrap" id="ninja_forms_field_9_div_wrap" data-visible="1">
<input type="hidden" id="ninja_forms_field_9_type" value="text">
<label for="ninja_forms_field_9" id="ninja_forms_field_9_label" class=""> </label>
<input id="ninja_forms_field_9" data-mask="" name="ninja_forms_field_9" type="text" class="ninja-forms-field ninjacomment " value="" rel="9">
<div id="ninja_forms_field_9_error" style="display:none;" class="ninja-forms-field-error">
</div>
</div>
<div class="field-wrap submit-wrap label-left ninjasubmit-wrap" id="ninja_forms_field_10_div_wrap" data-visible="1">
<input type="hidden" id="ninja_forms_field_10_type" value="submit">
<input type="submit" name="_ninja_forms_field_10" class="ninja-forms-field ninjasubmit" id="ninja_forms_field_10" value="Suggest a link!" rel="10">
<div id="ninja_forms_field_10_error" style="display:none;" class="ninja-forms-field-error">
</div>
</div>
</div>
Modifications I've added so far:
/* Ninja Form mods */
.ninjacomment {
background: #ffbf00 !important;
border: 3px;
color: black !important;
width: 50%;
}
#ninja_forms_field_9 {
margin-left: 0;
width: 30%;
float: left;
position: inline-block;
}
#ninja_forms_field_10 {
margin-left: 0;
float: right;
position: inline-block;
}
.ninja-forms-all-fields-wrap {
overflow: hidden;
}
Thanks!
You can get elements on the same line several ways.
Sample markup:
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
inline-block
.child {
display: inline-block;
width: 40%; /* adjust */
}
Floats
.child {
float: left; /* or right */
width: 40%; /*adjust */
}
display: table
.parent {
display: table;
width: 100%;
}
.child {
display: table-cell;
width: 40%; /* adjust */
}
white-space: nowrap
.parent {
white-space: nowrap /* children will stay on the same line no matter how wide */
}
<div id="wrapper">
<div id="left">
<input id="ninja_forms_field_9" data-mask="" name="ninja_forms_field_9" type="text" class="ninja-forms-field ninjacomment " value="" rel="9"></input>
</div>
<div id="right">
<input type="submit" name="_ninja_forms_field_10" class="ninja-forms-field ninjasubmit" id="ninja_forms_field_10" value="Suggest a link!" rel="10"></input>
</div>
CSS
#wrapper {
width:300px;
}
#left {
float:left;
width:146px;
}
#right {
float:right;
width:148px;
}
Working Fiddle