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!
Related
Hello,
I am trying to finish the border around the button of btn-primary and after click it shows light blue border adjusting outline:0 but it is useless. How can I remove the border from this button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.container {
max-width: 520px;
max-height: 180px;
background-color: antiquewhite;
}
fieldset {
max-width: 518px;
max-height: 178px;
padding-right: 15px;
padding-left: 15px;
}
.btn{
font-weight:600;
color:#fff;
text-align:center;
vertical-align:middle;
border:1px solid transparent;
font-size:1.2rem;
line-height:1.5;
}
.btn-primary {
color: #fff;
background-color: #1172f4;
border-color: #000000;
}
.btn-primary: hover {
color: #fff;
background-color:#1172f4;
border-color: black;
}
.btn-primary: focus, .btn-primary. Focus {
color: #fff;
background-color:#1172f4;
border-color: #1875f6;
box-shadow: 0 0 0 0.2rem rgba(38, 38, 38, 0.5);
}
.btn: focus, .btn. Focus {
outline: 0;
}
button: focus{
outline:0;
}
/*.form-group{
max-width:518px;
}*/
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<form role="form" action method="post" class="registration-form" style="width:482px;height:175px;background-color:aqua;margin-left:5px;margin-right:5px;padding-left: 20px;padding-right: 20px;">
<fieldset>
<!--Start 2nd form field set-->
<div class="form-bottom">
<div class="form-group" style="margin-top:20px;width:100%;">
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control" id="form-email">
</div>
<!--End of 2nd form groupdiv-->
<button type="button" class="btn btn-primary btn-next" style="margin-top:20px;margin-bottom:20px;padding-right:15px;width:100%;">Get Started</button>
</div>
<!--End of bottom div-->
</fieldset>
<!--End of second form fieldset-->
</form>
</body>
</html>
My container and elements are also not showing the responsive behavior. Please help me to fix both issues. Which property in bootstrap btn-primary button handle these both borders.
Why are you declaring styling for buttons twice here?
.btn: focus, .btn. Focus {
outline: 0;
}
button: focus{
outline:0;
}
Also, styling using html components is a bad practice in web design. You should use class in most cases. For changing a particular element you should use id.
Answering to your question, it is a possible duplicate of Bootstrap button - remove outline on Chrome OS X that property around button when clicked is not outline, it is a box-shadow property. Remove your button styling definitions and replace them using this code:
.btn:focus{
box-shadow: none!important;
}
Then the shadow after click will disappear.
On another note, it seems that you are already using bootstrap 5 and inheriting styles from it. However, you are redefining the primary button styles manually. Why? Your imported CSS file should automatically update the primary button style. Also, do not put a space between focus and :.
As for your responsiveness issue, make your form responsive using bootstrap library since you're already using it.
https://getbootstrap.com/docs/4.0/components/forms/
The outline type thing that appears around the button as soon as it is clicked is not actually the outline property, it's the box-shadow property.
So, to solve this problem just add this box-shadow: none !important to the css of that button.
Try this out, it's the active class throwing off your code.
.btn-primary:active:focus {
box-shadow:none;
}
Inside your Chrome inspector, you can toggle the button states to debug. This one uses a combination of both :active:focus
Codepen
https://codepen.io/rickyhaswifi/pen/LYZMeoN?editors=1010
I am new to HTML and have been reverse engineering code to suit my own needs for developing an updated internal website for my work.
Currently I have my code linking to different .htm pages that simulate being on the same page. Obviously this is entirely too tedious to change if I need to add or change documents.
I know that I can change the source for an iframe, but every solution I have seen doesn't work for me. I'm so inexperienced I don't even know where to start. I've tried the onclick function, but it just breaks my buttons and does nothing beyond that.
Any help is appreciated.
Here is my current code:
<!DOCTYPE html>
<!---Version: 2.x FOUNDATION--->
<html>
<head>
<title align="center">MainPage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown {
top: 7px;
position: center;
display: inline-block;
}
.dropdown-menu {
background-color: white;
color: black;
padding: 12px;
font-size: 14px;
border: none;
left: -100%;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.navbar {
background-color: #C0C0C0;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
border-bottom: 0px;
}
/* Links inside the navbar */
.navbar a {
float: left;
position: center;
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Main content */
.main {
margin-top: 59px; /* Add a top margin to avoid content overlay */
}
iframe {
display: block;
border-style:none;
}
</style>
</head>
<body>
<!---Creates a Navbar at the top of the screen. Will scroll with site if content of the "Main" section is long enough.--->
<div class="navbar">
<p align="center" style="font-size:100%;"><b>Main Page</b></p> <!---Creates a "button" that links to the main page.--->
<div class="dropdown"> <!---The start of the buttons and drop down menus inside the Navbar.--->
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">On Air</a>
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="button1.htm">Example1</a></li>
<li class="dropdown-submenu"><!---Creates a submenu inside of the parent menu.--->
<a class= "test" tabindex="-1" href="#">Weather<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex"-1" href="submenuButton1.htm">Example 2</a><li>
<div class="main"> <!---Creates the Main section of the page that the navabar sits over.--->
<p align="center">Welcome to the new and improved sampleURL.</p>
<!---Creates an iframe that displays the sampleURL.--->
<p align="center"><iframe name="mainframe" width="100%" height="770" src="sampleURL.htm?wmode=transparent" frameborder="0" allowfullscreen wmode="transparent"></iframe></p>
</div>
</a>
<script><!---A script that allows the submenu functions to work properly.--->
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
Set a custom class to each tag that changes the iframe like this:
<a class="iframe-change" tabindex"-1" href="submenuButton1.htm">Example 2</a>
Now, catch the click event with this javascript script:
$(".iframe-change").on("click", function(event) {
event.preventDefault(); // Prevents the <a> event
$("[name=mainframe]").attr("src", $(this).attr("href")); // Changes the iframe "src" property to the url setted in the clicked <a>
});
I have tried for hours to get this to work trying multiple solved stack solutions and none have worked.
I am assuming I am either missing something or I have my divs/spans incorrect. Any help would be greatly appreciated. Currently my text is very small and bg color is grey and slightly transparent.
Also if it is possible to make the "info" icon smaller that would be great as well. Thank you!
.mainContainer {
width: 40%;
float: left;
}
.info {
display: flex;
}
.info .span {
align-self: center;
}
.info-button{
padding: 0;
border: none;
background: none;
outline: none;
background-color: transparent;
top:-10px;
}
<div class="mainContainer">
<h3>Main Title</h3>
<div class="info">
<h5>Title</h5><span class="info-span">
<button mat-icon-button class="info-button" #tooltip="matTooltip" matTooltip="Tooltip Text">
<mat-icon color="basic" >info</mat-icon>
</button>
</span>
</div>
</div>
Try this
::ng-deep .mat-tooltip {
background-color: transparent;
font-size: 12px;
}
You can set !important if not working.
Hope useful
You can use popper js to integrate and style tooltips it's easy and simple :
this is a quick exemple from the documentation :
<!DOCTYPE html>
<title>Popper example</title>
<style>
#tooltip {
background-color: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 13px;
}
</style>
<button id="button" aria-describedby="tooltip">I'm a button</button>
<div id="tooltip" role="tooltip">I'm a tooltip</div>
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script>
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
// Pass the button, the tooltip, and some options, and Popper will do the
// magic positioning for you:
Popper.createPopper(button, tooltip, {
placement: 'right',
});
</script>
or visit the official website to learn about popper js :Tutorial
I want to create a button aligned on the right side of the page similar to the "next" button in the new google sign in page with blue background. what is the code for that?
Something like this?
.nextButton {
padding: 10px 15px;
background-color: #4285f4;
border: 1px solid #4285f4;
color: white;
font-size: 16px;
}
<button type="button" class="nextButton">
Next
</button>
I hope this will help you.
Demo
.container {
margin-top: 50px;
margin-bottom: 50px;
}
a
{
margin-top: 200px;
float: right;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<a class="waves-effect waves-light btn">next</a>
</div>
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>