How to style the button in bootstrap vue dropdown like a circle - javascript

I am using Bootstrap Vue b-dropdown (https://bootstrap-vue.org/docs/components/dropdown) like so:
I want to be able to style the button (to open the dropdown) as a circle with a + icon inside of it.
I can create the circle using the following css:
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
border-radius: 35px;
font-size: 24px;
line-height: 1.33;
}
.btn-circle {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
text-align: center;
font-size: 12px;
line-height: 1.42857;
}
And then using
<b-button
class="btn btn-circle btn-xl"
>
<i class="far fa-plus" />
</b-button>
Generates my circular button.
However,when using bootstrap vue dropdown, the option to style the button is with using the template:
<template #button-content>
<b-button
class="btn btn-circle btn-xl"
>
<i class="far fa-plus" /><span class="sr-only">{{ $tU('general_actions') }}</span>
</b-button>
</template>
This does however give the correct result, but semantically, it creates a button inside a button.
How do I solve this so that it's not longer a button inside a button, but it still gives the correct layout?
EDIT: I tried creating a codepen, but I don't know why nothing is showing up...
https://codepen.io/anjazb/pen/zYBoMQp

If you want to add classes to the toggle button inside <b-dropdown>, use the toggle-class prop.
There might also be an easier way for you to create a round button by using the utility class rounded-circle, to create a round border radius, and px-2 to adjust the padding to fit correctly.
new Vue({
el: '#app'
})
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.18.1/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.18.1/dist/bootstrap-vue-icons.js"></script>
<link href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.18.1/dist/bootstrap-vue.css" rel="stylesheet" />
<div id="app">
<b-button variant="primary" class="rounded-circle px-2">
<b-icon icon="plus" scale="2"></b-icon>
</b-button>
<b-dropdown variant="primary" toggle-class="rounded-circle px-2" no-caret>
<template #button-content>
<b-icon icon="plus" scale="2"></b-icon>
</template>
<b-dropdown-item>Item 1</b-dropdown-item>
<b-dropdown-item>Item 2</b-dropdown-item>
<b-dropdown-item>Item 3</b-dropdown-item>
</b-dropdown>
</div>

Even this will work in version 4 by using:
css:border-radius:100%;
bootstrap: removing dropdown-toggle and using
<i class="fa fa-plus" aria-hidden="false"></i></button>
the whole code is like :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-11/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Title</title>
<style>
</style>
</head>
<body>
<div>
<button class="btn btn-primary " style="border-radius:100%;" id="dropdownMenuButton" data-toggle="dropdown">
<i class="fa fa-plus" aria-hidden="false"></i></button>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
see:
https://jsfiddle.net/9ubdkm2r/1/

Related

How to make minus icon disappear using for in loop

When click on save button function myfunc2 will be exceuted which use a for in loop to iterate the minus array. This array conatain all the minus icon. i set style.display = 'none' and expect when i click the save button the icon will disappear, but it didn't work. i dont know what went wrong
const minus = document.getElementsByClassName('minus');
const item = document.getElementsByClassName('item');
const input = document.getElementsByTagName('input');
//right
const save_btn = document.getElementById('save');
save_btn.addEventListener('click',myfunc2);
//delete all minus
function myfunc2() {
for(let x in minus) {
minus[x].style.display = 'none';
}
}
* {
box-sizing: border-box;
}
.fa {
padding: 5px;
border-radius: 50%;
border: 1px solid blue;
}
.item {
gap: 10px;
}
a:hover {
cursor: pointer;
}
<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">
<title>Document</title>
<!--font awe-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bs-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-3">
<h1>Bucket list</h1>
<button type="submit" class="btn btn-primary mb-3">Add item</button>
<form>
<!--d-flex overide item-->
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<button type="submit" class="btn btn-success save">Save</button>
<button type="submit" class="btn btn-danger">Edit</button>
</form>
</div>
<script src="js.js"></script>
</body>
</html>
There are 2 things you are doing wrong. First of all,
const save_btn = document.getElementByClassName('save');
should be
const save_btn = document.getElementsByClassName('save');
Secondly, save_btn would now be an array since you have gotten multiple elements by class name (hence the getElementsByClassName) plural form.
The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name(s). (doc)
So calling save_btn.addEventListener('click',myfunc2); wouldn't work since you are trying to assign this to an array. You either use
save_btn[0].addEventListener('click',myfunc2);
or, a more recommended approach, give the button an id and use getElementById() (doc)
Changed snippet below:
const minus = document.getElementsByClassName('minus');
const item = document.getElementsByClassName('item');
const input = document.getElementsByTagName('input');
//right
const save_btn = document.getElementById('saveBtn');
save_btn.addEventListener('click', myfunc2);
//delete all minus
function myfunc2() {
[].forEach.call(minus, function(m) {
m.style.display = 'none';
});
}
* {
box-sizing: border-box;
}
.fa {
padding: 5px;
border-radius: 50%;
border: 1px solid blue;
}
.item {
gap: 10px;
}
a:hover {
cursor: pointer;
}
<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">
<title>Document</title>
<!--font awe-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bs-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-3">
<h1>Bucket list</h1>
<button type="submit" class="btn btn-primary mb-3">Add item</button>
<form>
<!--d-flex overide item-->
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<button type="button" id="saveBtn" class="btn btn-success save">Save</button>
<button type="submit" class="btn btn-danger">Edit</button>
</form>
</div>
<script src="js.js"></script>
</body>
</html>

How to run function on expand and on close dropdown bootstrap

the following code generates a bootstrap navbar with a notification icon and I want to execute a function when I click the notification button to expand the dropdown and when I close the dropdown how do I do this in javascript?
I have try'd selecting the dropdown and modifying the click function but that executes when you click a element in the dropdown not when you click the button.
#ex4 {
color: white;
width: auto;
}
#ex4 .p1.has-badge:after {
position: absolute;
right: 10%;
top: 8%;
content: attr(data-count);
font-size: 40%;
padding: .2em;
border-radius: 50%;
line-height: 1em;
color: white;
background: rgba(255, 0, 0, .85);
text-align: center;
min-width: 1.5em;
}
form.logout {
padding-left: 10px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Font awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Page style -->
<link rel="stylesheet" href="CSS/index.css">
<!-- Title -->
<title>Social Feed</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Social Feed</a>
<div class="d-flex align-items-center">
<div class="dropdown">
<a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<div id="ex4">
<span class="p1 fa-stack fa-2x has-badge" data-count="0" id="badge">
<i class="p2 fa fa-bell fa-stack-1x xfa-inverse"></i>
</span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end">
<div id="notifications-header">
<h1>Notifications</h1>
</div>
<div id="notifications">
</div>
</div>
</div>
<form a name="logout" class="logout" action="PHP/Logout.php" method="get">
<button type="submit" class="btn btn-danger">Log Out</button>
</form>
</div>
</div>
</nav>
</body>
</script>
</html>
Hook into the Dropdown events
var myDropdown = document.getElementById('myDropdown')
//expand/open
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something when opened...
})
//hide/close
myDropdown.addEventListener('hide.bs.dropdown', function () {
// do something when closed...
})
Codeply

How to give link inside the tooltip(not pop over) and when we hover over the button we should able to click on the same

I have given a tooltip over a button, and I have also provided link on the text when we hover over the button, but I am not able to click on the link.
and I have given link to the whole text, but I want to give to the particular section,
here is my html and bootstrap code:
<a disabled data-html="true"
style="float:right !important;"
class="btn btn-info btn-sm pull-right"
href="https://www.google.com"
data-toggle="tooltip" data-html="true"
title="Print Result Summary
I have solved this problem:
<span class="d-inline-block pull-right btn-sm pull-right" tabindex="0" data-toggle="tooltip">
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true" title="
Print feature is enabled for subscription users.<a href='www.google.com'> Sign up Today</a>">
Print Result Summary
</button>
</span>
What about something the direction of the following approach:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p.myTooltip {
display: none;
background-color: yellow;
padding: 10px;
margin-top: -5px;
z-index: 10;
position: relative;
opacity: 0.8;
}
div:hover p.myTooltip {
display: block;
}
</style>
</head>
<body>
<div>
<input type="submit" value="Hover me and see" />
<p class="myTooltip">
Tada here I am Google me
</p>
</div>
</body>
</html>

bootstrap dropdown doesn't show dropdowns on click

I've been learning bootstrap and I have a very basic page I'm working on to learn hands on with. I tried adding in a dropdown and it doesn't dropdown at all when it is clicked, I checked to forum and the main thing was people not having the bootstrap js link, so I made sure I included that, and I'm pretty sure that I have all the proper links for it to work. (code is being weird in snippet, works normally on everything else) Thanks for the help, my code is:
.div1 {
background-color:#80bfff;
}
.div2 {
background-color:#ccffff;
}
.div3 {
background-color:#80bfff;
}
.row {
height: calc(100vh - 300px);
}
#main {
background-color: #3333ff;
}
#main_head {
height: 150px;
margin: 0;
}
#main_foot {
height: 150px;
background-color:#3333ff;
margin: 0;
position: absolute;
left: 0;
right: 0;
}
h1 {
color: black;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
<div class="btn-group-vertical">
<h4>These buttons don't work yet because I haven't implemented anything yet</h4>
<button type="button" class="btn btn-warning">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-success">Button 3</button>
</div>
</div>
<div class="col-sm-8 div2">
</div>
<div class="col-sm-2 div3">
<div class="container">
<h4>This is a dropdown menu</h4>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3t</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
First you'r calling two bootstrap version one in the head and one on the footer , second you need to call popper.js before bootstrap.js
see snippet
.div1 {
background-color:#80bfff;
}
.div2 {
background-color:#ccffff;
}
.div3 {
background-color:#80bfff;
}
.row {
height: calc(100vh - 300px);
}
#main {
background-color: #3333ff;
}
#main_head {
height: 150px;
margin: 0;
}
#main_foot {
height: 150px;
background-color:#3333ff;
margin: 0;
position: absolute;
left: 0;
right: 0;
}
h1 {
color: black;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
<div class="btn-group-vertical">
<h4>These buttons don't work yet because I haven't implemented anything yet</h4>
<button type="button" class="btn btn-warning">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-success">Button 3</button>
</div>
</div>
<div class="col-sm-8 div2">
</div>
<div class="col-sm-2 div3">
<div class="container">
<h4>This is a dropdown menu</h4>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3t</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
</div>
</body>
</html>
I think you sould try using another CDN files, this worked for me
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

How to get materialize fixed action button working in angular 2

I am trying to get the FAB from materializeCSS to work but nothing I try is working. Heres my code:
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DevWright Education</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="http://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
crossorigin="anonymous"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body style="background-color: #eceff1;">
<de-root>
<img src="assets/images/ripple.gif" alt="">
</de-root>
</body>
</html>
new-post-card.component.html:
<div class="card">
<div class="card-content">
<span class="card-title">Post something!</span>
<!-- Fixed Action Button -->
<div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
</div>
</div>
I've tried using angular2-materialize but i cant find the right component to work with it.
In my case it was because the position on the FAB was fixed, so changing
<div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px;">
to
<div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px; position:static;">
fixed the problem.

Categories