Issue
So for some reason I can't get these inputs into a flex box and then order them vertically. Below are the html and css. Instead of ordering them in a column the flex box bunches them all up see link for photo provided by SO.
Screenshot of what is shown:
Ideas welcome. Thanks in advance!
CSS
<style>
body {
background-image: url("static/Images/Screen Shot 2021-08-18 at 10.45.56 PM.png");
background-size: 100vw;
}
.bottom-left {
position: absolute;
bottom: 84%;
left: 13%;
font-size: 150%;
color: white;
background-color: black;
font: Georgia;
width: 12%;
}
.fname {
position: absolute;
font-size: 95%;
color: white;
background-color: black;
border-radius: 3px;
width: 12%;
}
.sub {
position: absolute;
font-size: 95%;
color: white;
background-color: black;
border: 1.7px solid white;
width: 8%;
height: 4%;
width: 12%;
}
.lname {
position: absolute;
font-size: 95%;
color: white;
background-color: black;
border-radius: 3px;
font: Georgia;
width: 12%;
}
.add1 {
position: absolute;
font-size: 95%;
color: white;
background-color: black;
border-radius: 3px;
font: Georgia;
width: 12%;
}
.add2 {
position: absolute;
font-size: 95%;
color: white;
background-color: black;
border-radius: 3px;
font: Georgia;
width: 12%;
}
.postal {
position: absolute;
font-size: 95%;
color: white;
background-color: black;
border-radius: 3px;
font: Georgia;
width: 12%;
}
.country {
position: absolute;
font-size: 95%;
color: white;
background-color: black;
border-radius: 3px;
font: Georgia;
width: 12%;
}
.city {
position: absolute;
font-size: 95%;
color: white;
background-color: black;
border-radius: 3px;
font: Georgia;
width: 12%;
}
.state {
position: absolute;
font-size: 95%;
color: white;
background-color: black;
border-radius: 3px;
font: Georgia;
width: 12%;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: white;
font: Georgia;
opacity: 1; /* Firefox */
}
.wrapper {
display: flex;
}
.wrapper input[type="text"] {
flex: 1 1 auto;
}
</style>
HTML:
<title>task Page</title>
</head>
<body>
{%if msg%}
<p>{{msg}}</p>
{%endif%}
<label class="bottom-left" for="fname">First name</label>
<form name="tasks"action="/add-tasks" method="POST">
<input class="fname" type="text" id="fname" name="fname" placeholder="FIRST NAME">
<input class="lname" type="text" id="lname" name="fname" placeholder="LAST NAME">
<input class="add1" type="text" id="add1" name="fname" placeholder="address 1">
<input class="add2" type="text" id="add2" name="fname" placeholder="address 2">
<input class="postal" type="text" id="postal" name="fname" placeholder="postal code">
<input class="country" type="text" id="country" name="fname" placeholder="country">
<input class="city" type="text" id="city" name="fname" placeholder="city">
<input class="state" type="text" id="state" name="fname" placeholder="state">
<input class="sub" type="submit" value="Submit">
</form>
</body>
</html>
Solution
You can't use position absolute and expect flex to work. Put all of your inputs in a division and give display flex then say flex direction column
Answered By - calm turtle
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.