So I'm currently implementing some flip animation on a few elements within my project.
I have achieved the animation via CSS and ontouchstart attribute with hover. However, the backface of the card or element is never shown. But when I created the following JSFiddle: https://jsfiddle.net/pueg0uxm/
This is the effect I'm trying complete but this code isn't working within my project for some reason.
The only other classes I have that might be effecting it is the following;
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="child" style="animation-delay: 6.5s;">
<div class="front" ng-style={'backgroundimage':'url(/assets/02_BRANDING.jpg)'}">
<h1 class="feature-text">RETAIL<br/>DESIGN</h1>
</div>
<div class="back">
<div>
<h1 >Portland...</h1>
</div>
</div>
</div>
</div>
</div>
.child {
-ms-flex-positive: 1;
flex-grow: 1;
height: 50%;
width: 25%;
max-width: calc(100% * (1/4));
margin: 0;
position: relative;
-ms-flex-flow: nowrap row;
flex-flow: nowrap row;
}
Here is a gif of what is happening compared to the JSFiddle with the same code;
As you can see the backface is still visible and not the code which is within the back class and div.
Related
There are some questions around this topic but most of them are a few years old.
I am just wondering if there's a way to layout your page, such that the scrollwheel will scroll a specific div regardless of where the mousewheel is.
For example, on stackoverflow if you scroll down the homepage you will see the left hand menu stays fixed, and you can scroll it while the mouse is hovering over the menu, even when the mouse is hovering over the title bar. It may however be using javascript, I don't know.
Before I delve into the javascript solutions I wondered if CSS has enabled this, perhaps with a default div or some other CSS technique.
Here's a fiddle of my layout: https://jsfiddle.net/thjyf5c3/
<body style="display: flex; flex-direction: column; height:100vh; overflow-y: hidden">
HEADER FOR THE PAGE
<div style="flex-flow: column; display:flex;flex:1">
<div style="flex: 1; display:flex;">
<div style="background-color: red; max-width: 200px; min-width: 100px; flex-basis: 20%">test</div>
<div style="background-color: purple;flex: 1; display: flex">
<div style="flex-grow:1; position: relative; overflow:hidden; ">
<div style="position:absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: scroll">
<div style="flex: 1; display:flex;">
<span style="font-size:500px">a<br />b<br />c<br /> </span>
</div>
</div>
</div>
</div>
<div style="background-color: blue;flex: 1">test</div>
</div>
</div>
As you can see it does not scroll if the mouse isn't in the bounds of the grid.
UPDATE:
I made a fiddle for testing.
An illustration of what I'd like to achieve: (Rows and columns are Bootstrap 4 rows and columns.)
The page should only have scrollbars if the second row is already
"fully compressed" (0 height) and still the header + first row +
footer can't fit in the viewport.
The second row doesn't have to fill
in all remaining pale green place. It's height can be flexible.
Flexbox? Max-width? Overflow... How should I start? What could be a good solution?
HTML:
<div class="page">
<div class="header">
...<br>...
</div>
<div class="main">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-header"> .... </div>
<div class="card-body"> .... </div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-header"> .... </div>
<div class="card-body"> .... </div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-header"> .... </div>
<div class="card-body scrollable"> THIS <br> SHOULD <br> BE <br> THE <br> SCROLLABLE <br> CONTENT </div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
...
</div>
</div>
CSS:
div.page {
background-color: palegreen;
display: flex;
flex-direction: column;
min-height: 100vh;
max-height: 100vh;
}
div.header,
div.footer {
background-color: grey;
padding: 0.5em;
}
div.main {
display: flex;
flex-grow: 1;
}
div.row {
margin-top: 1em;
}
div.scrollable {
/* ??? */
}
The key is how you calculate the height for the <main> and usage of flex, esp. flex-grow, flex-shrink.
<header>, <main> and <footer>
The second row doesn't have to fill in all remaining pale green place. It's height can be flexible.
So I assume you want the <header> and <footer> always stay on top and bottom. Instead of regular absolute positioning approach, I want to explicitly set the heights for them, as well as for <main>.
HTML
<header>header</header>
<main class="container-fluid"></main>
<footer>footer</footer>
SCSS
$custom-header-height: 3rem;
$custom-footer-height: 2rem;
header, footer {
background-color: var(--gray);
// In order to position the text to the center, like your picture
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
header {
height: $custom-header-height;
}
footer {
height: $custom-footer-height;
}
main {
// Calculate the height for main, which is 100% viewport height -
// height of header - height of footer
height: calc(100vh - #{$custom-header-height} - #{$custom-footer-height});
background-color: var(--teal);
}
Result
This gives you the playground you can build stuff on.
First Row
The first row is free to expand as high as its contents, but you don't want it to take up any free space. That's why you set flex-grow: 0;. Also when you resize the window and the space for first row is shrinking, you don't want the cards go over the row. That's why you set flex-shrink: 0;. We might as well use the shortcut flex: 0 0 auto; for those 2.
But in order to set that, the first row (as well as the second row) needs to be flexbox children. So we set display:flex; on its parent - <main>.
HTML
<header>header</header>
<main class="container-fluid">
<div class="row first-row">
<div class="col-6">
<div class="card">...</div>
</div>
<div class="col-6">
<div class="card">...</div>
</div>
</div>
</main>
<footer>footer</footer>
SCSS (In addition)
main {
display: flex;
flex-flow: column nowrap;
}
.first-row {
// I purposely make first row's background yellow so that you can see it
background-color: var(--yellow);
flex: 0 0 auto;
}
Result
Second Row
The key here is to make the <card> not to grow when there is space, but shrink on limited space, which is the default of flexbox children: flex: 0 1 auto;
But again, in order to use that, its parent needs to display: flex;. Here the parent is col-6 since we want to use bootstrap grid system.
HTML
<header>header</header>
<main class="container-fluid">
<div class="row first-row">
<div class="col-6">
<div class="card">...</div>
</div>
<div class="col-6">
<div class="card">...</div>
</div>
</div>
<div class="row second-row">
<div class="col-6">
<div class="card">
...
...
...
</div>
</div>
</div>
</main>
<footer>footer</footer>
SCSS (In addition)
.second-row {
// I purposely make second row's background to be blue so that you can see it
background-color: var(--blue);
// Any column, class name starts as "col-"
[class*="col-"] {
display: flex;
flex-flow: column nowrap;
// So that when the second row is compressed to 0, it doesn't show
// the row completely.
min-height: 0;
.card {
// flex-grow: 0;
// flex-shrink: 1;
// Might as well just set it
// flex: 0 1 auto;
// But this is the default of flexbox children so we don't need to set
// it here.
.card-body {
overflow-y: auto;
}
}
}
}
Result
The second row doesn't have to fill in all remaining pale green place. It's height can be flexible.
An illustration of what I'd like to achieve
The page should only have scrollbars if the second row is already "fully compressed" (0 height) and still the header + first row + footer can't fit in the viewport
Notes
There is still a funkiness when the second row is fully compressed. The scrollbar is still hanging there and I don't know how to get rid of it.
The code can be simplified a little bit without usage of bootstrap grid system.
Demo
https://codepen.io/anon/pen/XBqyxZ
Sorry for this lengthy post. If you want to know more about flexbox, here is a great guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would but a set the height (or max-height if you prefer) on the card and then set overflow to scroll.
<html>
<div class="box">
<div class="content">
Dispassionate extraterrestrial observer citizens of distant epochs
permanence of the stars billions upon billions vastness is bearable only
through love brain is the seed of intelligence.
</div>
</div>
</html>
<style>
.box {
width: 500px;
overflow: scroll;
}
</style>
I'm looking to learn how I can position images in CSS, multiple ones, without affecting my footers position, size, etc.
I coded some CSS I thought would work, but it messed up my footers position. (It wouldn't stay at the bottom.)
So, I fixed that issue but found the code I wrote for the image position messed with the footers position.
I don't really know how, but I would like to have my images positioned, perhaps by px/space.. they just need to look good in a row spaced.
The example is in red, is how I want it to look.
look here for an example of how I want it to look.
HTML
<div class="batesimg">
<p><strong>Bates</p></strong>
<div class="shadow"> <!-- makes a shadow, surrounding the characters picture. -->
<img src="images/bates.png" alt="Bates" width="150" height="150"> <!-- defines the img -->
CSS
/* Bates profile picture. */
.batesimg { /* or whatever class name works for you */
position: auto;
left:250px;
top:250px;
margin-right: 500px;
}
NOTE, the css above isn't positioning the image how i want it, showed in the image example, can someone help me positiong the image like i have it in my example image?
Thanks!
You want to repeat same type of pattern of name,img and descriptions. We will call this 'card'. Now you have two problems in hand.
1) Placing multiple cards in page. For this use some layout like flexbox.
2) Setting inside of card properly..
/*1st Problem*/
#flex-container{
display: flex;
flex-wrap:wrap;
width: 600px;
justify-content: space-around;
}
#flex-container>div.card{
flex-grow:0;
flex-shrink:0;
}
/*1st Problem ends*/
/*2nd Problem*/
.card{
width: 200px;
height:calc(200px + 2em);
}
.card>.name ,.card>.desc{
width: 100%;
text-align: center;
}
.card>div.img{
position: relative;
margin-left: 25px;
width: 150px;
height: 150px;
border-radius: 100%;
}
/*2nd Problem ends*/
.card:nth-child(1) div.img{background-color: red;}
.card:nth-child(2) div.img{background-color: green;}
.card:nth-child(3) div.img{background-color: blue;}
.card:nth-child(4) div.img{background-color: yellow;}
/*Centering Content*/
#flex-container{
margin: 0 auto;
/*top,bottom both zero.. and left,right both auto..
handling margin is complicated..read about them
*/
}
<div id="flex-container">
<div class="card">
<div class="name">Name1</div>
<div class="img"></div>
<div class="desc">Desc1</div>
</div>
<div class="card">
<div class="name">Name2</div>
<div class="img"></div>
<div class="desc">Desc2</div>
</div>
<div class="card">
<div class="name">Name3</div>
<div class="img"></div>
<div class="desc">Desc3</div>
</div>
<div class="card">
<div class="name">Name4</div>
<div class="img"></div>
<div class="desc">Desc4</div>
</div>
</div>
For any other problem visit Flexbox
I am trying to split my webpage into two vertical columns which can be clicked on to take you to the right pages. I've gotten this far.
HTML
<!-- Choices -->
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xs-12 vertical-center webd">
<h1 class="text-muted text-center">Web Design</h1>
</div>
<div class="col-md-6 col-xs-12 vertical-center circ">
<h1 class="text-muted text-center">Circus</h1>
</div>
</div>
</div>
CSS
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
.webd {
background-image: url('webd.jpg');
}
.circ {
background-image: url(circ.JPG);
}
My issue is, no matter where I put the text-center class. My <h1>s stay left aligned on the page. Can anybody help?
It is because you have added display flex to the parent container. This means the children are not full width anymore.
If you add the following style, it will fix your error:
.vertical-center > .text-center
{
flex-grow: 1;
}
Example bootply
If you don't want to grow the children, you can just add the following to your vertical center: justify-content: center;
Example bootply 2
I noticed a weird bug in all the major browsers when you use a percentage width on an element in a nested flexbox with its justify-content property set to "flex-end". It renders the parent element as if the child were set to 100% width regardless of the percentage actually used by the child.
I have created a Fiddle to demonstrate the issue: https://jsfiddle.net/u21pe916/
HTML
<div class="wrapper">
<div class="flex-col-1">Column 1</div>
<div class="flex-col-2">
<div class="nested-col-1" id="percent-width">Nested Column 1</div>
<div class="nested-col-2">Nested Column 2</div>
</div>
</div>
<div class="wrapper">
<div class="flex-col-1">Column 1</div>
<div class="flex-col-2">
<div class="nested-col-1" id="unit-width">Nested Column 1</div>
<div class="nested-col-2">Nested Column 2</div>
</div>
</div>
CSS
.wrapper {
display: flex;
justify-content: flex-end;
}
.flex-col-2 {
display: flex;
justify-content: flex-end;
}
.nested-col-1 {
/* Overflow is for display purposes. It does not affect the bug. */
overflow: hidden;
}
#percent-width {
width: 0%;
}
#unit-width {
width: 0px;
}
Screenshot
Is there a fix/work-around so that percentage values can be used without creating the extra space?