I am trying to make a flip card on my site but everytime I make the elements they default to a height of 2 or 1 px. I believe it has something to do with making the position of a couple of the elements absolute, but that is the only way I've seen to do this without messing up the layout of my page. I'm using Bootstrap CSS and some custom CSS and JS Here is my code:
HTML:
<div class="scene col-md-4 d-inline-block h-50">
<div class="card">
<div class="face front">
<img src="images/pawprints_edit.png" width="300" height="180" alt="sign up for al-van newsletter" id="news-img" class="d-inline-block col-md-12 img-fluid h-50" />
</div>
<div class="face back">
<form action="form-to-email.php" method="post" name="mail-form" class="mail-form">
<label for="name">Name:</label><br/>
<input type="text" name="name" placeholder="John Doe" required width="25"><br/>
<label for="email">Email Address:</label><br/>
<input type="text" name="email" placeholder="yourname#domain.com" required width="50">
<label for="message">Please type your message:</label><br/>
<textarea name="message" id="message" cols="30" rows="4">Please sign me up for the Paw Prints Newsletter.</textarea><br/>
<input type="button" value="Submit">
</form>
</div>
</div>
</div>
The CSS:
/* form animation */
.scene {
width: 33.3333333%;
height: 300px;
perspective: 1000px;
}
.card {
width: 100%;
height: 100%;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
.face {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
}
.front {
background: #98b98a;
}
.back {
background: #4c87a9;
transform: rotateY(180deg);
}
.card.is-flipped {
transform: rotateY(180deg);
}
/* End animation */
Any help would be appreciated. Perhaps there is a workaround? It displays correctly and the animation works in a way if I remove "position: absolute" but that section is introduced into the flow of the page and the layout doesn't work the way I want it to.
I set a hover on your card and it appears to work.
.card:hover {
transform: rotateY(180deg);
}
The solution ended up being to apply !important to the height property and it was recognized before whatever bootstrap property was forcing the absolute elements to be only 2px in height.
Related
I'm trying to create a login page like this:
What I created so far looks like this:
With this code:
<div class="control-section" style="max-width: 100% !important;">
<div class="row" style="height:100%;">
<div class="col-md-4" style="height: 100% !important; padding-top: 25px !important;">
<section>
<form id="account" method="post">
<h4>LOGIN </h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
#Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Log in</button>
</div>
<div class="form-group">
<p>
<a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="#Model.ReturnUrl">Register as a new user</a>
</p>
<p>
<a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
</p>
</div>
</form>
</section>
</div>
<div class="col-md-8" style="max-width: 100% !important; height: 100% !important;">
<img src="~/Resources/placeholderimage.png" />
</div>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
<style>
.container {
max-width: 100% !important;
height: 100% !important;
}
.col-md-4 {
height: 100%;
display: table-row;
}
.col-md-8 {
height: 100%;
display: table-row;
}
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
</style>
As u can see theres an empty white space at the bottom of the page even though I resized my image to huge dimensions, somehow it does not fit to the 100% of my page. How can I set the static height of 100% to my image? Hope someone can help.
Thanks
You can use 100vh instead of 100% on your img or col-md-8.
Possibly the image does not stretch the full width of col-md-8 in which case you can:
img {
width: 100%;
height: 100%;
object-fit: cover; /* cover makes the image stretch the width and height of the container */
}
And you can also make sure the col-md-8 takes up 100% of the height like this.
col-md-8 {
max-width: 100%;
height: 100vh;
}
Add CSS Media Query to change image fit on screens below 993px
#media and screen(max-width: 992px {
img{
object-fit: contain;
}
}
Although I would advise against it, if you must change the height of the element without changing the size of the parent, you should probably set the height: 100vh
Obviously since the viewport height is not calculated properly or as expected on mobile you should probably try to calculate the height of the window.innerHeight on window.addEventListener('load') and on window.addEventListener('resize') using something like this:
const vh = window.innerHeight * 0.01
document.documentElement.style.setProperty('--vh', `${vh}px`)
window.addEventListener('resize', () => {
const vh = window.innerHeight * 0.01
document.documentElement.style.setProperty('--vh', `${vh}px`)
})
Then applying it to your element as so: height: calc(var(--vh, 100vh) * 100)
Obviously a simpler solution would be using height: 100% and you would avoid any possible overflow.
Try this:-
Remove height from row and columns and give this class in row m-0
<div class="col-md-8" !important;">
<class ="bk-one-more-div"style="width: 100%!important; height: 500px>
<img src="~/Resources/placeholderimage.png" class="img-fluid w-
100">
<div/>
</div>
I have an image in the background, which is behind my form. As a result it won't let me place the cursor inside the text field.
https://jsfiddle.net/RE006/4rat11xc/1/
HTML:
<div id = "navButton">☰ Menu</div>
<div class="topnav" id="topNav">
×
<a href=#>Home</a>
Drinks
Food Menu
Contact
</div>
<div>
<header>
<h1>Header</h1>
</header>
<div class= "container">
<main>
<div id="cup"></div>
<form action="registration.html" method="get" name="registration_form" id="registration_form">
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name">
<span>*</span><br>
</form>
</main>
<!-- end .container --></div>
</div><!--end of pushDown id-->
</body>
CSS:
label, input, select {
margin: 10px 0px;
z-index: 9997;
}
/* cup image background */
#cup {
background-image: url(images/cup.png);
background-repeat: no-repeat;
background-size: contain;
content:'';
filter: alpha(opacity=5); /* For IE8 and earlier */
height: 400px;
left: 20%;
opacity: 0.5;
position: absolute;
top: 100px;
width: 200px;
}
https://jsfiddle.net/RE006/4rat11xc/
You can resolve this specific issue in two ways:
#cup { z-index: -1; }
/* or */
#registration_form { position: relative; }
The reason this is happening is because the form is still position: static. Elements with position static are unaffected by positioning properties like top and z-index, so the other elements on the page that are not static are basically on a different "plan of existence" (there's probably a better technical term for this).
Changing #cup to be explicitly in the back will fix this. When you change the form to to relative, it moves into the same "plane of existence" as the non-static elements and therefore is stacked according to its position in the DOM (on top of #cup).
I have a web page that emulates a wizard. After the user leaves the second step to go to the third step, I'm "flipping" the panel like a card. You can see it in action in this Bootply. The code looks like this:
<div class="container-fluid" style="background-color:#eee;">
<div class="container">
<div class="flip-container" style="width:200px;">
<div class="flipper">
<div class="front">
<div class="step-2-default" id="step2" style="overflow-x:hidden; padding:0.0rem 1.0rem;">
<label>Step 2</label>
<p>These are the details of the second step</p>
<button id="nextButton2">next</button>
</div>
<div class="step-1-default" id="step1">
<label>Step 1</label>
<p>These are the details of the first step</p>
<button id="nextButton1">next</button>
</div>
</div>
<div class="back">
<div id="step3">
<label>Step 3</label>
<p>Thank you for using this wizard</p>
</div>
</div>
</div>
</div>
</div>
</div>
If you load the Bootply, you'll notice that the step is visible from steps 1 and 2. From my understanding, the issue is the height:auto property. I'm using this because the size of the content for each of the steps in my wizard is dynamic.
It works fine in Chrome. But, I can't figure out how to make it work in iOS / Safari. Any help is appreciated.
You're missing a webkit-specific backface-visibility:
.front, .back {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
http://www.bootply.com/RiX9HF5t21
That works for me in Safari (tested), just change the background-color:transparent; to background-color: #fff; for classes .step-1-default, .step-2-default and add:
.flip-container.flip .front {
display: none;
}
To prevent the other side from being visible in Safari & iOS, set the background color on the front and back classes:
.front, .back {
width: 100%;
height: auto;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
background-color: #FFF;
}
I can't seem to figure this out.
I want to have a system whereby an image will change to another image upon hover over.
In my html I have:
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"<img src="image/black.png"></p>
</div>
And then in my css:
.linkyimage{
position: relative;
height: 250px;
width:250px:
}
.hovvery{
position: absolute;
height: 250px;
width:250px:
visibility: hidden;
opacity: 0;
}
.linkyimage:hover .hovvery {
visibility: visible;
opacity:1;
}
Yet nothing seems to happen for me. Where am I going wrong?
edit:
Still can't seem to get any effect.....
.linkyimage{
position: relative;
height: 250px;
width:250px;
}
.hovvery{
position: absolute;
height: 250px;
width:250px;
visibility: hidden;
opacity: 0;
}
.linkyimage:hover .hovvery{
visibility: visible;
opacity:1;
}
and html:
<div id="content">
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"<img src="image/black.png" /></p>
</div>
<img src="image/yellow.png">
<img src="image/lblue.png">
<img src="image/green.png">
<img src="image/brown.png">
<div class"linkyimage">
<img src="image/dblue.png" alt"blue" />
<p class="hovvery"<img src="image/black.png" /></p>
</div>
</div>
I'm going for sort of a gallery of images, which on mouse over change to the black image- in the futuer I will make it so a description of the image appears over it but for now trying to get the basics going!
Working FIDDLE Demo
You didn't close p in this line:
<p class="hovvery"<img src="image/black.png"></p>
Correct code:
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"><img src="image/black.png" /></p>
</div>
Also you have syntax error in your CSS here:
width:250px: /* it must be semicolon ; at the end */
Change it to this:
width: 250px;
I have the following html:
<div id="holder">
<span>Search for</span>
<input id="srchfor" />
<span>near</span>
<input id="srchin" />
<span>submit</span>
</div>
The containing div is fixed width. The width of the 3 spans will depend on font size. Is it possible to make the two inputs take a width so that they are both equally sized, and they consume all the remaining space in holder? Or does this require using javascript?
Edit: My aim is to have the 5 elements all on one line, rather than split over several lines.
This is an old post but I came across it and figured I would answer it for the next person. Here is a CSS/HTML snippet that should resolve this issue. It is kind of like a HTML5 flexbox but without HTML5 or a flexbox. You can add width to whatever 2 sections needed and the third will fill the remaining void.
<style type="text/css">
.form-group {
border: 1px solid black;
margin-bottom: 20px;
padding: 10px;
width: 75%;
}
.a {
float: right;
margin-left: 10px;
width: 30%;
}
.a input {
width: 100%;
}
.b {
float: left;
margin-right: 10px;
width: 33%;
}
.b input {
width: 100%;
}
.c {
display: block;
overflow: hidden;
}
.c input {
width: 100%;
}
</style>
<div id="wrapper">
<div class="form-group">
<span class="a">
<label>Thing 1</label><br />
<input type="text" />
</span>
<span class="b">
<label>Thing 2</label><br />
<input type="text" />
</span>
<span class="c">
<label>Thing 3</label><br>
<input type="text" />
</span>
</div>
<div class="form-group">
<div class="a">
<label>Thing 1</label><br />
<input type="text" />
</div>
<div class="b">
<label>Thing 2</label><br />
<input type="text" />
</div>
<div class="c">
<label>Thing 3</label><br>
<input type="text" />
</div>
</div>
</div>
Well, you could change the display type from display: inline to display: block to make them fill space. But I don't know if the inline is an requirement.
You have to choose a fixed width for the span elements, and use the display:inline-block property like in this example.