I'm creating a popup which presents the user with choices they've made and allows them to copy to clipboard or cancel. This isn't an actual form (text won't be editable at this point), but the idea is that it should resemble a filled-out typewritten form.
I'm using Flexbox rows for compactness. I would like the horizontal rules (see red) to expand to fill available space, to create the look of an actual form, one where the length of the inputs isn't known.
body em {
font-family: 'Brygada 1918';
font-size: 90%;
}
#border_box {
border: 6px double black;
padding: 12pt;
}
#id_card {
justify-content: center;
width: 540px;
background: url(https://bladesnpc.com/bitd-images/paper_texture.png) rgba(244, 241, 230, 1);
padding: 12pt;
font-family: Courier;
box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.4), inset -1px -1px 1px rgba(0, 0, 0, 0.6);
}
.formfill {
display: inline-block;
border-bottom: 1px solid black;
width: auto;
margin-bottom: 1em;
}
.attributes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.flexbreak {
width: 100%;
}
<div id="id_card">
<div id="border_box">
<div id="chosen_name">
<h3>John Doe</h3>
</div>
<div class="attributes">
<div>
<em>Heritage: </em>
<div class="formfill">heritageval</div>
</div>
<div>
<em>Looks: </em>
<div class="formfill">looksval</div>
</div>
<div>
<em>Style: </em>
<div class="formfill">styleval</div>
</div>
<div>
<em>Profession: </em>
<div class="formfill">profval</div>
</div>
<div>
<em>Trait: </em>
<div class="formfill">traitval</div>
</div>
<div>
<em>Goals: </em>
<div class="formfill">goalsval</div>
</div>
<div>
<em>Interests: </em>
<div class="formfill">interestsval</div>
</div>
<div>
<em>Mayhem: </em>
<div class="formfill">mayhemval</div>
</div>
</div>
<hr class="hr_bottom" style="margin-top: 1em;">
<div class="flexbreak"><span>COPY</span> <span>CANCEL</span></div>
</div>
</div>
Is there any way to achieve this while still using flex?
You can update your code like below (check the comments)
body em {
font-family: 'Brygada 1918';
font-size: 90%;
}
#border_box {
border: 6px double black;
padding: 12pt;
}
#id_card {
justify-content: center;
width: 540px;
background: url(https://bladesnpc.com/bitd-images/paper_texture.png) rgba(244, 241, 230, 1);
padding: 12pt;
font-family: Courier;
box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.4), inset -1px -1px 1px rgba(0, 0, 0, 0.6);
}
.formfill {
display: inline-block;
border-bottom: 1px solid black;
width: auto;
margin-bottom: 1em;
}
.attributes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
/* make all the element fill the remaining space except for 3,6 and 8 */
.attributes > *:not(:nth-child(3),:nth-child(6),:nth-child(8)) {
flex-grow:1;
}
/* make the flex container */
.attributes > * {
display:flex;
}
/* the formfill will fill all the space and will stretch the line*/
.attributes > * .formfill {
flex-grow:1;
margin-left:5px;
}
.flexbreak {
width: 100%;
}
<div id="id_card">
<div id="border_box">
<div id="chosen_name">
<h3>John Doe</h3>
</div>
<div class="attributes">
<div>
<em>Heritage: </em>
<div class="formfill">heritageval</div>
</div>
<div>
<em>Looks: </em>
<div class="formfill">looksval</div>
</div>
<div>
<em>Style: </em>
<div class="formfill">styleval</div>
</div>
<div>
<em>Profession: </em>
<div class="formfill">profval</div>
</div>
<div>
<em>Trait: </em>
<div class="formfill">traitval</div>
</div>
<div>
<em>Goals: </em>
<div class="formfill">goalsval</div>
</div>
<div>
<em>Interests: </em>
<div class="formfill">interestsval</div>
</div>
<div>
<em>Mayhem: </em>
<div class="formfill">mayhemval</div>
</div>
</div>
<hr class="hr_bottom" style="margin-top: 1em;">
<div class="flexbreak"><span>COPY</span> <span>CANCEL</span></div>
</div>
</div>
update your css code with this changes:
// add this code:
.attributes > div {
display: flex;
flex: 1;
}
.
.
.
.formfill {
display: inline-block;
border-bottom: 1px solid black;
width: 100%; // edited from auto to 100%
margin-bottom: 1em;
}
I hope this answer help you, good luck.
Related
I have an HTML structure with many divs next to each other or below each other that all have an outline. The problem is, these outlines do not overlap, but are shown next to each other (or on top of each other). To illustrate, this is what happens:
This is my code, with added nth-child() selectors to clearly show the issue:
.wrapper {
/* getting rid of the 'inline-block whitespace' */
font-size: 0;
white-space: nowrap;
}
.cell {
display: inline-block;
font-size: 2rem;
padding: 2px;
width: 100px;
}
.cell:nth-child(even) {
outline: 6px solid blue;
}
.cell:nth-child(odd) {
outline: 6px solid red;
}
<div class="wrapper">
<div>
<div class="cell">
one
</div>
<div class="cell">
two
</div>
</div>
<div>
<div class="cell">
three
</div>
<div class="cell">
four
</div>
</div>
</div>
My question is: How to make these outlines overlap so no 'doubles' are shown?
Update: using half the margin of the width of the outline on the cells does not always work when the outline width is 1px. For example, when the padding of .cell is 4px this is the result (when you zoom in you will see the two lines).
Update2: it seems this is a bug with Firefox on a 4k display. Running this in Firefox on a display with a HD resolution or in another browser (tested Chrome) works.
apply a margin equal to half the outline:
.wrapper {
/* getting rid of the 'inline-block whitespace' */
font-size: 0;
white-space: nowrap;
}
.cell {
display: inline-block;
font-size: 2rem;
padding: 2px;
width: 100px;
margin: 3px; /* added */
}
.cell:nth-child(even) {
outline: 6px solid blue;
}
.cell:nth-child(odd) {
outline: 6px solid red;
}
<div class="wrapper">
<div>
<div class="cell">
one
</div>
<div class="cell">
two
</div>
</div>
<div>
<div class="cell">
three
</div>
<div class="cell">
four
</div>
</div>
</div>
Or use margin on one side:
.wrapper {
/* getting rid of the 'inline-block whitespace' */
font-size: 0;
white-space: nowrap;
}
.cell {
display: inline-block;
font-size: 2rem;
padding: 2px;
width: 100px;
margin:0 6px 6px 0; /* added */
}
.cell:nth-child(even) {
outline: 6px solid blue;
}
.cell:nth-child(odd) {
outline: 6px solid red;
}
<div class="wrapper">
<div>
<div class="cell">
one
</div>
<div class="cell">
two
</div>
</div>
<div>
<div class="cell">
three
</div>
<div class="cell">
four
</div>
</div>
</div>
Update: I think there is no easy solution to this if I have to use flexbox. I'll just use "flex-shrink: 0" and use media queries to adjust the design. Anyway, thanks for your help.
I have got a horizontal list (display: flex) with multiple elements. When I reduce the window size the list elements start to shrink. Unfortunately, the width of the elements nearly stays the same. The li-elements take up too much space. I want the li-element's size to fit the content. If I add "flex-shrink: 0" to the li-element the width is right, but I need this word-wrap.
How to fix this?
With flex-shrink: 0
With flex-shrink: 1
#categories ul {
border-top: 1px solid lightgrey;
display: flex;
margin: 0 0 -1px 0;
padding: 7px 0 0 0;
}
#categories li {
padding: 0 0 7px 0;
margin-right: 15px;
list-style-type: none;
}
<nav id="categories">
<ul>
<li><a href="#">
Thanks & regards,
Mark
Remember that the flex-shrink property sets the flex-shrink of a flex container item. So the items will shrink to fit the container if they are larger than the container's size. In your case, I think that setting flex-shrink to 2 would make the word-wrap as you requested. Check this code snippet. I hope it helps!
function myFunction(val) {
document.getElementById("example-element").style.flexShrink = val;
}
* {
font-family: arial;
}
.buttons-section {
display: flex;
justify-content: space-evenly;
width: 70%;
}
.example-container {
background-color: #eee;
border: .2em solid;
padding: .75em;
border-radius: 10px;
width: 70%;
margin-left: 20px;
max-height: 300px;
display: flex;
}
.example-container>div {
margin: 10px;
}
.first-solution>div {
background-color: rgba(0, 255, 0, 0.2);
border: 3px solid green;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;
}
p {
margin-left: 20px;
}
small {}
.second-solution {
flex: 1 1 0;
justify-content: space-evenly;
}
.second-solution>div {
background-color: rgba(255, 0, 0, 0.2);
border: 3px solid red;
text-align: center;
}
.third-solution {
flex-wrap: wrap;
}
.third-solution>div {
background-color: rgba(0, 0, 255, 0.2);
border: 3px solid blue;
flex-basis: 100px;
text-align: center;
}
<section class="buttons-section">
<div>
<pre><code>flex-shrink: 0;</code></pre>
<button type="button" onclick="myFunction(0)" aria-hidden="true">Apply
</button>
</div>
<div>
<pre><code>flex-shrink: 1;</code></pre>
<button type="button" onclick="myFunction(1)" aria-hidden="true">Apply
</button>
</div>
<div>
<pre><code>flex-shrink: 2;</code></pre>
<button type="button" onclick="myFunction(2)" aria-hidden="true">Apply
</button>
</div>
</section>
<br>
<div>
<section>
<div class="example-container first-solution">
<div id="example-element">I shrink</div>
<div id="example-element">Item Two</div>
<div id="example-element">Item Three</div>
</div>
</section>
</div>
<p>Added more examples after the first comment. Feel free to resize the screen to see the behaviour😉</p>
<p>All elements same size, container with flex: 1 1 0;<br>
<small>Added <b>justify-content: space-evenly;</b> which helps to distribute the extra free space </small>
</p>
<div>
<section>
<div class="example-container second-solution">
<div>Item one</div>
<div>Item Two</div>
<div>Item Three</div>
</div>
</section>
</div>
<p>Suggestion: using flex-wrap: wrap; on the container so the items will always fit the container</p>
<div>
<section>
<div class="example-container third-solution">
<div>Item one</div>
<div>Item Two</div>
<div>Item Three</div>
</div>
</section>
</div>
Can you paste your code here so we can see more info about your problem. Also did you try with flex-grow property?
Need tabs to shrink while the main container doesn't fit all items by width.
Here is expected behavior:
http://adamschwartz.co/chrome-tabs/
But could it be done on pure css, flexbox may be?
Solution was pretty simple. Just display: flex; for container, and overflow: hidden; for tab items.
Don't know why my question was downvoted. :(
html {
font-family: sans-serif;
}
.container {
display: flex;
border: 1px solid silver;
padding: 10px 10px 0;
width: 400px;
margin: 0 auto 10px;
}
.tab {
overflow: hidden;
text-overflow: ellipsis;
height: 20px;
border: 1px solid silver;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
padding: 10px;
margin-right: 8px;
border-bottom: none;
}
.tab:last-child {
margin-right: 0;
}
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
</div>
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
<div class="tab">Chrome</div>
<div class="tab">Flexbox</div>
</div>
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
<div class="tab">Chrome</div>
<div class="tab">Flexbox</div>
<div class="tab">Stackoverflow</div>
</div>
There is a usual flexbox with the elements:
.flexbox {
display: flex;
border: 2px solid red;
padding: 2.5px;
}
.flexbox__item {
border: 2px solid blue;
height: 50px;
margin: 2.5px;
flex-grow: 1;
}
<div class="flexbox">
<div class="flexbox__item"></div>
<div class="flexbox__item offset-1"></div>
<div class="flexbox__item"></div>
</div>
How to insert an empty cell in this flexbox after .offset-* without using additional markup and after with before?
Those. It is necessary that it come out like this, but without specifying the width of the blocks. Only flex-grow
.flexbox {
display: flex;
border: 2px solid red;
padding: 2.5px;
}
.flexbox__item {
border: 2px solid blue;
height: 50px;
margin: 2.5px;
width: 25%;
}
.offset-1 {
margin-right: calc(25% + 5px);
}
<div class="flexbox">
<div class="flexbox__item"></div>
<div class="flexbox__item offset-1"></div>
<div class="flexbox__item"></div>
</div>
The number of cells is unknown. Offset-1 means that you need to make an empty one cell,offset-2 means two cell, and so on.
It is possible with additional wrappers - the wrappers will grow, and the cell elements inside the growing wrappers will occupy 1/2, 1/3, etc. of the width of the wrappers.
.flexbox {
display: flex;
border: 2px solid red;
padding: 3px;
}
.flexbox__item {
margin: 3px;
flex-grow: 1;
}
.flexbox__item-inner {
border: 2px solid blue;
height: 50px;
}
.offset-1 {
flex-grow: 2;
}
.offset-1 .flexbox__item-inner {
width: 50%;
}
.offset-2 {
flex-grow: 3;
}
.offset-2 .flexbox__item-inner {
width: 33.33%;
}
<div class="flexbox">
<div class="flexbox__item">
<div class="flexbox__item-inner"></div>
</div>
<div class="flexbox__item offset-1">
<div class="flexbox__item-inner"></div>
</div>
<div class="flexbox__item">
<div class="flexbox__item-inner"></div>
</div>
</div>
<div class="flexbox">
<div class="flexbox__item">
<div class="flexbox__item-inner"></div>
</div>
<div class="flexbox__item offset-2">
<div class="flexbox__item-inner"></div>
</div>
<div class="flexbox__item">
<div class="flexbox__item-inner"></div>
</div>
</div>
Trying to center a bootstrap row and it's contents inside a div. The code is below:
HTML:
<div class="horizontal-layout">
<div class="row">
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_coversheet_blue.png" style="height:100px; width:100px; cursor:pointer;">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_onepager_pink.png" style="height:100px; width:100px;cursor:pointer ">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_user_profile_green.png" style="height:100px;width:100px;cursor:pointer ">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_create_packet.png" style="height:100px; width:100px;cursor:pointer">
<h4>View</h4>
</div>
</div>
</div>
CSS:
.horizontal-layout {
/*background-color: blue;*/
min-height: 700px;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
padding: 30px;
}
.packet-icon {
text-align: center;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
min-height: 140px;
min-width: 140px;
}
RESULT:
But When I go and make changes to parent div(horizontal-layout) be displayed flex and the child div to align-middle, my width of row changes.
After Css Change:
.horizontal-layout {
/*background-color: blue;*/
min-height: 700px;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
padding: 30px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.horizontal-layout > div {
display: inline-block;
vertical-align: middle;
}
OUTPUT:
Can anyone fix the row with issue?
By default, div was display: block, so that the width was automatically 100%.
Specifying .horizontal-layout > div to display: inline-block changed that behavior, so if you want to keep that, you have to set width manually:
.horizontal-layout > div {
...
width: 100%;
}