When translating a form/input on the Z-axis, the area that accepts the cursor isn't brought forward in Z space with the apparent place of the element, and trying to click on the input box doesn't work unless you click where the element would be if it hadn't been translated. Is there any way to fix this?
HTML
<html>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../css/client-questionaire.css" type="text/css">
<div id="impress" data-transition-duration="3000">
<div id="yourself" class="step page" data-x="0">
<div class="innerDiv">
<p class="mainWord">
<span class="textLength">
<span class="black">YOUR</span><span class="white">SELF</span>
</span>
</p>
<div class="wrap">
<div class="formBox">
<form id="yourselfForm" class="form">
<label for="firstName">
What's your <u>first name</u>?
</label><br>
<input name="firstName" type="text" ><br>
<label for="lastName">
What's your <u>last name</u>?
</label><br>
<input name="lastName" type="text" ><br>
<label for="currentJob">
What's your <u>current job title</u>?
</label><br>
<input name="currentJob" type="text" ><br>
</form>
</div>
</div>
</div>
</div>
<div id="intro" class="step page" data-x="2000">
<div class="outerDiv">
<div class="innerDiv">
<p class="mainWord"><span class="black first">CREÆTIVE</span> <span class="white last">BRIEF</span></p>
<div class="formBox">
</div>
</div>
</div>
</div>
<div id="lookFeel" class="step page" data-x="4000">
<div class="outerDiv">
<div class="innerDiv">
<p class="mainWord"><span class="black firstSpan">LOOK</span> <span class="white secondSpan">&</span><span class="black"> FEEL</span></p>
<div class="formBox">
</div>
</div>
</div>
</div>
<script src="/js/impress.js"></script>
<script>
impress().init();
</script>
CSS
body {
background: #cc9933;
}
.page {
height: 830px;
width: 1480px;
margin: 0px;
}
.formBox {
position:absolute;
border: 1px solid black;
height: 450px;
width: 270px;
top: -150px;
left: 867px;
z-index: 21;
background: #cc9933;
transform: translateZ(300px);
}
.innerDiv {
position:absolute;
z-index: 9;
width: 1000%;
border-top: 1px solid black;
border-bottom: 1px solid black;
top:40%;
height: 108px;
}
.frontFiller {
transform: translateX(-2000px);
width: 1000%;
}
.mainWord {
margin: 0px 50px;
font-size: 90px;
height: 100%;
}
.black {
color: black;
}
.white {
color: white;
}
Not sure what you're trying to achieve, your example moves the input outside of the viewport and the translation isn't working at all.
So, I'll take a guess: Have you tried setting the CSS property perspective on the parent of .formBox?
Here's an example that shows how it would work:
.wrapper {
perspective: 50px;
transform-style:preserve-3d;
}
.formBox {
position:absolute;
border: 1px solid black;
height: 450px;
width: 270px;
left: 200px;
z-index: 21;
background: #cc9933;
-webkit-transform: translateZ(30px);
transform: translateZ(30px);
}
<div class="wrapper">
<div class="formBox">
<form id="yourselfForm" class="form">
<label for="firstName">
What's your <u>first name</u>?
</label><br>
<input name="firstName" type="text" >
</form>
</div>
</div>
This is a browser bug, and specifically a Chrome bug. I can reproduce the effect from the HTML and CSS that you provided on Google Chrome. On Firefox (Quantum) it works as expected.
On Chrome, it only happens when you use both translateZ() AND z-index. If you can create your form without using z-index on the text fields, it should be fine.
Consider reporting this to Google Chrome but tracker.
Related
I have created both a select-box and a searchbar in html. Now I want to place both elements next to each other. I thought this would be possible by placing both elements into another div-container with display set to inline. But this doesn't really solve the issue.
.select-search-container {
display: inline;
}
.select-box {
display: flex;
flex-direction: column;
width: 400px;
}
.search-bar {
max-width: 400px;
border: none;
position: relative;
box-sizing: border-box;
left: calc(98% - 400px);
top: 20px;
}
#searchBarInput {
background: transparent;
padding: 12px 24px;
border-radius: 8px;
border: 2px solid black;
width: 100%;
box-sizing: border-box;
}
.search-bar__icon {
position: absolute;
height: 100%;
left: 90%;
top: 25%;
}
<div class="select-search-container">
<div class="select-box">
<div class="options-container">
<div class="option">
<input type="radio" class="radio" name="category" id="apples">
<label for="apples">apples</label>
</div>
<div class="option">
<input type="radio" class="radio" name="category" id="bananas">
<label for="bananas">bananas</label>
</div>
<div class="option">
<input type="radio" class="radio" name="category" id="lemons">
<label for="lemons">lemons</label>
</div>
</div>
<div class="selected">
Pick a fruit
</div>
</div>
<div class="search-bar" id="searchBar">
<input type="text" placeholder="Search Fruit" id="searchBarInput">
<i class="material-icons search-bar__icon">search</i>
</div>
</div>
As you can see, I have created the select-box using radio-buttons. I like the styling of this better than a normal select-box. Basically, I am showing the selected-div all the time and upon clicking on this div, I show the options-container. The display of the select-box is set to flex, with flex-direction column, as I want the options-container to be placed below the selected-div:
I am trying to place the searchbar next to the select-box. For this purpose I am also playing around with the left-, top- etc. specifiers. It doesn't really work though. When changing the display-type of the wrapper from inline to inline-flex, it kind of works, but the size of my searchbar shrinks and the icon isn't placed where I want it to be. I know this is a very specific question. I am very surprised that it doesn't work though and would really appreciate an explanation.
.select-search-container {
display: flex;
justify-content: space-between;
}
.select-box {
}
.search-bar {
max-width: 400px;
border: none;
position: relative;
box-sizing: border-box;
top: 20px;
}
#searchBarInput {
background: transparent;
padding: 12px 24px;
border-radius: 8px;
border: 2px solid black;
width: 100%;
box-sizing: border-box;
}
.search-bar__icon {
position: absolute;
height: 100%;
left: 90%;
top: 25%;
}
<div class="select-search-container">
<div class="select-box">
<div class="options-container">
<div class="option">
<input type="radio" class="radio" name="category" id="apples">
<label for="apples">apples</label>
</div>
<div class="option">
<input type="radio" class="radio" name="category" id="bananas">
<label for="bananas">bananas</label>
</div>
<div class="option">
<input type="radio" class="radio" name="category" id="lemons">
<label for="lemons">lemons</label>
</div>
</div>
<div class="selected">
Pick a fruit
</div>
</div>
<div class="search-bar" id="searchBar">
<input type="text" placeholder="Search Fruit" id="searchBarInput">
<i class="material-icons search-bar__icon">search</i>
</div>
</div>
I have six separate options. I want the black border to slide left and right smoothly on clicking any of the options. When I click on “Service Providers”, the black bottom border must slide smoothly towards right. When I click on “Friends”, it should slide smoothly towards left. I want to achieve this with CSS transitions. It is working fine when I click the option on the right, but the left transition is not working.
.row {
background-color: #f4f4f4;
border-bottom: 1px solid #dbdbdb;
text-align: center;
border-right: 1px solid #dbdbdb;
margin: 0px;
}
span {
position: relative;
left: 0;
bottom: 0;
width: 16.33%;
border-bottom: 2px black solid;
transition: all .5s;
}
#friendBox:checked~span {
left: 0%;
}
#sellerBox:checked~span {
left: 16.33%;
}
#familyBox:checked~span {
left: 33.33%;
}
#clientsBox:checked~span {
left: 50%;
}
#childrenBox:checked~span {
left: 67%;
}
#elderBox:checked~span {
left: 83.75%;
}
input[type="radio"] {
position: absolute;
left: -100vw;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<input type="radio" id="friendBox"></input>
<input type="radio" id="sellerBox"></input>
<input type="radio" id="familyBox"></input>
<input type="radio" id="clientsBox"></input>
<input type="radio" id="childrenBox"></input>
<input type="radio" id="elderBox"></input>
<div class="col-sm-2">
<label for="friendBox">Friends</label>
</div>
<div class="col-sm-2">
<label for="sellerBox">Service Providers</label>
</div>
<div class="col-sm-2">
<label for="familyBox">Family</label>
</div>
<div class="col-sm-2">
<label for="clientsBox">Clients</label>
</div>
<div class="col-sm-2">
<label for="childrenBox">Children</label>
</div>
<div class="col-sm-2">
<label for="elderBox">Elders</label>
</div>
<span></span>
</div>
</div>
</body>
</html>
You don’t use radio buttons correctly.
The purpose of radio buttons is to have at most one radio button active among a group of radio buttons.
The six radio buttons you have are independent from each other, so toggling one doesn’t toggle the existing active one.
See the documentation.
You need to use the same name for all six radio buttons.
Since they define your menu, let’s call it name="menu".
Another thing: </input> isn’t valid; remove it.
Another suggestion: your <label>s don’t fill the entire height of the menu item; replace the <div>s by the <label>s directly.
They still appear to have some bottom margin, but I’m sure you can find another solution for this.
.row {
background-color: #f4f4f4;
border-bottom: 1px solid #dbdbdb;
text-align: center;
border-right: 1px solid #dbdbdb;
margin: 0px;
}
span {
position: relative;
left: 0;
bottom: 0;
width: 16.33%;
border-bottom: 2px black solid;
transition: all .5s;
}
#friendBox:checked~span {
left: 0%;
}
#sellerBox:checked~span {
left: 16.33%;
}
#familyBox:checked~span {
left: 33.33%;
}
#clientsBox:checked~span {
left: 50%;
}
#childrenBox:checked~span {
left: 67%;
}
#elderBox:checked~span {
left: 83.75%;
}
input[type="radio"] {
position: absolute;
left: -100vw;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<input id="friendBox" type="radio" name="menu">
<input id="sellerBox" type="radio" name="menu">
<input id="familyBox" type="radio" name="menu">
<input id="clientsBox" type="radio" name="menu">
<input id="childrenBox" type="radio" name="menu">
<input id="elderBox" type="radio" name="menu">
<label class="col-sm-2" for="friendBox">Friends</label>
<label class="col-sm-2" for="sellerBox">Service Providers</label>
<label class="col-sm-2" for="familyBox">Family</label>
<label class="col-sm-2" for="clientsBox">Clients</label>
<label class="col-sm-2" for="childrenBox">Children</label>
<label class="col-sm-2" for="elderBox">Elders</label>
<span></span>
</div>
</div>
</body>
</html>
I am trying to design a vertical stepper with content in the right side. However, I am having a problem. The problem is the distance between the steps are not constant when i have the content. Because the steps distance are taken based on the height of content. How can i overcome this issue and make the distance between each step constant no matter how the long the content is ?
Here is what i have done for now
.container {
width: 100%;
background: #fff;
}
.step {
padding: 50px 10px;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.v-stepper {
position: relative;
}
.step .circle {
background-color: #dedede;
border-radius: 100%;
width: 24px;
height: 24px;
display: inline-block;
}
.step .line {
top: 24px;
left: 12px;
height: 100%;
position: absolute;
border-left: 1px solid #dedede;
}
.step.completed .circle {
visibility: visible;
background-color: rgb(6, 150, 215);
border-color: rgb(6, 150, 215);
}
.step.completed .label {
color: rgb(6, 150, 215);
}
.step.active .circle {
visibility: visible;
border-color: rgb(6, 150, 215);
}
.step.empty .circle {
visibility: hidden;
}
.step.empty .line {
top: 0;
height: 150%;
}
.step:last-child .line {
display: none;
}
.label {
margin-left: 20px;
display: inline-block;
}
.headline {
background: #dedede;
padding: 5px;
}
<div class="container">
<div class="step completed">
<div class="v-stepper">
<div class="circle"></div>
<div class="line"></div>
</div>
<div class="label">
Personal
</div>
<div class="content">
<h3>Personal</h3>
<p>Description on the topic personal</p>
<h3 class="headline">Information</h3>
<form>
<input type="text" id="first_name" />
<input type="text" id="last_name" />
<input type="text" id="Phone Number" />
<input type="text" id="email" />
<input type="text" id="address" />
<input type="text" id="country" />
<input type="text" id="city" />
</form>
</div>
</div>
<div class="step">
<div class="v-stepper">
<div class="circle"></div>
<div class="line"></div>
</div>
<div class="label">
Education
</div>
</div>
<div class="step">
<div class="v-stepper">
<div class="circle"></div>
<div class="line"></div>
</div>
<div class="label">
Background
</div>
</div>
</div>
UPDATE
I mean the following way
the stepper should have constant height(the distance from one circle to another) no matter how long it's respective content has. Because I will only be showing the content of selected step.
As the second comment by godfather suggested, to make circles connected to each other remove the padding top and bottom from .step and to keep the content of each step has its own padding just add padding to .step .content.
Here's a working snippet
.container {
width: 100%;
background: #fff;
}
.step {
/* Remove the padding from top and bottom*/
/*padding: 50px 10px;*/
padding: 0 10px;
display: flex;
flex-direction: row;
justify-content: flex-start;
position: relative;
}
/* Add this to make the content of each step has its own padding */
.step .content{
padding: 20px 0 50px;
}
.v-stepper {
position: relative;
}
.step .circle {
background-color: #dedede;
border-radius: 100%;
width: 24px;
height: 24px;
display: inline-block;
}
.step .line {
top: 24px;
left: 12px;
height: 100%;
position: absolute;
border-left: 1px solid #dedede;
}
.step.completed .circle {
visibility: visible;
background-color: rgb(6, 150, 215);
border-color: rgb(6, 150, 215);
}
.step.completed .label {
color: rgb(6, 150, 215);
}
.step.active .circle {
visibility: visible;
border-color: rgb(6, 150, 215);
}
.step.empty .circle {
visibility: hidden;
}
.step.empty .line {
top: 0;
height: 150%;
}
.step:last-child .line {
display: none;
}
.label {
margin-left: 20px;
display: inline-block;
}
.headline {
background: #dedede;
padding: 5px;
}
<div class="container">
<div class="step completed">
<div class="v-stepper">
<div class="circle"></div>
<div class="line"></div>
</div>
<div class="label">
Personal
</div>
<div class="content">
<h3>Personal</h3>
<p>Description on the topic personal</p>
<h3 class="headline">Information</h3>
<form>
<input type="text" id="first_name" />
<input type="text" id="last_name" />
<input type="text" id="Phone Number" />
<input type="text" id="email" />
<input type="text" id="address" />
<input type="text" id="country" />
<input type="text" id="city" />
</form>
</div>
</div>
<div class="step">
<div class="v-stepper">
<div class="circle"></div>
<div class="line"></div>
</div>
<div class="label">
Education
</div>
<div class="content">
<h3>Personal</h3>
<p>Description on the topic personal</p>
<h3 class="headline">Information</h3>
<form>
<input type="text" id="first_name" />
<input type="text" id="last_name" />
<input type="text" id="Phone Number" />
<input type="text" id="email" />
<input type="text" id="address" />
<input type="text" id="country" />
<input type="text" id="city" />
</form>
</div>
</div>
<div class="step">
<div class="v-stepper">
<div class="circle"></div>
<div class="line"></div>
</div>
<div class="label">
Background
</div>
</div>
</div>
I know this question has been asked and aswered before, but for some reason, the answers are not working for me; so any help is much appreciated.
I'm creating a hybrid mobile app and I need to add an clickable icon (SVG) inside an input field. Even though I have managed to add the icon, when I test my design in different screens, the icon doesn't not respect the position I need it to be in.
Here are some shots: This is how it's supposed to look in all screens and this is what it looks like in landscape mode, for example.
Here's my code: https://codepen.io/paulamourad/pen/djXvxq
CSS:
.wallet-body {
width: 100%;
margin: 0 auto;
}
.form-group {
position: relative;
}
.form-group input {
border: 1px solid #2C2C2C;
height: 48px;
}
.qr-scanner-img {
float: left;
width: 11%;
margin-top: -39px;
margin-left: 120px;
position: relative;
}
HTML:
<div class="wallet-body">
<form class="form-pagar">
<div class="form-group">
<input type="amount" class="form-control" id="amount" placeholder="Monto">
</div>
<div class="form-group">
<input type="IDuser" class="form-control" id="IDuser" placeholder="Email del destinatario">
<a href="#">
<img class="qr-scanner-img" src="img/qr.svg" alt="qr"></a>
</a>
</div>
</form>
</div>
.wallet-body {
width: fit-content;
margin: 0 auto;
float: left;
}
.form-group{
position: relative;
}
.form-group input {
border: 1px solid #2C2C2C;
height: 48px;
}
.qr-scanner-img {
width: 11%;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
<div class="wallet-body">
<form class="form-pagar">
<div class="form-group">
<input type="amount" class="form-control" id="amount" placeholder="Monto">
</div>
<div class="form-group">
<input type="IDuser" class="form-control" id="IDuser" placeholder="Email del destinatario">
<a href="#">
<img class="qr-scanner-img" src="img/qr.svg" alt="qr"></a>
</a>
</div>
</form>
</div>
Good day developers! I would like to ask if how can I make my form appear on top of my image? The problem is that my form appear at the bottom. Here's the image of my screenshot.
Here are my codes:
HTML
<body>
<div class="container" align="center">
<div id="image">
<img src="assets/img/imac.png" style="width:640px; height:678">
</div>
<div id="loginForm">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please sign in</h3>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me"> Remember Me
</label>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
</fieldset>
</form>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #2ecc71;
}
.container {
width: 1000px;
height: 700px;
margin-top: 100px;
}
#loginForm{
width: 500px;
height: 400px;
}
Make the #image be position:absolute and fill the .container (which is made position:relative) with it.
body {
background-color: #2ecc71;
}
.container {
width: 1000px;
height: 700px;
margin-top: 100px;
position:relative;
}
#loginForm {
width: 500px;
height: 400px;
position:relative;
z-index:10;
}
#image{
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
}
<div class="container" align="center">
<div id="image">
<img src="http://dummyimage.com/600x678/cccccc/ffffff.jpg&text=monitor+image" style="width:640px; height:678">
</div>
<div id="loginForm">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please sign in</h3>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
</fieldset>
</form>
</div>
</div>
</div>
</div>
Create a div the size of the image, and make the image the background image for the div.
Then place a div container inside this div for the form itself. You can then use CSS to position the form div using margins.
<div id="image-container">
<div id="form-container">
// your form
</div>
</div>
#image-container {
width: 500px;
height: 500px;
background: url(/* your image */);
}
#form-container {
width:350px;
margin: 30px auto 0 auto;
}
Obviously, you need to replace the sizes with ones of your actual image, and the margin values to make your form content fit within the screen of the computer in your image.
That should work, I'm coding this on my phone so apologies if I miss something trivial!
I used the last example and made it simpler. Just adjust for image size and use padding to position the form.
<div style="width:529px; height:220px; background-image:url('image.jpg')" align="center">
<div style="width:529px; padding: 165 0 0 0" align="center">
...form ...
<div>
<div>
Try this
* {
box-sizing: border-box;
font-family: sans-serif;
}
.form-container {
display: flex;
justify-content: center;
background: url("https://parrot-tutorial.com/images/mask-smog.jpg") no-repeat center;
background-size: cover;
position: relative;
min-height: 400px;
padding: 24px;
}
.my-form {
background-color: #fff;
padding: 16px;
}
.form-header {
text-align: center;
padding: 0;
margin-top: 0;
font-size: 2em;
}
.form-group {
margin-bottom: 1rem;
}
label {
display: inline-block;
margin-bottom: .5rem;
}
.form-control {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #f1f1f1;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
}
.form-text {
color: #6c757d;
display: block;
margin-top: .25rem;
font-size: 80%;
font-weight: 400;
}
.btn {
display: block;
width: 100%;
font-weight: 400;
color: #ffffff;
cursor: pointer;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
background-color: #007bff;
}
<div class="form-container">
<form action="/html/form-action.php" class="my-form" method="POST">
<h2 class="form-header">Login</h2>
<div class="form-group">
<label for="exampleEmail">Email address</label>
<input type="email" class="form-control" id="exampleEmail" placeholder="Enter email" name="uemail">
<small class="form-text">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="examplePassword">Password</label>
<input type="password" class="form-control" id="examplePassword" placeholder="Password" name="pwd">
</div>
<div class="form-group">
<input type="checkbox" id="exampleCheck" name="saveinfo">
<label for="exampleCheck">Remember me</label>
</div>
<button type="submit" class="btn">Submit</button>
</form>
</div>
Reference:Add a Form on Image