Form border creates space around inner elements - html

I'm trying to create a simple bordered form that has a button and input of type="text" inside of it.
There is this spacing that appears that I cannot remove.
main {
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}
main form {
display: flex;
border: 2px solid green;
}
main form .btndep {
display: block;
padding: 10px;
background: green;
border: 0;
box-shadow: none;
outline: none;
}
main form input {
border: 0;
outline: none;
box-shadow: none;
text-align: right;
padding-left: 5px;
padding-right: 5px;
}
<main>
<form class="deposit">
<button class="btndep">Deposit</button>
<input type="text" placeholder="0.00€">
</form>
</main>

there is a way around it; it seems... outline instead of border

Related

Layout changes in WordPress

I have a contact form that I'm making for my WordPress website. When I test it on a standard webpage it looks like this:
But when I paste the code into WordPress it looks like this and does a paragraph.
Any help on this?
I am also using elementor if that helps.
here is the code:
.mailSec1 {
padding: 0px;
border-radius: 50px;
width: 350px;
border: #04aa6d 2px solid;
padding-left: 37px;
padding-top: 4px;
padding-bottom: 4px;
}
.mailSec1 input {
font-size: 18px;
width: 215px;
outline: none;
border: none;
}
.mailSec1 button {
height: 50px;
width: 85px;
background-color: #04aa6d;
color: #fff;
border-radius: 40px;
outline: none;
font-size: 22px;
border: none;
}
<div class="mailSec">
<div class="mailSec1">
<input type="email" name="email" placeholder="Tell us!">
<button>Send</button>
</div>
</div>
SOLUTION
Use flexbox to control the flow of elements in the mailSec1 element.
.mailSec1 {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding-right: 4px;
}

How can I keep an image from overflowing its container?

I'm working with Reactjs in a page... like a diary.
At the end of the page, there is an img that I'm trying to set inside the page but because of the size, it goes out of the page... I try to modify it with Css, but still not working. Can you help me please?
This is how the page looks:
This is how the html code looks:
<div className="notes__content">
<input type="text" placeholder="Somer awesome title" className="notes__title-input" autoComplete="off"/>
<textarea placeholder="What happened today?" className="notes__textarea"></textarea>
<div className="notes__image">
<img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen"/>
</div>
</div>
This is how I set the css:
.notes__main-content{
display: flex;
flex-direction: column;
height: 100%;
}
.notes__appbar{
align-items: center;
background-color: $primary;
color: white;
display: flex;
justify-content: space-between;
padding: 10px 20px 10px 20px;
}
.notes__content{
display: flex;
flex-direction: column;
height: 100%;
padding: 20px;
}
.notes__title-input, .notes__textarea{
border: none;
&:focus{
outline: none;
}
}
.notes__title-input{
color: $dark-grey;
font-size: 25px;
font-weight: 700;
margin-bottom: 10px;
}
.notes__textarea{
border: none;
color: $dark-grey;
font-size: 20px;
flex: 1 1 auto;
resize: none;
}
.notes__image{
box-shadow: 5px 5px $dark-grey;
height: 150px;
}
To be clear, what I want to do is to set the img to 150px so it can fit my page. Thank you for your help
You can add another div inside notes__image div. Lets call it notes__image__inner with a div wrapper.
<div className="notes__content">
<input type="text" placeholder="Somer awesome title" className="notes__title-input" autoComplete="off"/>
<textarea placeholder="What happened today?" className="notes__textarea"></textarea>
<div className="notes__image">
<div className="notes__inner__image">
<img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen"/>
</div>
</div>
</div>
Update the notes__image and img CSS with this:
.notes__image {
box-shadow: 5px 5px $dark-grey;
height: 150px;
position: relative;
}
.notes__inner__image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.notes__inner__image img {
width: 100%;
position: static;
height: 100%;
object-fit: cover;
}
Images don't magically shrink to fit their containers. You need to tell them to do so:
.notes__image img {
max-width: 100%; /* <-- here's your huckleberry */
}
You don't want to use the width property as that'll stretch images beyond their native size, and you don't want to set height as that will goof up aspect ratio.
Here I've converted className to class for demonstration purposes. If you view the fullscreen demo and shrink the window size you can see it in action.
.notes__main-content {
display: flex;
flex-direction: column;
height: 100%;
}
.notes__appbar {
align-items: center;
background-color: $primary;
color: white;
display: flex;
justify-content: space-between;
padding: 10px 20px 10px 20px;
}
.notes__content {
display: flex;
flex-direction: column;
height: 100%;
padding: 20px;
}
.notes__title-input,
.notes__textarea {
border: none;
&:focus {
outline: none;
}
}
.notes__title-input {
color: $dark-grey;
font-size: 25px;
font-weight: 700;
margin-bottom: 10px;
}
.notes__textarea {
border: none;
color: $dark-grey;
font-size: 20px;
flex: 1 1 auto;
resize: none;
}
.notes__image {
box-shadow: 5px 5px $dark-grey;
height: 150px;
}
.notes__image img {
max-width: 100%; /* <-- here's your huckleberry */
}
<div class="notes__content">
<input type="text" placeholder="Somer awesome title" class="notes__title-input" autoComplete="off" />
<textarea placeholder="What happened today?" class="notes__textarea"></textarea>
<div class="notes__image">
<img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen" />
</div>
</div>
The className property is used in React. Is this a React application? If not, it needs to be revised to "class".
Also make sure your image does not overflow the bounds of the div. You can set strict width and height in the image by using the img tag's "width" and "height" properties. Or create a notes__image img declaration, like this:
.notes__image img {
width: 100%;
height: 100%;
}

How to make sure that elements in div shouldn't cross the div horizontally?

We are trying to create a chatbot application. The input where user enters the text and 'send' button are inside a div. The div width is 100%. This is working good in the laptop and on all the mobiles except Iphone14 where the send button is getting cutoff. Below is the code.
.chat-container {
background: #fff;
height: 100%;
overflow: hidden;
padding: 0;
border-right: 1px solid #d8dada;
border-left: 1px solid #d8dada;
}
.chat-container>div:last-of-type {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
padding-right: 10px;
}
body>div>div>div:nth-child(2)>span {
background: #dadada;
padding: 10px;
font-size: 21px;
border-radius: 50%;
}
body>div>div>div.message-data-right.macro {
margin: auto;
margin-left: 1%;
}
.chat-header {
background-color: #ffffff;
height: 3.5rem;
line-height: 3.5rem;
color: #000000;
border-bottom: 1px solid #000000;
position: relative;
}
.chat-header-content {
align-content: center;
padding-top: 10px;
padding-bottom: 10px;
}
.header-img {
height: 24px;
width: 106px;
transform: scale(0.85);
vertical-align: middle;
content: url('./../images/vz_logo.svg');
}
.gray-button {
background-color: #5b5b5b;
border: none;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
font-family: Roboto-Medium;
border-radius: 4px;
}
.chat-ul {
width: 100%;
list-style-type: none;
padding: 18px 18px 3px 18px;
position: absolute;
bottom: 62px;
display: flex;
flex-direction: column;
top: 3.5rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #909296 #dee0e2;
background-color: #f6f6f6;
margin-bottom: 0%;
border-bottom: 1px solid #c1c1c1;
}
.entered-text {
border-width: 1px;
border-radius: 5px;
padding: 10px;
background: #f6f6f6;
width: 100%;
border-color: #c1c1c1;
}
.text {
width: 100%;
display: flex;
flex-direction: column;
}
.text>p:first-of-type {
width: 100%;
margin-top: 0;
margin-bottom: auto;
line-height: 13px;
font-size: 13px;
}
.text>p {
width: 100%;
margin-top: 0;
margin-bottom: auto;
line-height: 13px;
font-size: 13px;
}
.text>p:last-of-type {
width: 100%;
text-align: right;
margin-bottom: -2px;
margin-top: auto;
}
.text-right {
float: right;
font-family: Arial;
position: relative;
}
.send-message {
width: 100%;
border-radius: 0px;
padding: 10px;
display: flex;
}
input:focus {
outline: none;
}
button,
button:focus,
button:active {
outline: none;
}
<div class="chat-container">
<header class="chat-header">
<img class="header-img" />
<button type="button" class="icon-close" onClick="closeChatWindow()"></button>
</header>
<ul class="chat-ul"></ul>
<div>
<div class="send-message">
<div class="text text-right">
<input class="entered-text" />
</div>
</div>
<button id="send" class="gray-button" type="button" onClick="onMessageSend()"> Send </button>
</div>
</div>
Our testing team raised a bug saying that send button gets cutoff on IPhone14. I am not sure how to reproduce the issue as I don't have Iphone14. I have Android phone on which code is working fine. On Pc also, I tested on different browsers all are working fine. I used toggle device toolbar under developer tools to check how it looks like for different devices and used responsive to change width and height. I am not able to reproduce the issue. Below is the image where it got reproduced on Iphone14.
At the end of the image 'Send' grey color button is cutoff. Can any one please let me know how to resolve the issue.
You don't need an iPhone to see this. It's apparent in Chrome for me. Use the emulator in the dev tools if you like.
Remove the float (.text-right) from the layout
Take the 100% width off the input and .send-message
Move the flex class up a level to contain both the input and the button
I've also added some left margin to the button.
I've fixed a great many such situations in my career, and more often than not the solution involves removing unnecessary styling to simplify. You might work though your entire layout and do so.
.gray-button {
background-color: #5b5b5b;
border: none;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
font-family: Roboto-Medium;
border-radius: 4px;
margin-left: 10px;
}
.entered-text {
border-width: 1px;
border-radius: 5px;
padding: 10px;
background: #f6f6f6;
border-color: #c1c1c1;
}
.text {
width: 100%;
display: flex;
flex-direction: column;
}
.send-message {
border-radius: 0px;
padding: 10px;
display: flex;
}
input:focus {
outline: none;
}
button,
button:focus,
button:active {
outline: none;
}
<div class="chat-container">
<div class="send-message">
<div class="text">
<input class="entered-text" />
</div>
<button id="send" class="gray-button" type="button" onClick="onMessageSend()"> Send </button>
</div>
</div>
The most straightforward way to solve this is to is use the CSS calc() function to give input.entered-text a flexible width which will always accommodate the width of the <button>:
e.g. If you give button#send a fixed width (width: 100px), then you can give input.entered-text a width that can accommodate that fixed width (width: calc(100% - 100px))
Example:
#send {
display: inline-block;
width: 100px;
margin-left: 12px;
box-sizing: border-box;
}
.entered-text {
display: inline-block;
width: calc(100% - 12px - 100px);
box-sizing: border-box;
}
Im no expert but should you put a <br> in the div
edit:
line breaks are usually unnecessary so I would say only use this temporary until you find the solution

Absolutely positioned black div with opacity does not cover a certain element and I can't figure out why

I have a modal window which has an absolutely positioned black div that covers the entire viewport whenever the modal window is open. For some reason though this window doesn't cover a certain element even though it goes over it. Everything else is covered by the black screen just fine so I have no idea why this specific element doesn't.
.black-screen {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
}
The element that is not being covered:
<div class="form-container">
<form class='send-message'>
<input class='message-input' placeholder="Type a message">
</form>
</div>
And the CSS of that element:
.form-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.send-message {
position: relative;
padding: 20px 0px 20px 20px;
flex: 1;
}
.message-input {
width: 100%;
padding: 15px;
outline: none;
border: none;
background-color: #40444b;
color: #dcddde;
font-size: 14px;
border-radius: 5px 0 0 5px;
}
With small chunk of css I can only guess (css is a cascade and is hereditary)
.form-container {
position: relative; /* remove this */
display: flex;
justify-content: center;
align-items: center;
}
.send-message {
position: relative; /* remove this */
padding: 20px 0px 20px 20px;
flex: 1;
}
.message-input {
width: 100%;
padding: 15px;
outline: none;
border: none;
background-color: #40444b;
color: #dcddde;
font-size: 14px;
border-radius: 5px 0 0 5px;
}
If for whatever reasons this is not possible or it doesn't work - replace div elements but I don't know if this will work in every browser ...
<div class="form-container">
<form class='send-message'> <input class='message-input' placeholder="Type a message"> </form>
</div>
<div class="black-screen">black</div>
If the problem persists, use Validator w3c to find out how bad it is
... in fact, use Validator no matter what

CSS/HTML: input bar width and button width not the same even though I'm setting it as the same

My assignment is to make a login page, and the inputs and buttons have to have a 320px width, including a 2px border and 15px padding. I create two classes for the inputs and button, and in CSS I am specifying these widths for both but the button keeps coming out shorter. Right now it's coming out like this: 1
I'm fairly new at this so I apologize if my code is messy/this might seem like a silly question.
Here's my code:
HTML
<form class="signup" action="/signup/" method ="post">
<fieldset name="sign-up">
<legend>Sign up</legend>
<div class="input">
<label for="email">Email</label></br>
<input class="inputbar" placeholder="foo#bar.com" type="email" name="email" id="email" required/></br>
<label for="password">Password</label></br>
<input class="inputbar" placeholder="1234passw0rd" type="password" name="password" id"password" required/></br>
</div>
</fieldset>
<button type="signupbutton">Sign up</button>
</form>
CSS
.signup {
width: 320px;
padding: 40px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: white;
}
.signup fieldset{
border: none;
}
.input{
text-align: left;
}
.inputbar, button{
border: 2px solid lightgrey;
border-radius: 2px;
padding: 15px;
width: 250px;
}
button{
background-color: mediumseagreen;
color: white;
}
Thanks everyone!
It's best to set the container width and then the elments inside to 100%. Using box-sizing: border-box; is key here.
* {
box-sizing: border-box;
}
.signup {
width: 320px;
padding: 40px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: white;
}
.signup fieldset{
border: none;
padding: 0;
margin: 0;
}
.input{
text-align: left;
}
.inputbar, button{
border: 2px solid lightgrey;
border-radius: 2px;
padding: 15px;
width: 100%;
}
button{
background-color: mediumseagreen;
color: white;
}
.inputbar, button{
border: 2px solid lightgrey;
border-radius: 2px;
padding: 15px;
width: 250px;
}
It appears you have set the width of the button to 250px. Try changing that to 320px.
Remove the text align on th input class
.input{
text-align: left;
}
and do this
.signup .input label {
text-align: left;
display: inline-block;
width: 100%;
padding-left: 20px;
}
Aside that the everything is working alright in chrome
what browser are you using to run your test?
this is whati have on my browser