I am trying to achieve the effect as shown in below screenshot using Bootstrap 3.
As you can see, the search button is both:
1) inside the input
2) styled with a glyphicon so as to not appear like a "button".
How can I achieve a similar effect with Bootstrap 3? I would like to place a button with a magnifying glass glyphicon at the end of a text input, however the button keeps appearing below the input as opposed to inside of it.
A wrapper div with position: relative; then positioning the submit button on top using position: absolute;. Like this:
http://jsfiddle.net/VtP5k/
HTML
<form>
<div id="search">
<input type="text" />
<button type="sutmit">Search</button>
</div>
</form>
CSS
#search {
position: relative;
width: 200px;
}
#search input {
width: 194px;
}
#search button {
position: absolute;
top: 0;
right: 0;
margin: 3px 0;
}
Try this.
In bootstrap you have to use button type submit instead of input type;
Both works fine! use button in bootstrap!
div {
padding: 15px;
background: #000;
}
.btn {
text-align: left !important;
font-size: 12px !important;
padding: 20px 12px !important;
width: 200px !important;
color: #888 !important;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div>
<button type="submit" class="btn btn-default">
awesomeness <span class="glyphicon glyphicon-search pull-right"></span>
</button>
<div>
Or see this fiddle
<button type="submit" class="btn btn-default">
Awesomeness <span class="glyphicon glyphicon-search"></span>
</button>
The problem is because the button is adhering to the normal flow of html and thus appears below the first element. What you need to do is wrap both the input and search button in an div and then make the search button absolute positioning. Then you can ad some jQuery functionality on a click function to achieve an event is needs be.
<html>
<body>
<div>
<input type="text" value="test"/>
<span id="search" class="absolute">x</span>
</div>
<style>
.absolute {
position:absolute;
top:9px;
left:115px;
}
</style>
<script>
$(document).on('click','#search',function(){
//some functionality
}
</script>
</body>
</html>
Related
I want to change the area( margin ) around my custom modal to this color #494c4e54 . If the user clicks outside the modal it closes, It would be nice if it wont be affected
CSS
.mojmodal
{
background: #e2e3e4;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: none;
width: 350px;
height: 400px;
border-radius: 2px;
border-bottom: 5px solid gray;
}
HTML
<div class="mojmodal gorkaze">
<form name="vnos" method="post">
<div><legend>Prijava</legend>
<label>Uporabniško ime</label><br>
<input type="text" name="ime">
</div>
<div>
<br><label>Geslo</label>
<br><input type="password" name="geslo">
</div>
<div><input type="checkbox" name="zapomni"> Zapomni si me<br><br>
<button type="submit" class="btn btn-primary" name="tipkamodal">Prijava</button></div><div>
Še nimate računa?
</div></form>
Login();
</div>
Here is a picture of the highlighted modal(click here)
There is no margin color property.
To achieve this effect you'll need additional elements or pseudo elements.
J.D. commented on your question this link: https://developer.mozilla.org/en-US/docs/Web/CSS/:target#Pure-CSS_lightbox which should help you create the effect.
I'd also suggest you brush up on your CSS box model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
I have the following HTML:
<div class="total">
<span id="pledged-money" class="money">
<p>${{ total.amount }}
<span class="btn btn-xs btn-info question-mark"
data-toggle="tooltip"
data-placement="top"
title="Hello there">
!
</span>
</p>
</span>
</div>
with the following scss:
#pledged-money {
p {
display: block;
position: relative;
}
span {
position: absolute;
top: 22%;
margin-left: 10px ;
font-size: 0.5em;
width: 9%;
}
}
As a result I have the following:
So far everything is okay, but what I need is to display a dialog when clicking on this span element like this:
I have not too much experience with HTML and CSS and I am currently stuck with this. How can I display this element that has a close button and the dialog pointing to the span element.
If you use bootstrap, it would be very easy to implement the popup message.
Use bootstrap popover, here is the link for reference https://www.w3schools.com/bootstrap/bootstrap_popover.asp
This is the code I'm working with
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Place Bid</title>
<!-- Bootstrap -->
<link href="../stylesheets/bootstrap.min.css" rel="stylesheet">
<link href="popover.css" rel="stylesheet">
</head>
<body>
<div class="container">
<ul class="list-unstyled">
<button class ="bidpopover"><a data-placement="bottom" data-toggle="popover" data-title="Place Bid" data-container="body" type="button" data-html="true" href="#" id="bid">Place Bid</a></button>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<div class="input-group" type ="wage">
<span class="input-group-addon">$</span>
<input type="text" class="form-control"/>
</div>
<br><br>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="cancel" class="btn btn-primary">Cancel</button>
</div>
</form>
</div>
</ul>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Popover UI functionalities-->
<script src="popover.js"></script>
</body>
</html>
CSS
.grey-box /* background of popover box*/
{
background-color: gray;
height: 200px;
margin-bottom: 10px;
font-size: 2em;
text-align: center;
padding: 80px;
}
.form-control { /* popover text field*/
width:120px;
}
.popover { /* popover responsiveness*/
max-width:300px;
}
button[type="submit"]{ /* Submit button */
border: 0;
padding: 8px;
background: #45AD00;
color: white;
border-radius: 5px;
margin-left: 20px;
margin-right: 30px;
}
button[type="cancel"]{ /* Cancel button */
border: 0;
padding: 8px;
background: #FC3838;
color: white;
border-radius: 5px;
margin-right: 20px;
}
.bidpopover{ /* Place Bid button*/
margin-top: 50px;
padding: 6px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
background-color: white;
border: 2px solid #4CAF50;
border-radius: 5px;
}
.bidpopover:hover { /* hovering over "Place Bid" button */
background-color: #4CAF50;
color: white;
}
ANGULAR.JS*
$( function() /* popover action */
{
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
} );
$('body').on('click', function (e) { /* closes popover when clicked outside of it */
//only buttons
if ($(e.target).data('toggle') !== 'popover'
&& $(e.target).parents('.popover.in').length === 0) {
$('[data-toggle="popover"]').popover('hide');
}
});
I ran it through the browser and the popover would only function if the mouse click was done above the popover box. Also on a side note, are HTML buttons capable of functioning if clicked anywhere on the button rather than just the button label? My "Place Bid" button would only open the popover if the mouse click happens specifically in the middle area where the button label is.
First of all, it's not recommended to place <a> tags inside <button>s.
I transferred the popover functionality to the <button>. There were quite a few other minor issues, some related to HTML markup, some to CSS, which I cleaned and prefixed.
I also fixed a logic error in your jQuery code, which was preventing the popover from opening on first click after it had been closed with a click outside the popover.
And I colored the popover arrow same as the background color of the popover header (I never understood why it's not default, since the popover opening on bottom will always have the arrow adjacent to its header.)
jsFiddle
Cheers!
I'm having some trouble with displaying a popup div with CSS. The problem is better explained with an example. Take the following html:
<html>
<head>
<style type"text/css">
#popup {
color: #fff;
background: #8c0000
}
#form {
background: #ccc;
color: #000;
position: absolute;
display: none;
}
#popup:hover > #form {
display: block;
}
</style>
</head>
<body>
<span id="popup">
Popup
<div id="form">
<form>
<label>Text Field</label>
<input type="text" />
<label>Select Field</label>
<select>
<option value="opt1">val1</option>
<option value="opt2">val2</option>
</select>
</form>
</div>
</span>
</body>
</html>
This consists of a single span element and a single hidden div element that contains a form. The div is displayed when the mouse is hovering the span element. The problem is that when I'm going to select an option in the dropdown box, the div disapears, as if it had lost focus. The result is that I can only change the dropdown value using the keyboard.
My question is: How do I fix that? Any clue on the subject is appreciated.
I believe you might be out of luck here, as rendering of <option> elements are dependent on browser / OS / platform, and not part of the CSS box model. Using JavaScript (and jQuery), this is pretty straight-forward. I've added a "Done" button to your form, as this might be a better solution for choosing when to hide the form. Otherwise, the user would have to be very careful not to move the mouse pointer outside the selection dropdown, or everything would disappear (if I've understood your request correctly.)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type"text/css">
#popup {
color: #fff;
background: #8c0000
}
#form {
background: #ccc;
color: #000;
position: absolute;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript">
function showForm() {
$("#form").show();
}
function hideForm() {
$("#form").hide();
}
</script>
</head>
<body>
<span id="popup" onmouseover="showForm()">
Popup
<div id="form">
<form>
<label>Text Field</label>
<input type="text" />
<label>Select Field</label>
<select>
<option value="opt1">val1</option>
<option value="opt2">val2</option>
</select>
<input type="button" value="Done" onclick="hideForm()" />
</form>
</div>
</span>
</body>
</html>
I'm not sure what, exactly, the problem is, but the following css works in Chrome 6.0.472.62 and Firefox 3.6.10 on Ubuntu 10.04:
#popup {
position: relative;
}
#form {
width: 12em;
display: none;
}
#popup:hover #form {
clear: both;
margin: 0;
display: block;
position: absolute;
top: 1em;
left: 0;
}
#popup form select:focus,
#popup form select:hover {
display: block;
}
Demo at: jsbin
And it's worth changing #popup to a div, as (I thought I) commented earlier.
You are showing the popup only on hover, so when the mouse leaves your popup, it is hidden,
You have to show it onmouseover of the span element, and hide it when the use clicks somewhere else on the page (other than the popup) or probably when he hits the close option on the popup.
I dont think you can do that with pure CSS. You would need some javascript.
I'm trying to introduce a checkbox next to another element. The problem is that the a element has been made a "block" by the CSS so that it appears at the correct height and width. Being a block, I can't simply put another element next to it and hope it shows up there -- it shows up just below it.
A self-contained sample is shown below.
<html>
<head>
<style type='text/css'>
/* I don't have control over this */
a.btn {
background-color: #B35905;
color: #E6D389;
text-decoration: none;
font-weight: bold;
text-align: center;
display: block;
border: none;
cursor: pointer;
}
.normal{
line-height: 20px;
font-size: 12px;
height: 20px;
width: 125px;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<!-- I have some control over this -->
<a class="btn normal">Push Me</a><input type="checkbox">
<br>
<a class="btn normal">Push Me Too</a>
</body>
</html>
So what I'm looking for is the checkbox to appear immediately to the right of the element, but without having to completely muck up the styling of the button. Absolute positioning of the checkbox using the (known) size of the button seems wrong and dirty.
Suggestions?
<a class="btn normal" style="float: left;">Push Me</a><input type="checkbox">
<br style="clear: both;">
<a class="btn normal">Push Me Too</a>
If you must keep the anchor a block element, set float: left to it. Don't forget to add
<div style="clear: both;"></div>
after the checkbox.
Add in two more css classes
.floatingButton{
float:left;
}
.aCheckbox {
xclear:left;
}
Then
<a class="btn normal floatingButton">Push Me</a><input class="aCheckbox" type="checkbox">
<br>
<a class="btn normal">Push Me Too</a>
Should do the trick
Can you do something like this with the access that you do have?
<div style="width: 150px;">
<input type="checkbox" style="float: right;">
<a class="btn normal">Push Me</a>
</div>
Just apply a float: left to the first a tag.
The easiest possible way to get the checkbox beside the button while preserving the button's block styling would be to set the button's display property to inline-block. Surprisingly, using display: inline-block in this scenario will work in all modern browsers and IE 6 and above. inline-block is a little-known but highly useful property.