I want to design a div that has an input box and some other elements. I want to use bootstrap to give a dynamic size to input box that change its width with changing window width and in mobile devices show in two line.
like this:
this is an example code without any class:
<form>
<div>
<input type="submit" value="search">
<select>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
some text
</div>
<div>
<input type="text" placeholder="search text input">
</div>
I implemented the first image in your post and it below in the code.
Try running it, dont forget to expand snippet
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form>
<div class="row">
<div class="col-sm-2">
<input type="submit" class="form-control" value="search">
</div>
<div class="col-sm-3">
<select class="form-control">
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
</div>
<div class="col-sm-2">
some text</div>
<div class="col-sm-2">
<input type="text" class="form-control" placeholder="search text input">
</div>
</div>
In order to achieve your requirement you need to go for the Flexbox display property to achieve this using pure CSS method. Here you are re arranging the UI depending up on the screen resolutions. Flexbox display provides you the best method to set the opder of the div according to your preference. I have attached the sample snippet along with this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.FormContainer {
width: 100%;
}
.Class1 {
width: 50%;
float: left;
}
.Class2 {
width: 50%;
float: right;
}
#media only screen and (max-width: 768px) {
.FormContainer {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.Class1 {
order: 2;
width: 100%;
float: right;
}
.Class2 {
order:1;
width: 100%;
float: left;
}
}
</style>
<body>
<form class="FormContainer">
<div class="Class1">
<input type="submit" value="search">
<select>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
some text
</div>
<div class="Class2">
<input type="text" placeholder="search text input">
</div>
</form>
</body>
</html>
Hope this will work fine for you.
You can find more about Flexbox here http://css-tricks.com/snippets/css/a-guide-to-flexbox/ and http://philipwalton.github.io/solved-by-flexbox/.
Also look at this solution which explains more about Flexbox
Related
So in my code I have 2 divs that exists inside a Parent div. When I open the code with live server or from the file folder and inspect it in google or mozilla for some reason my divs were combined into the other div.
Why does it do that? By the way I'm trying to align the search div to the right (school task)
HTML BELOW
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="teht14.css" />
</head>
<body>
<div id="base">
<div id="links">
Savonia (linkki)
<select name="" id="">
<option value="">Valitse</option>
<option value="">Ohjeet</option>
<option value="">Yhteystiedot</option>
</div>
<div id="search">
<form method="get" id="search">
<input type="text" placeholder="Search">
<input type="submit" value="Search">
</form>
</div>
</div>
</body>
</html>
CSS BELOW
#base {
display: flex;
background-color: rgb(196, 196, 196);
padding: 3em 0 3em 0;
justify-content: space-between;
}
a {
text-decoration: none;
}
I am expecting that the divs are separated in the browser as it is in the code but mainly I am trying to align the search div to the right. This is a school task.
You are missing a closing <select> tag. Some browsers try to correct the error and depending on what it is, respond differently. That is why you were seeing what you were seeing.
Below is what your code should be. Good luck. 🤞
#base {
display: flex;
background-color: rgb(196, 196, 196);
padding: 3em 0 3em 0;
justify-content: space-between;
}
a {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="teht14.css" />
</head>
<body>
<div id="base">
<div id="links">
Savonia (linkki)
<select name="" id="">
<option value="">Valitse</option>
<option value="">Ohjeet</option>
<option value="">Yhteystiedot</option>
</select>
</div>
<div id="search">
<form method="get" id="search">
<input type="text" placeholder="Search">
<input type="submit" value="Search">
</form>
</div>
</div>
</body>
</html>
This question already has answers here:
Why can't <fieldset> be flex containers?
(7 answers)
Closed 2 years ago.
Based on everyhting I've googled, flexbox should be displaying in a horizontal row by default, but I feel like I've tried everything and can't get this to work. I will post the code below. If you remove the "display: flex;" from the css it looks similar to how I want it to look, but I want the heights of the 3 divs to all be even, which is why I want to use flexbox. Any help would be appreciated.
/*PARENT*/
form fieldset{
display: flex;
flex-direction: row;
padding: 5px 0px;
border: 0;
}
/*CHILDREN*/
form fieldset > div{
display: inline-block;
width: 25%;
text-align: center;
border: solid thin black;
}
/*STYLES*/
form fieldset:first-of-type > div > p{
text-decoration: underline;
font-size: 1.2em;
}
form fieldset:first-of-type > div > div{
display: inline-block;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
form fieldset:first-of-type div p{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<fieldset id="fieldset">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</fieldset>
</form>
</body>
</html>
Its fieldset tag that is not respond to flex container , you should use other element if you want flex to be worked. i have used below section tag to solve you are free to try other tags.
/*PARENT*/
form fieldset{
display: flex;
flex-direction: row;
padding: 5px 0px;
border: 0;
}
/*CHILDREN*/
form section > div{
display: inline-block;
width: 25%;
text-align: center;
border: solid thin black;
}
/*STYLES*/
form fieldset:first-of-type > div > p{
text-decoration: underline;
font-size: 1.2em;
}
form fieldset:first-of-type > div > div{
display: inline-block;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
form fieldset:first-of-type div p{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<section id="fieldset">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</section>
</form>
</body>
</html>
flex with fieldset will not go very well. I just used a wrapper and all other things will be taken care by flex(I hope that is not an issue here).
Remove unnecessary elements, justify-content will take care the things in your case.
make things simpler than making it complicated.
.MainDiv {
display: flex;
width: 100%;
justify-content: space-around;
}
.MainDiv>div {
width: 25%;
text-align: center;
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<fieldset id="fieldset">
<div class="MainDiv">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
I have created a login page but its not responsive and for achieving that I have messed up my entire design.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box
{
position: center;
top: 17;
left: 17;
}
.logo
{
position: absolute;
top:50px;
left: 100px;
border-right: 2px solid gray;
}
</style>
</head>
<body> <div class="container">
<h2>ADMIN PANEL LOGIN</h2>
<form>
<div>
<div class="form-group box">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<img src="back_box.png" class="box" width="900" height=" 400" />
<img src="logo_written.png" class="logo" width="250" height="300" />
</div>
</form>
</body>
</html>
i have added bootstrap classes too but i am unable to achieve my goal of responsive design
For Bootstrap you need to add bootstrap file source just add this to your head section.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
just add one link cdn of bootstrap.css..
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
.box
{
position: center;
top: 17;
left: 17;
}
.logo
{
position: absolute;
top:50px;
left: 100px;
border-right: 2px solid gray;
}
</style>
</head>
<body> <div class="container">
<h2>ADMIN PANEL LOGIN</h2>
<form>
<div>
<div class="form-group box">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<img src="back_box.png" class="box" width="900" height=" 400" />
<img src="logo_written.png" class="logo" width="250" height="300" />
</div>
</form>
</body>
</html>
Add this meta tag to your head tag
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
after that you can able to write media query for multiple devices like mobile & tablates...
#media (max-width: 767px) {
/* write css for mobile here */
}
#media (min-width: 768px) and (max-width: 1024px) {
/* write css for tablate here */
}
I can't get to center a component perfectly I want this form to be in the middle and that works, but I can't get the background to be around it perfectly, I've tried millions of things can someone give me a hand?
Thank you in advanced.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Accounts</title>
</head>
<body>
<div class="authform">
<form class="my-form form-horizontal">
<div class="color">
<fieldset>
<label class="col-md-4 control-label" for="username"></label>
<div class="col-md-5">
<center><input id="username" name="username" placeholder="Username" class="form-control input-md a-in" required="" type="text"></center>
</div>
<br><br><br>
<label class="col-md-4 control-label" for="password"></label>
<div class="col-md-5">
<center><input id="password" name="password" placeholder="Password" class="form-control input-md a-in" required="" type="password"></center>
</div>
<br><br><br>
<label class="col-md-4 control-label" for="send"></label>
<div class="col-md-4">
<button id="send" name="send" class="btn">Auth</button>
</div>
</fieldset>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
CSS:
.authform {
padding-top: 15%;
width: 50%;
margin: auto;
float: center;
}
.color {
margin: auto;
float: center;
background-color: #2ecc71;
border-radius: 25px;
border: 2px solid #2ecc71;
padding: 20px;
}
You might want to try FlexBox. In my opinion, it's the single best thing that ever happened to CSS.
See my CodePen for an example using your HTML.
These 3 lines of CSS are the most important:
display: flex;
align-items: center;
justify-content: center;
Edit: My CodePen might not look perfectly centered, but that's because height: 100vh doesn't really work in CodePen. But it'll work outside of CodePen.
Edit 2: Updated codepen
Couldn't you simply apply the background and border to the .authform class or are you going for a different look?
.authform {
padding: 15% 20px 20px;
width: 50%;
margin: auto;
background-color: #2ecc71;
border-radius: 25px;
border: 2px solid #2ecc71;
}
You are using bootstrap for your inputs. Bootstrap's columns must be 12 in every row. In your case you have to add one div after every input.
<label class="col-md-4 control-label" for="username"></label>
<div class="col-md-4">
<center><input id="username" name="username" placeholder="Username" class="form-control input-md a-in" required="" type="text"></center>
</div>
<div class="col-md-4"></div>
or
<label class="col-md-3 control-label" for="username"></label>
<div class="col-md-6">
<center><input id="username" name="username" placeholder="Username" class="form-control input-md a-in" required="" type="text"></center>
</div>
<div class="col-md-3"></div>
Maybe you could try, in css:
text-align:center;
margin-left:(half of the Pixels of the screen)
margin-top:(half of the Pixels of the screen)
How can I center the below form. Right now it is too far over to the right. I want it centered on the page (Moved slightly over to the left). I have tried a lot of different solutions however, I know I am missing something very small here. Thank you.
![<!DOCTYPE HTML>
<head>
<title>Page | Contact</title>
<meta charset="utf-8">
<!-- Google Fonts -->
<link rel='stylesheet' type='text/css' href='css/font.css'/>
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/simple_menu.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/slider.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/contact.css">
<!-- Contact Form -->
<link href="contact-form/css/style.css" media="screen" rel="stylesheet" type="text/css">
<link href="contact-form/css/uniform.css" media="screen" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
<script src="js/contact.js"></script>
<?php include 'common_header.php'; ?>
</head>
<body>
<?php
include 'header.php';
?>
<div id="container">
<div class="one-third"> </div>
<div class="one-third">
<div class="heading_bg">
<h2>Contact Us</h2>
</div>
<form action="#" id="contact_form" class="TTWForm" method="post">
<div id="field1-container" class="field f_100">
<label class="required" for="name">Name</label>
<input name="name" id="name" type="text">
<span id="name_validation" class="error_message"></span>
</div>
<div id="field2-container" class="field f_100">
<label class="required" for="subject">Subject</label>
<input name="subject" id="subject" type="text">
<span id="subject_validation" class="error_message"></span>
</div>
<div id="field5-container" class="field f_100">
<label class="required" for="email">Email</label>
<input name="email" id="email" type="email">
<span id="email_validation" class="error_message"></span>
</div>
<div id="field4-container" class="field f_100">
<label class="required" for="message">Message</label>
<textarea rows="5" cols="20" id="message" name="message"></textarea>
<span id="message_validation" class="error_message"></span>
</div>
<div id="form-submit" class="field f_100 clearfix submit">
<input value="Submit" type="submit" id="submit_button">
</div>
</form>
</div>
<div class="one-third last">
</div>
<div style="clear:both; height: 0px"></div>
</div>
<!-- close container -->
<?php
include('footer.php');
?>
</body>
</html>][2]
CSS
#after_submit, #email_validation, #name_validation {
display:none;
}
#after_submit{
background-color: #c0ffc0;
line-height: 31px;
margin-bottom: 10px;
padding-left: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#after_submit{
color: #6c6c6c;
}
.error {
background-color:#FFDFDF;
color:red;
}
.error_message{
font-style: italic;
font-size: 10px;
}
.row {
margin:5px;
}
This should do the trick for you:
#contact_form{
width:50%;
margin-left:auto;
margin-right:auto;
}
Check the fiddle here
I have not added all your CSS, only showed how you can center the form. Using the CSS above in your code, you would be able to center it.
You can put the form in a div and use css on the div or use for the form. Set width accordingly, but the margin-left and right when set to auto, put it into center of the screen, no matter what the screen size is.
If this doesnt work, then create a jsfiddle with all your relevant css and html and comment.
This should do the trick. Might have to play with the width and margin, but as long as they add up to 100%, you should be okay.
#contact_form, .heading_bg {
display: block;
position: relative
width: 50%;
margin: 0 25%;
padding: 0;
}
That will at least center your main div. Then it's just a matter of playing with the inside div and input settings to get things where you'd like them.