I'm working my way though a beginners HTML and CSS tutorial and I'm unable to get my "T Shirt Size" selector to be on the same line with the selection.
I really would like someone to help me with this. I need to be able to get the tshirt size selector on the same line as my the dropdown list when in full-screen so that it looks good!
Here is the outcome that I'm looking for:
Here is the outcome I'm getting:
Here is my CSS Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #5D6063;
background-color: #EAEDF0;
font-family: "Helvecta", "Arial", sans-serif;
font-size: 16px;
line-height: 1.3;
display: flex;
flex-direction: column;
align-items: center;
}
.speaker-form-header {
text-align: center;
background-color: #F6F7F8;
border: 1px solid #D6D9DC;
border-radius: 3px;
width: 80%;
margin: 40px 0;
padding: 50px;
}
.speaker-form-header h1 {
font-size: 30px;
margin-bottom: 20px;
}
.speaker-form {
background-color: #F6F7F8;
border: 1px solid #D6D9DC;
border-radius: 3px;
width: 80%;
padding: 50px;
margin: 0 0 40px 0;
}
.form-row {
margin-bottom: 40px;
display: flex;
justify-content: flex-start;
flex-direction: column;
flex-wrap: wrap;
}
.form-row input[type='text'],
.form-row input[type='email']{
background-color: #FFFFFF;
border: 1px solid #D6D9DC;
border-radius: 3px;
width: 100%;
padding: 7px;
font-size: 14px;
}
.form-row label {
margin-bottom: 15px;
}
#media only screen and (min-width: 700px) {
.speaker-form-header,
.speaker-form {
width: 600px;
}
.form-row {
flex-direction: row;
align-items: flex-start; /* To avoid stretching */
margin-bottom: 20px;
}
.form-row input[type='text'],
.form-row input[type='email'],
.form-row select,
.form-row textarea {
width: 250px;
height: initial;
}
.form-row label {
text-align: right;
width: 120px;
margin-top: 7px;
padding-right: 20px;
}
.legacy-form-row {
margin-bottom: 10px;
}
.legacy-form-row legend {
width: 120px;
text-align: right;
padding-right: 20px;
}
.legacy-form-row legend {
float: left;
}
}
.form-row input[type='text']:invalid,
.form-row input[type='email']:invalid {
border: 1px solid #D55C5F;
color: #D55C5F;
box-shadow: none; /* Remove default red glow in Firefox */
}
.legacy-form-row {
border: none;
margin-bottom: 40px;
}
.legacy-form-row legend {
margin-bottom: 15px;
}
.legacy-form-row .radio-label {
display: block;
font-size: 14px;
padding: 0 20px 0 10px;
}
.legacy-form-row input[type='radio'] {
margin-top: 2px;
}
.legacy-form-row .radio-label,
.legacy-form-row input[type='radio'] {
float: left;
}
.form-row select {
width: 100%;
padding: 5px;
font-size: 14px;
float: right;
}
and html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<title>Speaker Submission</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<header class='speaker-form-header'>
<h1>Speaker Submission</h1>
<p><em>Want to speak at our fake conference? Fill out this form!</em></p>
</header>
<form action='' method='get' class='speaker-form'>
<div class='form-row'>
<label for='full-name'>Name</label>
<input id='full-name' name='full-name' type='text'/>
</div>
<div class='form-row'>
<label for='email'>Email</label>
<input id='email'
name='email'
type='email'
placeholder='joe#example.com'/>
</div>
<fieldset class='legacy-form-row'>
<legend>Type of Talk</legend>
<input id='talk-type-1'
name='talk-type'
type='radio'
value='main-stage' />
<label for='talk-type1' class='radio-label'>Main Stage</label>
<input id='talk-type-2'
name='talk-type'
type='radio'
value='workshop'
checked />
<label for='talk-type-2' class='radio-label'>Workshop</label>
</fieldset>
<div class='form-row'>
<label for='t-shirt'>T-Shirt Size</label>
<select id='t-shirt' name='t-shirt'>
<option value='xs'>Extra Small</option>
<option value='s'>Small</option>
<option value='m'>Medium</option>
<option value='l'>Large</option>
</select>
</div>
</form>
</body>
</html>
Your .form-row select style has width: 100%; which makes the select element fill the entire width of the parent div. So you just need to remove that line:
.form-row select {
/* remove the following line */
/* width: 100%; */
padding: 5px;
font-size: 14px;
float: right;
}
JS Fiddle: https://jsfiddle.net/cr2oj1zt/1/
It is because you set width value equal 100%. It will take the space of your div container. If you don't want it to equal the div width, you must specify value for select element. For example:
.form-row select {
width: 30%; /* or other value you want apply for the select element */
padding: 5px;
font-size: 14px;
float: right;
}
Related
This is the current state:
The goal is to have the labels the same width as the selects/inputs. Currently all i do is not achieving anything, could any one help me fix this so i get it display properly?
I already tried formatting the label div same as the box div but i guess because of the button size it all gets messed up
My HTML Code:
<div id="function-header">
<label id="quartal-label">Quartal</label>
<label id="function-label">Funktion</label>
<label id="substitution-label">Stellvertretung</label>
<label id="fulfillment-label">Erfüllungsgrad</label>
<div>
<div id="function-box">
<div id="function-wrapper">
<select class="quartal-select"></select>
<select class="function-select"></select>
<select class="substitution-select"></select>
<input class="fulfillmentLevel-input" placeholder="Erfüllungsgrad..">
<button class="removeButton" type="button"><i class="fa-solid fa-trash-can"></i></button>
</div>
</div>
My CSS Code:
#Funktion #function-header {
display: flex;
margin: 0px 10px;
width: calc(100% - 20px - 65.0px);
justify-content: left;
}
#Funktion #function-header label {
display: inline-block;
padding: 15px;
font-size: 15px;
color:#666666;
}
#quartal-label {
width: calc(20%);
}
#function-label {
width: calc(30%);
}
#substitution-label {
width: calc(20%);
}
#fulfillment-label {
width: calc(30%);
}
#Funktion .function-box {
display:flex;
flex-direction: row;
margin: 0px 10px;
width: calc(100% - 20px);
justify-content: left;
}
.quartal-select {
width: 25%;
}
.function-select {
width: 50%;
}
.substitution-select {
width: 25%;
}
.fulfillmentLevel-input {
margin-right: 10px;
}
button {
padding: 0px 16px 0px 16px;
width: 55.5px;
background: none;
font-size: 20px;
}
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%;
}
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
I want to display an input box in html and 2 small buttons to the right, one on top of each other. Something like this
https://jsfiddle.net/danaya/yw94f0Lt/3/
The html code is simple
<div class="list">
<div class="name">product</div>
<div class="input">
<input type="text" size="3" value="1">
<div class="inc">+</div>
<div class="dec">-</div>
</div>
<div class="price">2.99</div>
</div>
And this is the css
.list {
display: flex;
}
.name,
.input,
.price {
padding: 10px 10px;
border: 1px solid red;
}
.name {
width: 50%;
}
.input,
.price {
text-align: right;
width: 25%;
}
.input {
position: relative;
top: -5px;
}
input {
line-height: 25px;
}
.inc,
.dec {
display: block;
position: absolute;
width: 13px;
height: 13px;
background-color: #999;
text-align: center;
color: #fff;
line-height: 12px;
}
.inc {
top: 11px;
left: 40px;
}
.dec {
top: 25px;
left: 40px;
}
As it is right now, when I resize the window, the div.input is resized and so the buttons, being related to the input, lose their position by the input element.
I need to keep the flex display in the .list element, but other than that I can change anything. I also need the buttons to not increase the width of the div.input element, that's why I'm using the position:relative.
Any ideas?
Thanks
Would this work for you?
.list {
display: flex;
align-items: center;
}
.name,
.price {
padding: 0 10px;
}
.input, input {
box-sizing: border-box; /*to set the equal height to bot .input and input*/
height: 31px; /*13 + 13 (buttons) + 5 (paddings for buttons) = 31px */
}
.input {
position: relative;
/*width: 25%; Use this if you want to increate the width of your div.input*/
}
input {
padding-right: 15px; /* 15px set so that input characters do not go underneath the + and - buttons */
width: 100%; /* set 100% so that input will take 100% width of its parent size */
}
.inc,
.dec {
box-sizing: border-box;
display: block;
position: absolute;
width: 13px;
height: 13px;
background-color: #999;
text-align: center;
color: #fff;
line-height: 12px;
}
.inc {
top: 2px;
right: 2px;
}
.dec {
bottom: 2px;
right: 2px;
}
<div class="list">
<div class="name">product</div>
<div class="input">
<input type="text" size="3" value="1">
<span class="inc">+</span>
<span class="dec">-</span>
</div>
<div class="price">2.99</div>
</div>
I don't know how to fix this problem. In my HTML form I have 2 ´input[type="date"]` fields like this:
<div class="search-wrapper">
<div class="advanced-search">
<form>
<input type="text" placeholder="Dateiname">
<input type="text" placeholder="Benutzer">
<input type="date" placeholder="Erstelldatum">
<input type="date" placeholder="Änderungsdatum">
<textarea placeholder="Erste Zeile"></textarea>
<select>
<option disabled selected>Kategorie</option>
<option>Rechnungen</option>
<option>Notizen</option>
</select>
<select>
<option disabled selected>Projekt</option>
</select>
<img id="advSearchSubmit" src="icons/search.png" />
</form>
</div>
</div>
And the corresponding SCSS:
.search-wrapper {
position: fixed;
.advanced-search {
display: none;
float: right;
width: 600px;
padding: 40px 10px 10px 10px;
background-color: $accent-color;
color: $font-color-secondary;
overflow: hidden;
img {
vertical-align: top;
width: 25px;
height: 25px;
margin-top: 10px;
cursor: pointer;
}
input[type="text"], input[type="date"], select, textarea {
vertical-align: top;
width: 110px;
height: 25px;
margin: 10px;
padding: 2px;
background: $data-background-color;
color: #555;
border: 1px solid $background-color;
outline-color: $main-color;
font-size: 100%;
}
textarea {
height: 2em;
width: 41.2em;
}
}
}
As soon as I enter a date in the input field it gets shifted to the left and is not fully visible. Here is what it looks like when I don't have anything entered in the input field and when there is something entered:
Date Input Screenshot
How do I fix this behaviour?
I managed to fix it myself. I just had to increase the width of the input[type="date"] field to at least 120px
.search-wrapper and .advanced-search missing closing braces
remove display none property if you are using it without js
.search-wrapper {
position: fixed;
}
.advanced-search {
float: right;
width: 600px;
padding: 40px 10px 10px 10px;
background-color: $accent-color;
color: $font-color-secondary;
overflow: hidden;
}
img {
vertical-align: top;
width: 25px;
height: 25px;
margin-top: 10px;
cursor: pointer;
}
input[type="text"], input[type="date"], select, textarea {
vertical-align: top;
width: 110px;
height: 25px;
margin: 10px;
padding:0px 4px;
box-sizing: border-box;
padding: 2px;
background: $data-background-color;
color: #555;
border: 1px solid $background-color;
outline-color: $main-color;
font-size: 100%;
}
input[type="date"]{
width:140px; }
textarea {
height: 2em;
width: 41.2em;
}