.form-control {
width: 30%;
float: left;
margin-left: 33%;
}
h1 {
margin-top: 2px;
}
.card-block {
padding-top: 3px;
border-left: 5px solid #CCC;
}
.card {
background: azure;
}
.container {
margin-top: 10px;
}
body {
background: lightgray;
}
#search {
padding-top: 13%;
}
<html>
<head>
<title>Wikipedia Viewer</title>
</head>
<body>
<div id="search">
<h1 class="text-center">Wikipedia Viewer</h1>
<input type="text" class="form-control" name="" placeholder="Search Wikipedia">
<button id="go" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
<button class="btn btn-primary">Random</button>
</div>
<script type="text/javascript" src="Wikipedia Viewer.js"></script>
</body>
</html>
How can I make that Random button to stay in the same line, even in small screens? It works fine with fontawesome icons but the text length makes it jump to the next line. Also, it would be nice if there is a way to add a fontawesome icon next to it and make it stay in the same line in smaller screens (not required).
Try this
Use btn-sm in button class
<button id="go" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-search"></span>
</button>
Wrap the controls in a container and use flexbox:
.container {
display: flex;
}
HTML
<div id="search">
<h1 class="text-center">Wikipedia Viewer</h1>
<div class="container">
<input type="text" class="form-control" name="" placeholder="Search Wikipedia">
<button id="go" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
<button class="btn btn-primary">Random</button>
</div>
</div>
JSFiddle demo: https://jsfiddle.net/9vev9esr/4/
make the position of button fixed:
button{
position:fixed;
}
This should solve your problem
Related
I couldn't get the text box and button separated by space but in one line, can someone explain to me what span actually does?
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#custom-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="index.html">GLOW</a>
<div class="col-sm-5 pull-right hidden-md hidden-print hidden-sm hii" style="padding-top:10px">
<form action="login.asp" method="post" name="Form1">
<div class="input-group">
<input class="form-control" type="text" id="txtLogin" name="txtLogin" placeholder="Login" data-validation-required-message="Please enter your login ID." required="required"/><span class="input-group-btn">
<input class="form-control" type="password" id="txtPass" name="txtPass" placeholder="Password" data-validation-required-message="Please enter your email address." required="required"/>
<button class="btn btn-g btn-round" id="btnlogin" type="submit">Login</button></span>
</div>
</form>
</div>
</div>
</div>
If I put between the two text fields I end up like this:
Added my CSS code
.container { width:1170px }
.container-fluid > .navbar-collapse,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container > .navbar-header {
margin-right:0;
margin-left:0
}
.col-sm-5 { width:41.66666667% }
.input-group {
position:relative;
display:table;
border-collapse:separate
}
.form-control {
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 11px;
height: 33px;
border: 1px solid #EAEAEA;
border-radius: 2px;
transition: all 0.4s ease-in-out 0s;
}
.input-group-btn{
position:relative;
font-size:0;
white-space:nowrap
}
You need to change your markup in order to solve this with Bootstrap. Namely:
Remove the <span> after the login field (ant the closing </span> after the button), as it is not in the right place, and also the .input-group-btn class is not the one you want to use here.
Wrap just the button into <div class="input-group-append">.
Remove the custom styles from .input-group and .input-group-btn, and height: 33px; from .form-control. Generally it is not a good idea to overwrite the default classes.
Finally, you can add the space needed between the two inputs by applying margin-right on #txtLogin. You can do this with custom css styles, or by using one of the .mr-{} Spacing utility classes, e.g. .mr-2.
You will find the documentation of the features used here under the Multiple inputs and the Button addons sections of the Bootstrap 4 documentation.
.container { width:1170px }
.container-fluid>.navbar-collapse,.container-fluid>
.navbar-header,.container>
.navbar-collapse,.container>.navbar-header {
margin-right:0;
margin-left:0
}
.col-sm-5 { width:41.66666667% }
/*.input-group {
position:relative;
display:table;
border-collapse:separate
}*/
.form-control {
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 11px;
/*height: 33px;*/
border: 1px solid #EAEAEA;
/*border-radius: 2px;*/
transition: all 0.4s ease-in-out 0s;
}
/*.input-group-btn{
position:relative;
font-size:0;
white-space:nowrap
}*/
<form action="login.asp" method="post" name="Form1">
<div class="input-group">
<input class="form-control mr-2" type="text" id="txtLogin" name="txtLogin" placeholder="Login" data-validation-required-message="Please enter your login ID." required="required"/>
<input class="form-control" type="password" id="txtPass" name="txtPass" placeholder="Password" data-validation-required-message="Please enter your email address." required="required"/>
<div class="input-group-append">
<button class="btn btn-g btn-round" id="btnlogin" type="submit">Login</button>
</div>
</div>
</form>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
You can add before the button to add a space. Is that what you are attempting to do?
EDIT: I don't know what you btn btn-g or btn-round css classes are but if you add a margin value inline(as in in the buttons style tag) it will overwrite whatever is in your css classed and give you the space
.container{width:1170px}
.container-fluid>.navbar-collapse,.container-fluid>
.navbar-header,.container>
.navbar-collapse,.container>.navbar-header {
margin-right:0;
margin-left:0
}
.col-sm-5{width:41.66666667%}
.input-group {
position:relative;
display:table;
border-collapse:separate
}
.form-control {
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 11px;
height: 33px;
border: 1px solid #EAEAEA;
border-radius: 2px;
transition: all 0.4s ease-in-out 0s;
}
.input-group-btn{
position:relative;
font-size:0;
white-space:nowrap
}
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#custom-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="index.html">GLOW</a>
<!--<div class="col-sm-5 pull-right hidden-lg hidden-md hidden-print hidden-sm hii" style="padding-top:10px">-->
<div class="col-sm-5 pull-right hidden-md hidden-print hidden-sm hii" style="padding-top:10px">
<form action="login.asp" method="post" name="Form1">
<div class="input-group">
<input class="form-control" type="text" id="txtLogin" name="txtLogin" placeholder="Login" data-validation-required-message="Please enter your login ID." required="required"/><span class="input-group-btn">
<input class="form-control" type="password" id="txtPass" name="txtPass" placeholder="Password" data-validation-required-message="Please enter your email address." required="required"/>
<button class="btn btn-g btn-round" id="btnlogin" type="submit" style="margin-left:10px">Login</button></span>
</div>
</form>
</div>
</div>
I have single image and 5 buttons, I would like to position the at the top-right side of the image, the buttons should be one above the other. currently the buttons are at bottom right side of the image and placed in a row.
function pictureChange(imgId, path) {
document.getElementById(imgId).src = path;
}
p {
display: inline-block;
}
<img id="scene1" src="images/scene1/scene1-4dof.png">
<p>
<input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')">
</p>
<p>
<input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')">
</p>
<p>
<input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')">
</p>
<p>
<input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')">
</p>
<p>
<input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')">
</p>
function pictureChange(imgId,path) {
document.getElementById(imgId).src=path;
}
.sid {
display: inline-block;
vertical-align: top;
}
img {
width:200px;
height:200px;
}
.sid input {
display: block;
}
<img class="sid" id="scene1" src="http://via.placeholder.com/200x200">
<!---->
<div class="sid">
<input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')">
<input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')">
<input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')">
<input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')">
<input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')">
</div>
What I did is add display: inline-block; to the image and the div 'i added to contain the inputs'
This <!----> for inline behaviour in inline-block ' shows any spacing between elements '
also vertical-align: top; for the top part of top-right
This solution will scale according to the surrounding element. To show this I added an extra wrapper.
.wrapper {
position: relative;
/* width of the image here */
}
.wrapper .buttons {
position: absolute;
right: 3%;
top: 3%;
}
#scene1 {
width: 100%;
height: auto;
}
<div class="wrapper">
<img id="scene1" src="http://via.placeholder.com/350x150">
<div class="buttons">
<p><input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')"></p>
<p><input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')"></p>
<p><input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')"></p>
<p><input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')"></p>
<p><input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')"></p>
</div>
</div>
Pure Css :
1) Buttons on image:
div {
position: relative;
display: inline-block;
}
img {
width:300px;
border:1px solid #000;
}
.right {
position: absolute;
top: 0;
right: 0;
background-color: rgba(0,0,0,0.7);
text-align: center;
}
<div>
<img id="scene1" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
<div class="right">
<p><input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')"></p>
<p><input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')"></p>
<p><input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')"></p>
<p><input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')"></p>
<p><input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')"></p>
</div>
</div>
2) Buttons after image:
div {
position: relative;
display: inline-block;
}
img {
width:200px;
border:1px solid #000;
}
.right {
background-color: rgba(0,0,0,0.7);
text-align: center;
vertical-align: top;
}
<div>
<img id="scene1" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
<div class="right">
<p><input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')"></p>
<p><input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')"></p>
<p><input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')"></p>
<p><input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')"></p>
<p><input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')"></p>
</div>
</div>
function pictureChange(imgId,path) {
document.getElementById(imgId).src=path;
}
.img_con{
width:400px;
height:400px;
position: relative;
}
.sid {
position: absolute;
}
img {
width:400px;
height:400px;
}
.onTop{
position: absolute;
top:0;
right: 0;
}
.sid input {
display: block;
}
<div class="img_con">
<img class="sid" id="scene1" src="http://via.placeholder.com/400x400">
<div class="sid onTop">
<input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')">
<input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')">
<input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')">
<input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')">
<input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')">
</div>
</div>
Here is our desperate try to make the buttons work. The BUTTON worked before i added the other one. please help. We also had difficulties with making the buttons look different but that is fixed now. (Its just telling me to text some more so thats the reason im writing this. this aint important. How are you doing today?)
.Button {
background-color: darkcyan;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: hacked;
}
.sub {
position: relative;
}
.itmHolder {
position: relative;
}
.itmHolder:nth-child(2),
.itmHolder:nth-child(3) {
position: absolute;
top: 0;
}
.og {
margin-top: 50px;
position: center;
text-align: center;
}
<title>Our Future</title>
</head>
<!--Baggrunds farve-->
<body bgcolor="#212f3c">
<!--Hovedskriften-->
<font size=40><center><h1 style="font-family:blowbrush;">Future</font></center></h1><form action="side2.html">
<div class="og">
<div class="itmHolder">
<div class="sub">
<button type="button" class="Button">About us<form action="side2.html"></button>
<button type="button" class="Button">Buy now<form action="buynow.html"></button>
</div>
</div>
<br></br>
</body>
</html>
<picture>
<!--Billede-->
<br></br>
<br></br>
<center><img src="CSfU23PXAAEA8et.jpg" alt="Matrix" style="width:auto;" border="5"><center/>
<br></br>
<br></br>
<!--Youtube video-->
<center><iframe width="700" height="400"src="https://www.youtube.com/embed/XGSy3_Czz8k?playlist=XGSy3_Czz8k&loop=1"></center></iframe>
</picture>
You havnt closed your form tag and you have it in the wrong place. Adjust your code:
<div class="sub">
<form action="side2.html" method="POST">
<input type="submit" class="Button" value="About us">
</form>
<form action="buynow.html" method="POST">
<input type="submit" class="Button" value="Buy now">
</form>
</div>
OR If you prefer not to use forms, use the <a> tag:
<div class="sub">
<button type="button" class="Button">About us</button>
<button type="button" class="Button">Buy now</button>
</div>
You haven't used the <form> tag in the right way in the below code part
<div class="sub">
<button type="button" class="Button">About us<form action="side2.html"></button>
<button type="button" class="Button">Buy now<form action="buynow.html"></button>
</div>
Try this way
<div class="sub">
<form action="side2.html">
<button type="submit" class="Button">About us</button>
</form>
<form action="buynow.html">
<button type="submit" class="Button">Buy now</button>
</form>
</div>
else try this alternate way
<div class="sub">
About us
Buy now
</div>
Hope this helps.
No need to use buttons to navigate through pages. You can do this instead:
Buy Now
Then style a however much you like.
Buttons are used with JavaScript in case you need to pass an onClick action.
I am trying to create a simple page navigation consisting of three parts:
A few previous page numbers (if any)
The current page number (this must be centered)
A few upcoming page numbers (if any)
The important thing is that the current page number is always horizontally centered within the parent container. The other two parts should take up the remaining horizontal space evenly.
This JSFiddle illustrates my two attempts at solving this problem.
Solution 1: use text-align: center. This achieves the desired result but only if both sides are equal in width. If not the current page number will not be in the center.
HTML
<div class="container">
<input type="button" value="47">
<input type="button" value="48">
<input type="button" value="49">
<input type="text" size="5" maxlength="5" value="50">
<input type="button" value="51">
<input type="button" value="52">
<input type="button" value="53">
</div>
CSS
.container, input {
text-align: center;
}
Solution 2: use manually specified widths to distribute the horizontal space evenly. This effectively centers the current page number under all circumstances but it requires you to hardcode widths.
HTML
<div class="container">
<div class="left">
<input type="button" value="47">
<input type="button" value="48">
<input type="button" value="49">
</div>
<div class="right">
<input type="button" value="51">
<input type="button" value="52">
<input type="button" value="53">
</div>
<div class="center">
<input type="text" size="5" maxlength="5" value="50">
</div>
</div>
CSS
.left {
width: 40%;
float: left;
text-align: right;
}
.right {
width: 40%;
float: right;
text-align: left;
}
.center {
width: 20%;
margin-left: 40%;
}
Neither of these solutions really do what I want. Is there any way to have the current page number centered while allowing the other elements to align to its natural size, rather than to an arbitrary pixel or percentage width?
Try this CSS table layout follows.
.container {
width: 100%;
display: table;
border-collapse: collapse;
table-layout: fixed;
}
.left, .center, .right {
display: table-cell;
border: 1px solid red;
text-align: center;
}
.center {
width: 50px;
}
<div class="container">
<div class="left">
<input type="button" value="47">
<input type="button" value="48">
<input type="button" value="49">
</div>
<div class="center">
<input type="text" size="5" maxlength="5" value="50">
</div>
<div class="right">
<input type="button" value="51">
<input type="button" value="52">
<input type="button" value="53">
</div>
</div>
jsfiddle
You should use flex and float properties together, checkout my solution:
.container {
display: -webkit-flex; /* Safari */
display: flex;
}
.container, input {
text-align: center;
}
.container:after {
content:"";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 50%;
border-left: 2px dotted #ff0000;
}
.left {
display: inline-block;
flex: 1;
}
.left input {
float: right;
}
.right {
display: inline-block;
flex: 1;
}
.right input {
float: left;
}
.center {
display: inline-block;
}
<div class="container">
<div class="left">
<input type="button" value="48">
<input type="button" value="49">
</div>
<div class="center">
<input type="text" size="5" maxlength="5" value="50">
</div>
<div class="right">
<input type="button" value="51">
<input type="button" value="52">
<input type="button" value="53">
</div>
</div>
You can use the CSS property display with the value flex in the wrapper, and the property flex in the children.
To learn more about it, check the following resource: A Complete Guide to Flexbox
Here is an example:
.wrapper {
display: flex;
}
.wrapper > div {
text-align: center;
flex: 1;
border: 1px solid #000;
}
<div class="wrapper">
<div>
<button>1</button>
<button>2</button>
</div>
<div>
<button>3</button>
</div>
<div>
<button>4</button>
<button>5</button>
<button>6</button>
</div>
</div>
Here is a solution you might consider:
Use hidden buttons to always maintain the same number of tags on left and right side
<div class="container">
<input style="visibility: hidden" type="button" value="0">
<input style="visibility: hidden" type="button" value="0">
<input style="visibility: hidden" type="button" value="0">
<input type="text" size="5" maxlength="5" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
</div>
Instead of specifying the width in % you can use CSS calc to split the full width in 3 parts:
[50% - 25px][50 px][50% - 25px]
Then right-align the left part, left align the right part and you're done. When using SASS or LESS you only need to specify the width of the center part.
.container {
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.container > * {
display: inline-block;
}
.container .left {
width: calc(50% - 25px);
text-align: right;
}
.container > input {
width: 50px;
margin: 0px;
text-align: center;
}
.container .right {
width: calc(50% - 25px);
text-align: left;
}
<div class="container">
<div class="left">
<input type="button" value="48" />
<input type="button" value="49" />
</div>
<input type="text" maxlength="5" value="50" />
<div class="right">
<input type="button" value="51" />
<input type="button" value="52" />
<input type="button" value="53" />
</div>
</div>
I've created a search form using bootstrap. I've also used jquery to generate a delete search button (x) when text is input, however, I am stuck trying to get it on the same line as the search form (ideally in the box to the right).
As you can see in the second picture, when "1" is entered into the form the button is generated below the search form. I have included my code below, any help would be greatly appreciated.
<form id="PWFS">
<label for="Label">Info</label>
<button type="button" class="btn btn-link btn-xs"<i class="fa fa-question-circle fa-lg"></i></button>
<div class="row">
<div class="col-md-8">
<div class="input-group btn-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i></span>
<input type="text" class="form-control search" id="search" placeholder="Workflow #">
<span id="searchclear" class="searchclear fa fa-times"></span>
</div>
</div>
<button id="WFFsearch" type="submit">Search</button>
</div>
</form>
</div>
<br>
CSS
.searchclear {
position: relative;
z-index: 10;
right: 5px;
top: 0;
bottom: 0;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #ccc;
}
Thank you Lal, Phil and adamdc78. I just had to change the position to absolute.