When I use the focus.bind="setFocus" in FireFox the cursor goes to the beginning of the input and not to the end of the existing text.
In Chrome works fine.
How can I solve this?
Code:
<template bindable="value">
<require from="./search.css"></require>
<div class="section search">
<form>
<div class="container gutter-height-bottom">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 offset-md-2 offset-lg-2">
<input
placeholder="O que você está procurando?"
class="form-control form-control-lg"
focus.bind="true"
value.bind="value"
type="text"
>
</div>
</div>
</div>
</form>
</div>
</template>
Related
How to make kbps to be inline with input box? Which mean, kbps will be next to input box. Not like image below.
<div class="form-group row">
<div class="col-lg-4">
<label class="form-control-label">New Bandwidth (kbps):</label>
</div>
<div class="col-lg-6">
<input type='number' style='display:inline;'><span>kbps</span>
</div>
</div>
Try this
<div class="form-group row">
<div class="col-lg-4">
<label class="form-control-label">New Bandwidth (kbps):</label>
<input type='number' style='display:inline-block;'><span>kbps</span>
</div>
</div>
After done customization then I found what I want.
Maybe this is not the best practice.
<div class="form-group row">
<div class="col-lg-4">
<label class="form-control-label">New Bandwidth:</label>
</div>
<div class="col-lg-5 pl-3 pr-0">
<input type='number'>
</div>
<div class="col-lg-1 pd-0 ml-2">
<span>kbps</span>
</div>
</div>
my english is so bad. Bear with me.
I cant move de position of a button submit. All styles have no effect.
This is the code (html, bootstrap 3):
<body>
<div class="row">
<div class="col-sm-12">
<!-- LOGO -->
<div class="col-sm-3">
<img src="../web/assets/img/logo-biblioteca.png" alt="Biblioteca Virtual">
</div>
<!-- BUSCADOR -->
<div class="col-sm-8">
<div class="well" >
<form class="form-group" action="">
<div class="col-sm-1" style="margin-top: 0.5%">
<label for="titulo"><b> Título </b></label>
</div>
<div class="col-sm-11">
<input class="form-control" type="text" placeholder="Ingrese un titulo" name="titulo" required>
</div>
<div class="col-sm-1" style="margin-top: 2.5%">
<label for="autor"><b> Autor </b></label>
</div>
<div class="col-sm-11" style="margin-top: 2%">
<input class="form-control" type="text" placeholder="Ingrese un autor" name="autor" required>
</div>
<div class="text-right row">
<button class="btn btn-info btn-md" type="submit">Buscar</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
I cant move the button Buscar.
Please tell us more information, but you can also attempt to try this when using inline styling: !important;
Example..
<div id="placement" class="text-left"> <!-- text-center, text-right works too. -->
<button here>button</button>
</div>
This should work with Bootstrap, if you have it installed properly.
You could also attempt to put a float:left/right on the button itself and see what happens.
I am trying to position a well to the center of the page. There are similiar questions on SO, but the code is somewhat different to mine. My HTML is given below:
<div class="container">
<div class="row">
<div class="well col-sm-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
I tried putting the well div inside another div with col-md-12 and other values, but the well did not get centered. Does anyone know how I could center the well in the page?
You could try offsetting columns
Give your columns the class col-sm-offset-4
Like so: <div class="well col-sm-offset-4 col-sm-4">
Example: http://jsfiddle.net/u48v34p7/
<div class="container">
<div class="row">
<div class="col-sm-4 well col-sm-offset-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
Just replace your code here:
<div class="well col-sm-4" align="center">
With this (you can also isolate the style in a CSS class):
<div class="well col-sm-4" style="margin:auto; float:none;">
You could put two dummy divs to make your well centered. I have noticed that you only have one col-sm-4
Try this:
<div class = "col-sm-4"></div>
<div class = "well col-sm-4">
<!-- your content here -->
</div>
<div class = "col-sm-4"></div>
In that way you can have your well centered.
You can also do this
<div class = "well col-md-6 col-md-offset-3">
<!-- content here -->
</div>
To make your well centered on desktop view 1280px and above.
The following is the code for the form which I wrote:
<div class="container-fluid" id="unlabelled">
<p class="bg-primary">Items<span>Quantity</span><span>In Kit</span></p>
<form>
<div class="form-group col-lg-5">
<input type="text" class="form-control" id="unlabelled-items" placeholder="Enter code or description">
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control" id="quantity" placeholder="Enter Quantity">
</div>
<div class="form-group">
<input type="checkbox" id="in-kit">
<button class="btn-primary" id="add-btn">Add</button>
</div>
</form>
</div>
I am using bootstrap here. And I have the top paragraph heading with a class="bg-primary" which gives a nice background for the heading. I have two text input fields, a checkbox and a button. I want to align the text in the above paragraph with these fields.
https://imgur.com/XinA1kT
I want the Items text to be aligned in center with the first text field, Quantity with the second text field and the In kit with the check box.
As you can see in my code, I added span tags around the text. I experimented with it by adding margin properties to these span tags, but it didn't work properly. I tried a bunch of it works okay but I atleast need 15 to 20 of them which even didn't solve my problem.
Is there any alternative for this? I could even try other alternatives for the p tag too.
Thank you.
This can at least get you started, it's just rows and columns and some minor CSS. The problem you'll have is on a mobile device, if you want this to remain completely horizontal it'll start to break down.
.well-md.well-head {
background: #3973a6;
border: none;
color: #fff;
font-size: 18px;
height: 60px;
text-align: center;
}
.checkbox {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<div class="row well well-md well-head">
<div class="col-xs-4">
<p>Items</p>
</div>
<div class="col-xs-3">
<p>Quantity</p>
</div>
<div class="col-xs-3">
<p>In Kit</p>
</div>
</div>
<div class="row">
<div class="form-group col-xs-4">
<input type="text" class="form-control" id="unlabelled-items" name="unlabelled-items" placeholder="Enter code or description">
</div>
<div class="form-group col-xs-3">
<input type="text" class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity">
</div>
<div class="form-group">
<div class="form-group col-xs-3">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="in-kit" name="in-kit">
</div>
</div>
</div>
<div class="form-group col-xs-2">
<button class="btn btn-primary" id="add-btn">Add</button>
</div>
</div>
</div>
</form>
</div>
You need to put your text descriptors into columns that match with the columns for you inputs. Like this:
<div class="container-fluid" id="unlabelled">
<p class="bg-primary">
<div class="row">
<div class="form-group col-md-5"> Items</div>
<div class="form-group col-md-2">Quantity</div>
<div class="form-group col-md-2">In Kit</div>
</div>
</p>
<form>
<div class="form-group col-md-5">
<input type="text" class="form-control" id="unlabelled-items" placeholder="Enter code or description">
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control" id="quantity" placeholder="Enter Quantity">
</div>
<div class="form-group">
<div class="form-group col-md-2">
<input type="checkbox" id="in-kit">
</div>
<div class="form-group col-md-2">
<button class="btn-primary" id="add-btn">Add</button>
</div>
</div>
</form>
</div>
I am using a bootstrap theme for a personal website. In the contact section I am trying to replace a form (that comes with the theme) with an image of where I live.
The problem is that the image does not render in the centre of the page (the form does):
Here is the HTML for the form:
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form id="contact-form" role="form">
<div class="ajax-hidden">
<div class="form-group wow fadeInUp">
<label class="sr-only" for="c_name">Name</label>
<input type="text" id="c_name" class="form-control" name="c_name" placeholder="Name">
</div>
<div class="form-group wow fadeInUp" data-wow-delay=".1s">
<label class="sr-only" for="c_email">Email</label>
<input type="email" id="c_email" class="form-control" name="c_email" placeholder="E-mail">
</div>
<div class="form-group wow fadeInUp" data-wow-delay=".2s">
<textarea class="form-control" id="c_message" name="c_message" rows="7" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-lg btn-block wow fadeInUp" data-wow-delay=".3s">Send Message</button>
</div>
<div class="ajax-response"></div>
</form>
</div>
</div><!-- .row -->
Form in Chrome dev tools:
Here is how my code looks:
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<img src="assets/images/staticmap2.png">
</div>
</div><!-- .row -->
Image in Chrome dev tools:
I have tried changing the size of the image and different offset sizes to no avail. I'm at a loss how to resolve this - can anyone help?
Adding the class center-block to your image will apply margin:0 auto; and should center the image in it's parent div.
<img class="center-block" src="assets/images/staticmap2.png">