I would like to create a div that contains a text input and a button input on the same line.
The width of the div will be set by me. These two inputs have to fill the div in the way that the button input's width is to be set by it's value, and the rest of the space to be filled by the text input.
I want something like:
<div style="width: 300px; background-color: orange">
<input type="text" />
<input type="button" value="Save" />
</div>
Sorry for my bad English.
Demo: http://jsfiddle.net/abhitalks/Y64ny/
You need to wrap your text input in another div. Apply display:table to the container div and display:table-cell and width:100% to the wrapper div.
HTML:
<div style="width: 300px; background-color: orange">
<div class="t"> <!-- This is the wrapper div around the text input -->
<input type="text" />
</div>
<input type="button" value="Save" />
</div>
CSS:
div { display: table; }
div.t {
display: table-cell;
width: 100%;
}
div.t > input {
width: 100%;
}
Update:
As the Op (#ChocapicSz) states in the comment below, adding box-sizing:border-box will fix the paddings.
Updated fiddle: http://jsfiddle.net/abhitalks/Y64ny/1/
http://jsfiddle.net/8FC2t/
<div>
<input type="text" class='save'/>
<input type="button" value="Save" />
</div>
<br>
<div>
<input type="text" class='dns' />
<input type="button" value="Do not Save" />
</div>
div{
width:200px;
background-color:orange;
}
.dns{
width:calc(100% - 105px)
}
.save{
width:calc(100% - 65px)
}
div>input[type='button']{
float:right;
}
Using position absolute and slightly restructuring the css might work better for you.
Also using <button> instead of <input type="button"> makes life a little easier to style.
I've created an example at codepen for you to see.
HTML:
<div class="container" style="width: 300px">
<input type="text" class="text_input" />
<button value="Save" class="btn">CLICK</button>
</div>
<div class="container" style="width: 500px">
<input type="text" class="text_input" />
<button value="Save" class="btn">CLICK</button>
</div>
<div class="container" style="width: 200px">
<input type="text" class="text_input" />
<button value="Save" class="btn">CLICK</button>
</div>
CSS:
.container {
position: relative;
border: 3px solid orange;
height: 50px;
overflow: hidden;
margin-bottom: 10px;
}
.text_input {
height: 44px;
width: 60%;
padding: 0;
line-height: 30px;
font-size: 20px;
padding: 0;
margin: 3px;
margin-left: 20px;
border: none;
}
.text_input:focus {
outline: none;
}
.btn {
position: absolute;
height: 50px;
line-height: 50px;
right: 0;
top: 0;
margin: 0;
padding: 0;
background: orange;
color: white;
border: none;
width: 30%;
font-weight: bold;
}
.btn:hover {
color: black;
cursor: pointer;
}
Gives you this:
See it working on codepen
<style>
.f-lft {
float:left;
border:2px solid orange;
}
</style>
<body>
<div style="width: 300px;">
<div>
<input class="f-lft"type="text" style="width:80%"/>
<input class="f-lft" type="button" value="Save"/>
</div>
</div>
</body>
I have attached a fiddle for you http://jsfiddle.net/GLAee/
I have done a single one. Remaining you better practice.
Edited :
add width of text field in percent
Another way is to use display flex on their parent.
<div class="parent" style="width: 300px; background-color: orange">
<input type="text" />
<input type="button" value="Save" />
</div>
CSS
.parent{
display: flex;
width: 100%;
height: 50px;
}
input[type="text"] {
height: 50px;
width: 90%;
border: none;
outline: none;
padding: 10px;
font-size: 14px;
}
input[type="button"] {
width: 10%;
height: 50px;
border: none;
outline: none;
background-color: orange;
}
Note, you can play around with the font-size and height to have the desired height and font-size that you want.
Related
.popup {
position: relative;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
I have above codes in my css file that added in html head <link href="/static/styles.css" rel="stylesheet">
In my html there where many uses of .popupand .popuptext and I wont change above styles.
In the html code is here↓
<div class="popup" style="display: inline"><div class="popuptext" id="tableHeader">
<label>data type</label>
<br>
<input type="checkbox" name="not_null"> NOT NULL
<br>
<input type="checkbox" name="unique"> UNIQUE
<br>
<button class="btn btn-danger" type="submit" name="delete">Delete</button>
</div></div>
All elements above are aligned as center.
But I need centralize the Delete button and the label and other input elements be left aligned.
As I consist change style from html code and stylesheet has other uses, I have tried below↓
<div class="popup" style="display: inline"><div class="popuptext" id="tableHeader">
<label>data type</label>
<br>
<span style="text-align: left;"><input type="checkbox" name="not_null"> NOT NULL</span>
<br>
<span style="text-align: left;"><input type="checkbox" name="unique"> UNIQUE</span>
<br>
<button class="btn btn-danger" type="submit" name="delete">Delete</button>
</div></div>
But input elements remain centralist and not left aligned!
I need input get left aligned only with change style settings in html element attributes.
Leaving the html as it is, you could style the .popuptext children as display:block so that they will take the whole width. Then you can style indipendently its parts:
The <label> element - its content gets centered with text-align: center
The <input> elements - they get aligned to left with text-align: left; but just because we are actually styling their parents
<span>
The <button> element - this required margin: 0 auto meaning that the left
and right margins will be set to the maximum available space in the
row
Everything else in the styles here in the demo is for decoration purpose.
.popup{
border: solid;
width: 10em;
background: lightgray;
}
.popuptext > *{
display: block;
}
.popuptext > span{
text-align: left;
}
.popuptext > label{
text-align: center;
margin-bottom: .5em;
}
.popuptext > button{
margin: .5em auto;
border: none;
background: red;
color: white;
padding: .8em .6em;
border-radius: 5px;
}
<div class="popup">
<div class="popuptext" id="tableHeader">
<label>data type</label>
<span><input type="checkbox" name="not_null"> NOT NULL</span>
<span><input type="checkbox" name="unique"> UNIQUE</span>
<button class="btn btn-danger" type="submit" name="delete">Delete</button>
</div>
</div>
You can restructure your HTML and CSS as such:
.popup .popuptext {
width: 160px;
background-color: #555;
color: #fff;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
}
.popuptext .checkbox-holder {
width: fit-content;
margin: auto;
}
<div class="popup" style="display: inline">
<div class="popuptext" id="tableHeader">
<div style="text-align: center;"><label>data type</label></div>
<div class="checkbox-holder">
<div><input type="checkbox" name="not_null" id="not_null"> <label for="not_null">NOT NULL</label></div>
<div><input type="checkbox" name="unique" id="unique"> <label for="unique">UNIQUE</label></div>
</div>
<div style="text-align:center"><button class="btn btn-danger" type="submit" name="delete">Delete</button>
</div>
</div>
</div>
I am aiming to make text boxes that adapt to the size of the browser window. I'm using css flex properties. The textboxes in the code below do not adapt with the screen size, and I'm not sure exactly why. I believe it might be because I have an outer div that's interacting with the css properties for the actual textboxes.
One other thing that I'm not sure how to do, is to align the button to the right edge of the text boxes, so that the button does not go past the textboxes. Because the textboxes are not dynamically reshaping their width I'm not sure how to proceed with the button.
.search_btn {
width: 150px;
padding: 10px;
background-color: black;
color: white;
border: 0;
}
.search_btn:hover {
box-shadow: 1px 1px 1px grey;
/*background-color: darkblue;*/
}
input {
justify-content: flex-left;
padding: 5px;
position: absolute;
margin-left: 200px;
}
.txt_box {
display: flex;
width: 80%;
}
.search_section {
/*padding: 5px;*/
padding-top: 10px;
padding-bottom: 10px;
}
.search_options {
padding-bottom: 10px;
}
.row {
display: flex;
flex-direction: row;
align-items: left;
justify-content: left;
padding-top: 10px;
padding-bottom: 10px;
}
<form action="/action_page.php">
<div class="search_section">
<div class="search_options">
<h3 class="tit_label" for="fname">SHAPES</h3>
<div class="row">
<label class="left_label" for="fname">average square:</label>
<!-- <div id="wrapper" -->
<input class="txt_box" type="text" id="fname" name="fname" />
</div>
<div class="row">
<label class="left_label" for="lname">average circle:</label>
<input class="txt_box" type="text" id="lname" name="lname" />
</div>
</div>
<div class="form-buttons">
<input class="search_btn" type="submit" value="calculate" />
</div>
</div>
</form>
You need to remove position: absolute from input to make it flex-item. Since you have made absolute positioned then it comes out of the normal flow, then you don't need to use display: flex on input.
No need to use the below style, since txt_box will be a flex item then it will adjust its width accordingly
.txt_box { // Not Required
display: flex;
width: 80%;
}
There is no such property justify-content: flex-left;. There is justify-content: flex-start; instead
.search_btn {
width: 150px;
padding: 10px;
background-color: black;
color: white;
border: 0;
}
.search_btn:hover {
box-shadow: 1px 1px 1px grey;
}
input {
padding: 5px;
}
.search_section {
padding-top: 10px;
padding-bottom: 10px;
}
.search_options {
padding-bottom: 10px;
}
.row {
display: flex;
padding-top: 10px;
padding-bottom: 10px;
}
.left_label {
flex-basis: 20%;
}
.txt_box {
margin: 0;
flex-basis: 80%;
}
<form action="/action_page.php">
<div class="search_section">
<div class="search_options">
<h3 class="tit_label" for="fname">SHAPES</h3>
<div class="row">
<label class="left_label" for="fname">average square:</label>
<input class="txt_box" type="text" id="fname" name="fname" />
</div>
<div class="row">
<label class="left_label" for="lname">average circle:</label>
<input class="txt_box" type="text" id="lname" name="lname" />
</div>
</div>
<div class="form-buttons">
<input class="search_btn" type="submit" value="calculate" />
</div>
</div>
</form>
So I am making a website for class, Ive got one more page to make and its the login page. The thing is, it seems I cant move forms and things in forms around like I can with text boxes. what I want to do is sort of like the steam login page which I will link here. Basically I want box in the middle of the page with a text box for username and password on the left side of the box, then I want a thin line going down the middle of the box separating the two halves and on the right side I want three boxes one for the username and two for the password. The thing is I cant seem to move what I have to the left side of the box yet. https://store.steampowered.com/login/ thats the steam login site itll give you an idea of what i want to do.
Here is what I have so far, I just want to move the grey box down a bit and then put the form that i have now on the left side of the box and write a new form on the right side of the box with a dividing line in the middle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Portal 2 Launch site</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<h1> <img src="logo.png" class="center"><h1>
</head>
<body>
<!-- The navigation menu -->
<div class="navbar" style="width 100%">
Home
About
Media
<div class="subnav" style="width:20%">
<button class="subnavbtn" style="width: 100%">OtherGames</button>
<div class="subnav-content">
Half Life
Team Fortress 2
Counter strike: Global Offensive
</div>
</div>
Account
</div>
<center>
<div class="container">
forgot password?
<form>
<div class="input-wrap">
<label>Username:</label><br>
<input type="text">
</div>
<div class="input-wrap">
<label>Password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form1" value="Submit">Submit</button
</div>
<center>
</body>
</html>
body {
background-color: black;
color: black;
opacity: 300;
}
.container {
display: flex;
flex-direction: column;
background: gray;
border: 10px black;
margin:0;
width: 420px;
padding: 20px
}
.container1 {
display: flex;
flex-direction: column;
background: gray;
border: 10px black;
margin:0;
width: 620px;
padding: 20px
}
.input-wrap1 {
width:620px;
}
form {
display: flex;
flex-direction: column;
width: 200px;
}
.input-wrap {
margin: 5px;
}
input {
background-color: white;
border: 1px solid #4C4B63;
}
.submit{
background: #333;
color: white;
border-style: outset;
border-color: #0066A2;
height: 50px;
width: 100px;
font: bold 15px arial, sans-serif;
text-shadow:none;
cursor: pointer;
}
.submit:hover {
background: green;
color: #eee;
border: 1px solid #eee;
text-shadow:none;
cursor: pointer;
}
I leave you a snippet with the idea you have for the login. You will have to tinker with it to fit your own styles. I leave you a link to a little game to learn flexbox, which I use on the snippet.
.wrapper {
height: 500px;
display: flex;
align-items: center;
justify-content: center;
background-color: slategrey;
}
.login {
display: flex;
width: 400px;
height: 300px;
background-color: lightgrey;
padding: 10px;
}
.side {
flex: 1
}
.separator {
flex: 0;
border-left: 1px solid black;
width: 2px;
height: 250px;
margin: auto 16px;
}
.side {
flex: 1;
}
<div class="wrapper">
<div class="login">
<div class="side">
<form>
<div>
<label>Username:</label><br>
<input type="text">
</div>
<div>
<label>Password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form1" value="Submit">Submit</button>
</div>
<div class="separator"></div>
<div class="side">
<form>
<div>
<label>Username:</label><br>
<input type="text">
</div>
<div>
<label>Password:</label><br>
<input type="password">
</div>
<div>
<label>Confirm password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form2" value="Submit">Submit</button>
</div>
</div>
</div>
I want to have something like this
instead I
My html code is this
`
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<form class="quote" action="javascript:void(0);">
<span class="close">×</span>
<article class="goright">
<input type="name" name="Name" placeholder="" style="width: 140px"><br>
<input type="lastname" name="lastname" placeholder="" style="width: 140px"><br>
<input type="Place" name="Place" placeholder="" style="width: 140px"><br>
</article>
<aside id="sidebar">
<textarea type="name" name="Name" placeholder="" style="height: 80px"></textarea> <br>
</aside>
</form>
</div>
</div>
</div>
And this is my CSS
.modal {
display: none;
position: relative;
z-index: 1;
padding-top: 100px;
left: 0;
top: -300px;
float: right;
width: 40%;
height: 40%;
overflow: auto;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin:auto;
padding: 0;
border: 1px solid #888;
width: 80%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4;
overflow: hidden;
}
article#goright
{
float: right;
}
aside#sidebar
{
float: left;
}
aside#sidebar .quote input, aside#sidebar .quote textarea
{
width: 90%;
padding: 5px;
}
so I tried to look up this thing here but I could not find an answer that works for me, I tried a lot of variations but nothing really works and I can not get the result, I only managed to get one side that is floated right and aside bar that is left but aside is under previous bar.
So, can you give me a hint or code that can help me achieve the desired result ?
You don't need to use <aside> and other CSS tweaks to achieve the structure.
Just move the <textarea> above the <input> tags and add a float:left class and float:right class to them respectively.
The width of the form is inherited from the .modal class.
Also <input> tags type attribute used are invalid. Supporting type attributes are as mentioned in: https://www.w3schools.com/tags/att_input_type.asp
Also <textarea> does not have a type attribute by default.
.modal {
width: 40%;
height: 40%;
overflow: auto;
}
.align-right {
float: right;
}
.align-left {
float: left;
}
.modal-content {
background-color: #fefefe;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4;
}
input {
margin-bottom: 5px;
}
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<form class="quote" action="javascript:void(0);">
<textarea name="Name" placeholder="Textarea" style="height: 80px" class="align-left"></textarea>
<input type="text" name="Name" placeholder="Input A" style="width: 140px" class="align-right" />
<input type="text" name="lastname" placeholder="Input B" style="width: 140px" class="align-right" />
<input type="text" name="Place" placeholder="Input C" style="width: 140px" class="align-right" />
</form>
</div>
</div>
</div>
Here's an example of what you're trying to achieve -
.wrapper {
max-width: 500px;
}
.textarea-wrapper,
.input-wrapper {
float: left;
width: calc(50% - 10px);
}
.textarea-wrapper {
margin-right: 20px;
}
.textarea {
width: 100%;
height: 90px;
}
.input {
margin-bottom: 16px;
}
<div class="wrapper">
<div class="textarea-wrapper">
<textarea class="textarea"></textarea>
</div>
<div class="input-wrapper">
<input type="text" class="input" placeholder="Text 1">
<input type="text" class="input" placeholder="Text 2">
<input type="text" class="input" placeholder="Text 2">
</div>
</div>
Here's a link.
https://codepen.io/aphextwix/pen/MmZxjR
Take a look at this fiddle: https://jsfiddle.net/5xw7ssa4/
But you have some mistakes in your css:
Height should not be in %.
Both container must float to right.
Do not forget to clear:both after last floating element.
article#goright must be article.goright
In your html you have type="name" for example. It must be type="text".
Hi there you should review both your html markup and css as well bellow are my suggestions
css
.modal {
position: relative;
z-index: 1;
padding-top: inherit;
width: 50%;
height: 123px;
margin: 0 auto;
margin-top: 20px;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin:auto;
padding: 0;
border: 1px solid #888;
width: 80%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4;
}
form {
width: 100%;
padding: 10px 0px;
}
.close{
position: absolute;
right: 0;
color: #fff;
background: #000;
padding: 5px;
z-index: 3;
}
/*a classis identified by a "." an id is identified by an "#" so article#goright is wrong you should have wrote article.goright*/
article.goright {
float: left;
width: 50%;
}
aside#sidebar {
float: left;
width: 50%;
}
/* .quote is the form class aside is inside the form so instead of aside#sidebar .quote textarea you should write .quote aside#sidebar textarea */
.quote aside#sidebar input, .quote aside#sidebar textarea
{
width: 90%;
padding: 5px;
}
article.goright input {
width: 80%;
margin-bottom: 5px;
height: 20px;
}
/*very important to solve the issue*/
.clear{
width: 100%;
height: 0;
clear: both;
float: none;
}
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Testing Page</title>
</head>
<body style="width:100%; margin: 0 auto; padding: 0; text-align: center;">
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<form class="quote" action="javascript:void(0);">
<span class="close">×</span>
<aside id="sidebar">
<textarea type="name" name="Name" placeholder="" style="height: 80px"></textarea> <br>
</aside>
<article class="goright">
<input type="name" name="Name" placeholder=""><br>
<input type="lastname" name="lastname" placeholder=""><br>
<input type="Place" name="Place" placeholder=""><br>
</article>
<!-- this is the div you need to have myModal div cover the div inside it since they are floating left -->
<div class="clear"></div>
</form>
</div>
</div>
</div>
</body>
</html>
Below is the code, two buttons in one div.
<div style="position:relative; width: 300px; height: 30px; border: 1px solid;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
</div>
How to horizontally center the buttons in fixed sized did ?
Adding text-align:center; CSS to the <div> will center the buttons. You should also consider separating the style from the content, which amongst other reasons, reduces the duplication. For example
CSS
div {
position:relative;
width:300px;
height:30px;
border:1px solid;
text-align:center;
}
input {
position:relative;
width:70px;
height:30px;
}
HTML
<div>
<input type="button" value="ok"/>
<input type="button" value="ok"/>
</div>
Edit: The official definition for text-align states:
The text-align property describes how inline-level content of a block container is aligned
so it will centre all inline level elements and <input> is an inline element.
Try this:
<div style="position:relative; width: 300px; height: 30px; border: 1px solid; text-align:center;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
</div>
Give text-align:center; to your main div & don't need to use inline css we should define css classes through external CSS files and here we don't need any kind of positioning we can do easily by simple CSS
**CSS**
div {
width: 300px;
height: 30px;
border: 1px solid;
text-align:center;
}
.button {
width: 70px;
height: 30px;
}
HTML
<div>
<input type="button" value="ok" class="button">
<input type="button" value="ok" class="button">
</div>
demo :- http://jsbin.com/evomik/10/edit
<div style="position:relative; width: 300px; height: 30px; border: 1px solid;">
<div id="button_container" style="margin-left:auto; margin-right:auto;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
</div>
</div>