Zoom in Zoom out problems in CSS - css

Hi here i am pasting code of my page in that i had one background image. In that i need to put buttons. When i am doing zoom in and zoom out buttons are moving from position.
<html>
<head>
<style type="text/css">
body
{
background:SteelBlue url('BG_BLUE_NEW.jpg') no-repeat center center;
}
.login
{
margin-top:300px;
height:300px
}
</style>
</head>
<body>
<div class="container">
<div class="login">
<form style="padding-left:370px;margin-bottom:0px;">
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
</form>
</div>
</div>
</body>
</html>


Take a look at thsi:
<html>
<head>
<style type="text/css">
body
{
background:SteelBlue url('BG_BLUE_NEW.jpg') no-repeat center center;
}
.login
{
width:100px; /*<- important edit*/
margin: 0 auto; /*<- important edit*/
margin-top:300px;
height:300px
}
</style>
</head>
<body>
<div class="container">
<div class="login">
<form style="margin-bottom:0px;"><!-- removed padding -->
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
</form>
</div>
</div>
</body>
</html>
What's going on here:
I set a specified with (100px) on the .login div to hold the inputs which also have a 100px width.
Then I applied margin:0 auto which reads: set the margin above and below to 0, left and right to 'auto' (grow-to-fill)
after that I removed the padding-left on the <form> element
You can see it in action here

Related

Bootstrap 4: validation breaks styling on inline form elements?

I am trying to validate an inline form field, with Bootstrap 4.
When validation is triggered, the inline form field jumps in width. Here is a fiddle (just click Enter without entering a value, to see the problem): https://jsfiddle.net/aq9Laaew/213418/
How can I fix this?
This is my HTML:
<form class="form-inline needs-validation" id="form-stage1" novalidate>
<label class="sr-only" for="stage1-amount">Amount in thousands</label>
<div class="input-group mb-1 mr-sm-1">
<div class="input-group-prepend"><div class="input-group-text">£</div></div>
<input type="number" step="5000" min="0" class="form-control" id="stage1-amount" required>
<div class="invalid-feedback">Please enter an amount to proceed</div>
</div>
<button type="submit" class="btn btn-secondary mb-1">Enter</button>
</div>
</form>
And this is my JavaScript:
d3.select('#form-stage1').on('submit', function(e) {
d3.event.preventDefault();
d3.event.stopPropagation();
d3.select(this).attr('class', 'was-validated');
});

Try this :
var form = document.getElementById('form-stage1');
d3.select('#form-stage1').on('submit', function(e) {
d3.event.preventDefault();
d3.event.stopPropagation();
d3.select(this).attr('class', 'form-inline was-validated');
$(".invalid-feedback").show();
if (form.checkValidity() !== false) {
d3.select('#stage1-results').style('display', 'inline-block');
var val = d3.select('#stage1-amount').property("value");
d3.select('#stage1-output').text(formatPounds(val));
var percentile = getPercentile('property', val)
d3.select('#stage1-lower').text(percentile);
d3.select('#stage1-higher').text(100-percentile-1);
}
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.form-control{
width:auto!important;
flex:0!important;
}
.input-group{
width:auto!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<form class="form-inline needs-validation" id="form-stage1" novalidate>
<label class="sr-only" for="stage1-amount">Amount in thousands</label>
<div class="input-group mb-1 mr-sm-1">
<div class="input-group-prepend"><div class="input-group-text">£</div></div>
<input type="number" step="5000" min="0" class="form-control" id="stage1-amount" required>
</div>
<button type="submit" class="btn btn-secondary mb-1">Enter</button>
<div class="invalid-feedback">Please enter an amount to proceed</div>
</div>
</form>
</div>
https://jsfiddle.net/aq9Laaew/215767/

Bootstrap Inline form - Horizontal stacked inputs and button

I have a design, where there are 4 input fields ending with a Search Button i.e.
INPUT1 INPUT2 INPUT3 INPUT4 BUTTON
I need all these to be stacked horizontally inside a form tag and should be inline with out any padding or spaces, showing at the center of the page on top of a banner. Need to accomplish this using bootstrap.
Regards,
Sijo Jose

Try this one.
<form>
<div class="input-container">
<div class="inline-content">
<input type="text" value="input 1">
<input type="text" value="input 2">
<input type="text" value="input 3">
<input type="text" value="input 4">
<button type="button">button</button>
</div>
</div>
</form>
I have also created a Bootply. Here is the link. http://www.bootply.com/XlBQ3QRLGN

Below code might help
HTML Code :-
<div class="header">
<div class="inner">
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="submit"/>
</div>
</div>
CSS Code:-
div {
min-height:75px;
line-height:75px;
text-align:center;
color:white;
font-weight:bold;
}
.inner {
width:100%;
max-width:960px;
margin:0 auto;
}
.header {
background:red;
}
Using form-inline using bootstrap :-
<!DOCTYPE html>
<html lang="en">
<head>
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
form {
margin: 0 auto;
}
</style>
</head>
<body>
<form class="form-inline">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="inputone">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="inputtwo">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="inputthree">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>

Using bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form>
<label class="text-inline">
<input type="text">
</label>
<label class="text-inline">
<input type="text">
</label>
<label class="text-inline">
<input type="text">
</label>
<label class="btn-inline">
<input type="submit" name="submit">
</label>
</form>
</div>
</body>
</html>

Bootstrap text field next to other inputs, using whole width

I want to have a form, containing a checkbox, a textfield and a button, with textfield taking as much width as available.
Is that possible?
<form>
<input type="checkbox">
<input class='form-control'>
<button class="btn btn-danger pull-right">
<i class="glyphicon glyphicon-minus"></i>
</button>
</form>
Here's a codepen with my (failed) intent
EDIT: Changed my question to not require form-inline to achieve the same result

You can use calc() in input="text" and according to Bootstrap Docs Examples the button would be a sibling of form-group and not a child as you have.
Remember that .form-inline only applies to forms within viewports that are at least 768px wide. So you need to see full-page of the snippet.
.form-group {
border: red solid
}
input[type="text"] {
width: calc(100% - 17px)
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
</div>
<button type="submit" class="btn btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</form>
UPDATE (based on your updated question) - that you want the same outcome even for smaller screen - therefore don't require form-inline)
I'll say lets keep form-inline but make button child of form-group instead of sibling (as I had earlier in my answer - and as it should be accordingly to Bootstrap Docs Examples)
.form-group {
border: red solid
}
#f1 input[type="text"] {
width: calc(100% - 113px) /* regular button */
}
#f2 input[type="text"] {
width: calc(100% - 101px) /* small button */
}
#f3 input[type="text"] {
width: calc(100% - 91px) /* extra small button */
}
#f4 input[type="text"] {
width: calc(100% - 141px) /* large button */
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form id="f1" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
<form id="f2" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-sm btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
<form id="f3" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-xs btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
<form id="f4" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-lg btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>

Try this:
<div class="container">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default">
<input type="checkbox">
</button>
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-minus"></i></button>
</div>
</div>
</div>

Getting link buttons on the same line

I feel like this should be easily searchable but I couldn't find it.
I want link buttons that are next to eachother horizontally:
<form action="http://google.com">
<input class="button" type="submit" value="google">
<input class="button" type="submit" value="yahoo">
</form>
this works, except that they both link to yahoo. I need each button to link differently.
<form action="http://google.com">
<input class="button" type="submit" value="google">
</form>
<form action="http://yahoo.com">
<input class="button" type="submit" value="yahoo">
</form>
this links to different url's however it's rendering one on top of the other.
How do I make them on the same row?

You could do it by set display: inline-block; to form.
form {
display: inline-block;
}
<form action="http://google.com">
<input class="button" type="submit" value="google">
</form>
<form action="http://yahoo.com">
<input class="button" type="submit" value="yahoo">
</form>

This should do the trick.
<head>
<style type="text/css">
form {
float: left;
}
</style>
</head>
<body>
<form action="http://www.google.com">
<input class="button" type="submit" value="google">
</form>
<form action="http://www.yahoo.com">
<input class="button" type="submit" value="yahoo">
</form>
</body>

Something like this would be the quick and easy way:
<div style="overflow: hidden;">
<form action="http://google.com" style="display: inline-block;">
<input class="button" type="submit" value="google">
</form>
<form action="http://yahoo.com" style="display: inline-block;">
<input class="button" type="submit" value="yahoo">
</form>
</div>

How to persist this whole page same with adding background color using div tag

I had a page which has one background image on that i am keeping some buttons. But the background of the whole page is white. That's not good i want background color and i need to persist this whole thing same.
<html>
<body>
<div class="outer" style="background-image:url('BG_BLUE_NEW.jpg'); background-repeat:no-repeat;background-position:center;height:768px;width:1100px;margin-top:-50px:padding-left:0px"></div>
<div class="login" style="margin-top:-430px;float: left;height: 290px;">
<form style="padding-left:250px;">
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
</form>
</div>
</body>
</html>

try this ,
http://www.w3schools.com/css/tryit.asp?filename=trycss_background_shorthand
background-color
background-image
background-repeat
background-attachment
background-position
background:#ffffff url('img_tree.png') no-repeat right top;
<html>
<body>
<div class="outer" style="background: blue url('BG_BLUE_NEW.jpg') center; height:768px;width:1100px;margin-top:-50px:padding-left:0px"></div>
<div class="login" style="margin-top:-430px;float: left;height: 290px;">
<form style="padding-left:250px;">
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
</form>
</div>
</body>
</html>

Use CSS:
body
{
background: color: #f00; /*your color here*/
}
This will make the body element's background whichever color you choose for all the pages.

body {
background-color: #ff0000
}

Resources