I am trying to make a search bar. How can I make the "go" button and the search input be inline? I have put my code below, but I am not sure where the error is.
<div style="float:right;display:inline;">
<div>
<button class="ui-btn ui-corner-all ui-btn-inline ui-mini" style="margin:0 0 0
0;padding: 0 0 0 0;">GO!
</button>
<input name="searchword" id="search" value="" placeholder="Placeholder text..."
type="search" />
</div>
</div>
The code works fine.
If you want it to be exact, remove the sub-wrapping div, make the button 20px and use display: inline-flex; instead of inline. Maybe it will be what want
jQM wraps the input in a div. you can assign a css class to the wrapper using the data-wrapper-class attribute:
<div style="float:right;display:inline;">
<div>
<button class="ui-btn ui-corner-all ui-btn-inline ui-mini btnclass">GO!</button>
<input name="searchword" id="search" value="" placeholder="Placeholder text..." type="search" data-wrapper-class="inputWrap" />
</div>
</div>
.inputWrap {
display: inline;
float: left;
margin-right: 4px;
}
.btnclass {
margin-top: 8px;
height: 37px;
}
DEMO
Related
I'm struggling while trying to locate 2 buttons on the left of an input field.
I already tried several suggestions on the internet but I couldn't make it the way I want.
<div class="col-xs-6" >
<div class="row">
<div class="col-xs-12">
<div class="pull-right">
<div class="search" style="height: 18px" ng-if="vm.showSearch()">
<form style="margin:0px" name="filter_actions" novalidate>
<div>
<input id="freeTextSearch" type="text" class="form-control input-sm" autofocus ng-change="vm.filterTable(Search)" ng-model="Search"
style="text-indent: 5px;" minlength="1" ng-model-options="{debounce:100}" id="Search" name="Search" placeholder="Search fields">
<a ng-show="Search" ng-click="localSearch = ''; vm.filterTable(localSearch)"><i style="vertical-align: middle; top:4px; right:35px; position: absolute" class="glyphicon glyphicon-remove"></i></a>
</div>
</form>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
<label class="btn btn-default" role="button" ng-click="vm.popUp()"><i class="fa fa-expand" style="color:darkgreen;"></i></label>
</div>
</div>
</div>
</div>
</div>
This is how it looks like :
Keep in mind, that label is an inline element similar to span, so you need to set its css to display: inline-block to behave like a div
once you have done this, the easiest way to have them in the same line is to use display:flex and flex-wrap: nowrap on the parent div.
here is my favorite flex-cheat-sheet
I have simplified your example and you can see how this works clicking below on Run code snippet.
.pull-right {
display: flex;
flex-wrap: nowrap;
}
.pull-right input{ border: 1px solid green;}
.pull-right label{ border: 1px solid red; display: inline-block;}
<div class="pull-right">
<div class="search" style="height: 18px" ng-if="vm.showSearch()">
<form style="margin:0px" name="filter_actions" novalidate>
<div>
<input id="freeTextSearch" type="text"
class="form-control input-sm" autofocus ng-change="vm.filterTable(Search)"
ng-model="Search"
style="text-indent: 5px;" minlength="1"
ng-model-options="{debounce:100}" id="Search" name="Search" placeholder="Search fields">
<a ng-show="Search"
ng-click="localSearch = ''; vm.filterTable(localSearch)">
<i style="vertical-align: middle; top:4px; right:35px; position: absolute"
class="glyphicon glyphicon-remove"> </i></a>
</div>
</form>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
<label class="btn btn-default" role="button" ng-click="vm.popUp()"><i class="fa fa-expand" style="color:darkgreen;">your icons</i></label>
</div>
</div>
I'm trying to learn HTML and CSS and using the old-school approach by creating a login page with three input controls (two text and one button). However, I'm using <table></table> for the alignment issues of textboxes. But I've read somewhere that using tables is not considered a good approach. This is what I'm doing:
Home.html
<div>
<table>
<thead>
<tr><th><span>Login Page</span></th></tr>
</thead>
<tbody>
<tr>
<th><label>Username:</label></th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th><label>Password:</label></th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<td><input type="button" value="Submit" /></td>
</tr>
</tbody>
</table>
</div>
However, I'm using some beginner stuff of CSS to align input controls without using tables and this is what I'm trying:
Home.html
<div class="box">
<span>Login Page</span>
<br />
<span>
<label>Username:</label>
<input type="text" value="" />
<br />
<label>Password:</label>
<input type="text" value="" />
<br />
<input type="button" value="Submit" />
</span>
</div>
style.css
.box {
margin: 10px 10px 10px 10px;
border: dotted 2px #fff;
width: 500px;
}
.box span:first-child {
border: dotted 1px;
margin-left: 30%;
font-family: Arial, sans-serif;
width: 50%;
}
.box span label:nth-of-type(odd)
{
color:blue;
font-family: Arial, sans-serif;
}
.box span label:nth-of-type(even)
{
color: red;
font-family: Arial, sans-serif;
display: inline-block;
}
My concern is using css, I'm able to align the input controls but I have to use multiple break tags (<br />) and also extra code for alignment which is easier by simply using the <table> tag. Can someone suggest me the standard approach and either I'm on the right path or not?
#iSahilSharma Please find following code without using table. I hope you were expecting the same. A part from it just a suggestion that start using Bootstrap framework instead of using custom coding.
.main_container{
width:100%;
}
.inner_box {
margin: 40px auto;
width: 30%;
}
.inner_box span{
clear: both;
display: block;
}
.inner_box span:first-child{
margin-bottom:10px;
}
.inner_box span:nth-child(n+2){
margin-bottom:20px;
}
<div class="main_container">
<div class="inner_box">
<span>Login Page</span>
<span>
<label>Username:</label>
<input type="text" value="" />
</span>
<span>
<label>Password:</label>
<input type="text" value="" />
</span>
<span>
<input type="button" value="Submit" />
</span>
</div>
</div>
Although tables are a very good approach for forms but I prefer the much shorter and easier method ie CSS tables
Here is a code:
form {
display: table;
}
p {
display: table-row;
}
label {
display: table-cell;
}
input {
display: table-cell;
}
<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>
As a small addition to the things that are said already, I would recommend you to consider an option to use a separate container for a single form control and its label. Like this:
<form>
<div class="input-group">
<label for="name">Username:</label>
<input type="text" id="name" value="" />
</div>
<div class="input-group">
<label for="password">Password:</label>
<input type="text" id="password" value="" />
</div>
</form>
Perhaps, one might say this is redundant, but from my perspective, it gives you more control during positioning. On the other hand, Michael Seltenreich is making a good point. I still find tables used for forms in many places, although I'd prefer to keep away from this method.
P.S. In case you want to spread labels and inputs horizontally, you would probably want to use flexboxes.
Using table is not always good. One way to do is
<div class="form-wrap">
<h2>Login Form</h2>
<div class="form-field">
<label>User Name</label>
<input type="text" value="" />
</div>
<div class="form-field">
<label>Password</label>
<input type="text" value="" />
</div>
<input type="button" value="Submit" />
</div>
CSS:
.form-field label {
width: 80px;
display: inline-block;
}
.form-field {
margin-bottom: 10px;
}
link to codepen
Tables are not a good approach for many reasons, but tables ARE ideal for forms of the type you are trying to create.
How do you move the move the button to the bottom of the page? I tried and its not working. I have tried margin-bottom: 0px; but the button still not move the bottom
<form tag="Create Logon">
<div id="layer">
</div>
<div class="left">
Fistname *:
</div>
<div class="right">
<input type="firstname" name="firstname" style="width: 300px; font-size: 14pt; margin-left: 40px;" />
</div>
<div class="right">
<input type="Username" name="username" style="width: 300px; font-size: 16pt; margin-left: 40px;" />
</div>
<div class="left">
Password *:
</div>
<div class="right">
<input type="password" name="password" style="width: 300px; font-size: 16pt; margin-left: 40px;" />
</div>
<p>Note: Please make sure your details are correct before submitting form and that all fields marked with * are completed!</p>
<button onclick="myFunction()">Submit</button>
<script>
function myFunction() {
alert("Thank you for registering with GreenB!");
}
</script>
</div>
Use absolute positioning:
button {
position:absolute;
bottom:0;
}
jsFiddle example
button {position: absolute; bottom: 0}
I want to show a text like below in the html page, how to do this?
This is what I tried up to now.
<div class="filterleft" style="display: inline-block;">
<div id="filterleft_border" style="border-style:solid; border-width:1px;" >
<label class="category-label" for="category">Filter: </label>
<input type="checkbox" id="enableFilter"/>
<input type="search" id="filterValue" style="width: 50px"/>
</div>
</div>
I created a fiddle for this,
http://jsfiddle.net/KendoDev/kzf6257h/
But what I want is,
You'll have to use HTML <fieldset> and <legend> to make that work.Its really simpler to use it..See more about this in W3Schools
See the
fiddle
HTML
<div class="filterleft" style="display: inline-block;">
<fieldset id="filterleft_border" style="border-style:solid; border-width:1px;" >
<legend>Filter: </legend>
<input type="checkbox" id="enableFilter"/>
<input type="search" id="duration" style="width: 50px"/>
</fieldset>
</div>
If you dont want to use fieldset use it like below.
.category-label
{
position:absolute;
top:0px;
left:12px;
padding-left:3px;
padding-right:3px;
background:white;
}
DEMO
If you wanted it to be specifically the label that was positioned like the legend you could do:
http://jsfiddle.net/ahallicks/kzf6257h/5/
#filterleft_border {
padding: 10px;
position: relative;
}
.category-label {
background: #FFF;
left: 5px;
position: absolute;
top: -10px;
}
Note, the relative positioning will keep the label within the confines of the border in cae you needed to use it more than once.
It's a fieldset. I tried to change your code a little bit. Check it out.
<div class="filterleft" style="display: inline-block;">
<fieldset id="filterleft_border" style="border-style:solid; border-width:1px; border-radius:6px;" >
<legend style="font-family:Tahoma;font-size:11px;font-weight:bold">Filters: </legend>
<input type="checkbox" id="enableFilter"/>
<input type="search" id="duration" style="width: 150px"/>
</fieldset>
</div>
Here is the document in W3schools
I have created login form in dropdown navbar item. It is working cool, even with responsive ui, but there is one problem.
When I resize desktop browser to phone size, I can still open menu, focus username, password input and press submit. But on phone, I can expand login position, but when I touch inputs or button - submenu hides. Have you any ideas how can I fix it?
working code: http://jsfiddle.net/D2RLR/4324/
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Loguj<strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<form action="http://localhost/fabrykagier/auth/login" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="identity" size="30" placeholder="e-mail">
<input id="user_password" style="margin-bottom: 15px;" type="password" name="password" placeholder="hasło" size="30">
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="remember" value="1">
<label class="string optional" for="user_remember_me"> Pamiętaj mnie</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Zaloguj">
</form>
</div>
</li>
this is probably what you need:
$(function(){
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});
source: http://mifsud.me/adding-dropdown-login-form-bootstraps-navbar/