I want to add a clickable current location button after (or in if possible) a the first input box. I'm having trouble appending it after the input box and not having a line break before the next input box. I've seen examples for input boxes but not forms.
<form class="form-inline" id="get-directions-form">
<input class="form-control" type="text" id="start">
<span class="input-group-btn"><img class="current-location-marker" src="http://imgur.com/pGM46FY.png"></span>
<label> End </label>
<input class="form-control" type="text" id="end">
<input class="btn btn-primary" id="submit-button" type='submit'></input>
</form>
How about this?
<form class="form-inline" id="get-directions-form">
<span class="textbox" style="border: 1px solid black; padding: 5px;">
<input class="form-control" type="text" id="start" style="border: none; padding-bottom: 5px;">
<img class="current-location-marker" src="http://imgur.com/pGM46FY.png" style="height: 32px;">
</span>
<label> End </label>
<input class="form-control" type="text" id="end">
<input class="btn btn-primary" id="submit-button" type='submit'></input>
</form>
I put the textbox and the image inside a span that was styled to look like a textbox.
Related
I found the code I need to embed into Google Sites to a add google search box, but I don't know how to make it larger. Can someone help me scale this up?
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="example.com">
<input autocomplete="on" class="form-control search" name="q" placeholder="Search in example.com" required="required" type="text">
<button class="button" type="submit">Search</button>
</form>
You could only add the font-size property in CSS
.form-control.search {
font-size: 40px;
}
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="example.com">
<input autocomplete="on" class="form-control search" name="q" placeholder="Search in example.com" required="required" type="text">
<button class="button" type="submit">Search</button>
</form>
or you can set a width and height
.form-control.search {
width: 80vw;
height: 50px;
}
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="example.com">
<input autocomplete="on" class="form-control search" name="q" placeholder="Search in example.com" required="required" type="text">
<button class="button" type="submit">Search</button>
</form>
Obviously you can have a combination of both depending on what/how you want to make it larger.
I have just started to learn how to code and I was trying to select the button class to change the color when you hover over it. I managed to make it work by selecting this in css:
.button[type="submit"]:hover {
background-color: grey;
}
But I am wondering why this doesn't work instead:
.button:hover {
background-color: grey;
}
here is my html code:
<form class="my-form">
<div class="form-group">
<label> Name: </label>
<input type="text" name= "name">
</div>
<div class="form-group">
<label> Email: </label>
<input type="text" name= "email">
</div>
<div class="form-group">
<label> Message: </label>
<textarea name= "message"></textarea>
</div>
<input class="button" type="submit" value="submit" name="">
</form>
It works perfectly, You probably faced not closed div's mistake's or something like this...
take a screenshot if you're sure that everything is alright with your code's.
this helps you to find mistaked like i said:
http://help.simplytestable.com/errors/html-validation/end-tag-for-element-x-which-is-not-open/end-tag-for-element-div-which-is-not-open/
.button:hover {
background-color: grey;
}
<form class="my-form">
<div class="form-group">
<label> Name: </label>
<input type="text" name= "name">
</div>
<div class="form-group">
<label> Email: </label>
<input type="text" name= "email">
</div>
<div class="form-group">
<label> Message: </label>
<textarea name= "message"></textarea>
</div>
<input class="button" type="submit" value="submit" name="">
</form>
Bootstrap 4.
<div class="form-group">
<label asp-for="Enabled" class="control-label"></label>
<input asp-for="Enabled" class="form-control" type="checkbox" />
<span asp-validation-for="Enabled" class="text-danger"></span>
</div>
I have a form (see image). I would like the check box to be underneath the word "Enabled" not centred like the other full width controls.
If I set "width: auto;" on the checkbox, this does the job, but then displays a small checkbox (I want a large one). See image.
<div class="form-group">
<label asp-for="Enabled" class="control-label"></label>
<input asp-for="Enabled" class="form-control" style="width: auto;" type="checkbox" />
<span asp-validation-for="Enabled" class="text-danger"></span>
</div>
My question is, how can I get a large left aligned checkbox on my form?
I am also searched before for the same issue, but not satisfied with the above answer that's why I have done my research and I found a good solution. Just add class "col-sm-1"
in the input tag, you are done.
<div class="col-8">
<input asp-for="IsUrgent" type="checkbox" class="form-control col-sm-1" />
<span asp-validation-for="IsUrgent" class="text-danger" />
</div>
you can also use like this if you are not satisfying with class name
input[type="checkbox"]{
width: 30px; /*Desired width*/
height: 30px; /*Desired height*/
cursor: pointer;
-webkit-appearance: none; /* if you want check inside box then remove this line*/
appearance: none; /* if you want check inside box then remove this line*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
<div class="form-group">
<label asp-for="Enabled" class="control-label">Enabled</label>
<input asp-for="Enabled" class="form-control checkbox-large" type="checkbox" />
<span asp-validation-for="Enabled" class="text-danger"></span>
</div>
</form>
Its not tidy by setting an height and width for the checkbox should do the trick.
.checkbox-large {
width: 25px !important;
height: 25px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
<div class="form-group">
<label asp-for="Enabled" class="control-label">Enabled</label>
<input asp-for="Enabled" class="form-control checkbox-large" type="checkbox" />
<span asp-validation-for="Enabled" class="text-danger"></span>
</div>
</form>
Trying to build a 3 control input-group with Bootstrap 3.3.7, however the height of the first addon does not match the following input nor button.
<div class="input-group">
<span class="input-group-addon">Amount</span>
<input type="text" class="form-control" />
<div class="input-group-btn">
<button class="btn">Submit</button>
</div>
</div>
Anyone have a working sample to solve this design?
First and for all where is your <label> tag?
Do you want the submit in your input field? Or the submit button underneath it?
You need also to place form around it and your input can be declared as number because it's amount; your input field also needs a name. A submit button is an input button with type='submit':
example:
<input type="submit" class="btn btn-default" value="submit" id="submit">
You can also declare on your body class='container'
<body class="container">
<form id="youWantToGiveThisAName" class="form-group">
<label for="amountOfSomething"></label>
<div class="input-group">
<span class="input-group-addon">Amount</span>
<input type="number" name="amountOfSomething" id="amountOfSomething" class="form-control" value="0.00000121">
</div>
<div>
<input type="submit" class="btn btn-coinchecker pull-right" value="submit" id="submit">
</div>
</form>
</body>
Here's a fiddle to see the result
I'm trying to use the toggle feature in Bootstrap, but would like to replace the default buttons with an image. The image has text that reads "This week". The button right next to it will be an image that reads "All Time". Any ideas on how to do this?
You can see the webpage laid out here:
http://matthewtbrown.com/test/imageasbutton/
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active thisweek">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
</div>
rightcolumn .btn-group .btn .btn-primary .active .thisweek {
background-image: url(../images/callout.png);
background-color: transparent;
}
you means you want images as a radio buttons yes?
hope, this helps:
<style>
/*input[type=radio] {
display: none;
}*/
</style>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active thisweek">
<input type="radio" name="options" id="option1" autocomplete="off" checked><img src="https://placehold.it/200x200">
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"><img src="https://placehold.it/150x150">
</label>
Uncomment style to hide radio buttons graphics :)