I'm struggling with how to make my input field 100% width and centered and also have the "Add" button centered but displayed underneath the input field. I just need this part of the application to be responsive for mobile devices. I also plan to centre the other button when I get to that stage. Does anyone have any idea? Thanks in advance.
#media only screen and (max-width: 965px) {
body {
background-color: lightblue;
color: #fff;
}
.app {
margin: 2.5%;
border: 1px solid #4CAF50;
} /* main div */
.header {
border: 1px solid #4CAF50;
text-align: centre;
font-family: 'Open Sans', sans-serif;
} /* title div */
.title {
text-align: center;
font-size: 40px;
} /* title */
.input {
width: 100%;
border: 1px solid #4CAF50;
} /* input tasks div */
::-webkit-input-placeholder {
text-align: center;
}
.input input,
.input-btn,
.item-text,
.action-btns,
.edit-input {
font-size: 20px;
}
.input-btn {
background-color: #23ba42;
color: #F1F1F1;
} /* add button */
.todo-list {
border: 1px solid #4CAF50;
margin-top: 40px;
width: 100%;
} /* to-do list div */
.item {
margin-bottom: 40px;
border-bottom: 2px solid red;
} /* individual tasks within to-do list */
.item-text {
width: 100%;
text-align: center;
} /* task text */
.action-btns {
text-align: center;
} /* task action buttons div */
.action-btn {
display: block;
justify-content: center;
align-items: center;
} /* individual action buttons */
.remove-btn {
background-color: #ce0a0a;
color: #f1f1f1;
font-size: 18px;
}
.edit-btn {
background-color: #cb960d;
color: #f1f1f1;
font-size: 18px;
}
.update-btn {
background-color: #23ba42;
color: #f1f1f1;
font-size: 18px;
}
.edit-input {
width: 100%;
text-align: center;
}
.hide{
display: none;
} /* hides input field for editing to-do tasks */
}
<center><div class="input">
<input type="text" name="todo-input" id="todo-input" class="input-element" placeholder="What do you need to do?" />
<br>
<button type="button" name="add-btn" id="add-btn" class="input-btn">
Add
</button></div> </center>
<center><div class="input">
<input type="text" name="todo-input" id="todo-input" class="input-element" placeholder="What do you need to do?" />
<br>
<button type="button" name="add-btn" id="add-btn" class="input-btn">
Add
</button></div> </center>
Aru u looking for this Try it And tell me if it Worked for u
See I am Getting Add Button in center Underneath the Input Tag
Related
I have a form with the following code using React in Javascript:
import React from 'react';
import { FiSend } from 'react-icons/fi';
export default function SubscriptionForm() {
return (
<div className="subscription-form">
<form>
<input
type="text"
className="subscription-form__input-field"
placeholder="Je e-mailadres"
/>
<button className="subscription-form__subscribe-button">Submit</button>
</form>
</div>
);
}
here's the css for the form:
/*
subscription form
*/
.subscription-form {
width: 100%;
line-height: 200px;
display: flex;
justify-content: center;
}
.subscription-form__input-field {
height: 45px;
width: 400px;
padding-left: 10px;
border: 1px solid white;
}
.subscription-form__input-field::placeholder {
color: black;
}
.subscription-form__input-field:focus {
outline: none;
box-shadow: none;
}
.subscription-form__subscribe-button {
height: 45px;
border: 0;
background: red;
}
I gave both the button and the text input the same height of 45 px but in my browser it appears like this:
.subscription-form__input-field {
border: 1px solid white; /* You have border here. Pls remove this */
}
I have the below code to make a login form but i cant get the checkbox label to be like always against the edge of the text area. I always sits to the right of the text area. I cant get it to be dependant on the div it is in. On inspection it sits outside the div.
Different things i have tried have included giving the label a left value but this messes it up when the screen size changes.
I want something like this
Here is a jsfiddle if this is easier
function showHidePassword() {
var x = document.getElementById("pass");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
body {
background-color: #ffffff;
}
* {
box-sizing: border-box;
}
input[type=text],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
input[type=password],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container1 {
border-radius: 25px;
background-color: #f2f2f2;
padding: 40px;
position: center;
margin: 15% 30%;
}
.signup {
border-radius: 25px;
background-color: #f2f2f2;
padding: 40px;
position: center;
opacity: 0.96;
}
.container1 .new-body {
background: #f2f2f2;
}
.signup .new-body {
background: #f2f2f2;
}
.signup .row {
padding-top: 5px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 65%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25,
.col-75,
input[type=submit] {
width: 100%;
margin-top: 0;
}
.col-70,
input[type=submit] {
width: 95%;
margin-top: 0;
}
}
.passw {
cursor: pointer;
width: 30px;
height: 20px;
}
.col-75 label {
padding-top: 16px;
position: absolute;
z-index: 100;
}
<form>
<div class="row">
<div class="col-25">
<label for="pass">Password</label>
</div>
<div class="col-75">
<input type="password" id="pass" name="password" minlength="5" pattern="[A-Za-z][A-Za-z0-9]*[0-9][A-Za-z0-9]*" placeholder="Password" title="A valid password is a set of 5 characters, each consisting of an
upper or lower-case letter, or a digit. The password must begin with a letter and contain at least one digit" autocomplete="current-password" required>
<label for="passShowIcon" id="showHide"><input name="passShowIcon" type="checkbox" class="passw" onclick="showHidePassword();">
<span class=" "></span></label>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
If you wanted to make sure the checkbox appears inside the text input. You could wrap both input fields with a relative class, and then apply absolute positioning to the checkbox.
Like so:
https://jsfiddle.net/x0o46g7a/2/
.wrapper {
position: relative;
}
.text {
width: 100%;
height: 100%;
}
.checkbox {
position: absolute;
top: -8px;
right: -8px;
}
Something to note:
I would recommend adding some padding-right to your text input, to make sure it's text does not overlap/underlap the absolute positioned checkbox.
Based on your code, add the following rules in your css.
float: right to .col-75 instead of float left
right: 0 to .col-75 label
those will ensure that checkbox will remain inside the input field.
This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 3 years ago.
I'd like to make circle buttons. In this snippet, when the screen is narrow so that both buttons don't fit completely, button A begins to squash, while button B is still a circle (what I want). Button B is wrapped with a div, button A is not.
Two questions:
a) Why simply wrapping button B with a div makes it behave differently?
b) How, if possible, can I get the desired behaviour (button B) without the extra div?
.counter {
display: flex;
margin-top: 10pt;
background-color: #444444;
justify-content: space-around;
align-items: center;
border-radius: 60pt;
width: 100%;
padding: 5pt;
}
button {
outline: none;
}
.btn {
background-color: #222222;
border-radius: 50%;
border: 1pt solid white;
width: 50pt;
height: 50pt;
display: inline-block;
}
.btn-text {
color: white;
font-size: 14pt;
text-align: center;
}
.btn:active {
background-color: #444444;
}
<div class="counter">
<button class="btn"><span class="btn-text">A</span></button>
<div class="btn-div">
<button class="btn"><span class="btn-text">B</span></button>
</div>
</div>
https://jsfiddle.net/njto340f/3/
It is because the width is adjusting with the container, making it compress too.
You must set min-width and min-height to make sure that the width wouldn't go below your desired width and prevent it from shrinking
.counter {
display: flex;
margin-top: 10pt;
background-color: #444444;
justify-content: space-around;
align-items: center;
border-radius: 60pt;
width: 100%;
padding: 5pt;
}
button {
outline: none;
}
.btn {
background-color: #222222;
border-radius: 50%;
border: 1pt solid white;
min-width: 50pt;
min-height: 50pt;
display: inline-block;
}
.btn-text {
color: white;
font-size: 14pt;
text-align: center;
}
.btn:active {
background-color: #444444;
}
<div class="counter">
<button class="btn"><span class="btn-text">A</span></button>
<div class="btn-div">
<button class="btn"><span class="btn-text">B</span></button>
</div>
</div>
Check this fiddle
Source: min/max-width vs width
I'm trying to put a span inside of a text input to prefix it with the "$" character, to represent a dollar amount.
To do this, I'm using a label element containing the "$" span along with the actual input, which is set to 100% width. The label element is styled to look like a text box.
This works fine in Chrome and IE, however in Firefox it seems that setting 100% width on the input does not take the span into consideration, and therefore extends past the actual label element's boundaries:
Code Example:
.container { width: 400px; }
.w70 { width: 70px; }
.input-with-label {
border: 1px solid #D9D9D9;
display: flex;
align-items: center;
background-color: #fff;
}
.input-with-label.-dollar-amount > input[type='text'] {
text-align: right;
font-weight: 600;
}
.input-with-label > input[type='text'] {
margin: 0;
border: none;
width: 100%;
}
.input-with-label > .input-label {
padding-left: 3px;
font-size: 10px;
border: none;
}
<div class="container">
<label class="input-with-label -dollar-amount w70">
<span class="input-label">$</span>
<input type="text" value="0.00" />
</label>
</div>
Doesn't setting min-width:0 to the input and making it use all available width via flex:1 solve the problem?
.container { width: 400px; }
.w70 { width: 70px; }
.input-with-label {
border: 1px solid #D9D9D9;
display: flex;
align-items: center;
background-color: #fff;
}
.input-with-label.-dollar-amount > input[type='text'] {
text-align: right;
font-weight: 600;
}
.input-with-label > input[type='text'] {
margin: 0;
border: none;
min-width: 0;
flex: 1;
}
.input-with-label > .input-label {
padding-left: 3px;
font-size: 10px;
border: none;
}
<div class="container">
<label class="input-with-label -dollar-amount w70">
<span class="input-label">$</span>
<input type="text" value="0.00" />
</label>
</div>
I used another method
.currencyinput span{
position: relative;
}
.currencyinput input{
padding-left:20px;
}
.currencyinput span{
left:15px;
top:0
position: absolute;
}
input{
border:1px solid lightgray;
line-height:30px;
}
<span class="currencyinput"><span>$</span><input type="text" name="amount"></span>
I am having some trouble with my dropdown menu bar and the dropdown is not aligned properly as well.
Modified code on JSFiddle
HTML
<div class="container">
Home
<div class="dropdown">
<button class="dropbtn">Recipes</button>
<div class="dropdown-content">
Choc Chip Cookie
Choc Brownie
Choc Pretzels
</div>
</div>
Gallery
Contact
</div>
CSS
.container {
overflow: hidden;
background-color: #3399CC;
border-style: solid;
border-color: black;
border-width: medium;
width: 50%;
margin: auto;
text-align: center;
font-family: 'Lobster',cursive;
}
.container a {
float: left;
font-size: 22px;
color: black;
text-align: center;
padding: 10px 14px;
text-decoration: none;
align-content: center;
width: 21%; /* Modified by me to change the width of Home, Gallery and Contact element */
display: block;
}
.dropdown {
float: left;
overflow: hidden;
width: 24%; /* Modified by me to change the width of Recipe element */
}
.dropdown .dropbtn {
font-size: 22px;
border: none;
outline: none;
color: black;
padding: 10px 14px;
background-color: inherit;
font-family: 'Lobster',cursive;
}
.container a:hover, .dropdown:hover { /* Modified by me. Change the background color of dropdown element instead of the button */
background-color: #52C3EC;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #3399CC;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 250px;
}
.dropdown-content a {
float: none;
color: black;
text-align: left;
padding: 10px 14px;
padding-left: 40px; /* Modified by me to align the list item in the dropdown menu */
text-decoration: none;
display: block;
width: 78%; /* Modified by me to change the width of the list item in the dropdown menu */
}
.dropdown-content a:hover {
background-color: #52C3EC;
}
.dropdown:hover .dropdown-content {
display: block;
}
I'm not changing your page's structure, only the CSS code used in them. I've marked which part of the code that I modified along with the explataion.
You can still see a little bit of space and the end of Contact element. That's because scaling the size in percentage is hard. You can fix that by changing the unit to pixel. I'll leave the decision to you.
Also the result is best viewed in your browser not in JSFiddle due to size constraint.