So my goal is to make an dropdown with decrement/increment button like below.
https://imgur.com/A4zleSX
and these are my current codes
<div class="dropdown">
<button class="btn border-0 dropdown-toggle form-control" type="button"
id="dropdownMenu2" data-toggle="dropdown" aria-expanded="false">
Dropdown</button>
<div class="dropdown-menu" style="width: 250px; background-color: #343a40"
aria-labelledby="dropdownMenu2">
<div class="dropdown-item">
<div class="row text-white">
<div class="col-md">
<i class="fa fa-user mr-2"></i>Adult</div>
<div class="col-md text-center">
<button class="btn btn-sm btn-success mx-2">+</button>
<span>1</span>
<button class="btn btn-sm btn-success mx-2">+</button>
</div>
</div>
</div>
</div>
So i've managed to make till this point, but i have problems when the button is clicked inside the dropdown, it scrolls to page the top and i also don't like the background color changes when the dropdown item is hovered.
please help me to make it happen, thank you
UPDATE:
so all left is preventing the page to scroll when the button inside dropdown is clicked, can anyone help please?
Firstly you need to keep on dropdown when user click anything in it.
JS:
$('.keep-open').on({
"shown.bs.dropdown": function() { $(this).attr('closable', false); },
"click": function() { },
"hide.bs.dropdown": function() { return $(this).attr('closable') == 'true'; }
});
$('.keep-open #dLabel').on({
"click": function() {
$(this).parent().attr('closable', true );
}
})
html:
<div class="dropdown-menu" role="menu" aria-labelledby="dLabel" style="width: 250px; background-color: #343a40" >
<div style="display: block;text-align:center;margin-bottom:5px;margin-top:5px">
<div style="display: inline-block;color:white">
<i class="fa fa-user mr-2" style="margin:15px;"></i>Adult</div>
<button class="btn btn-sm btn-success mx-2">-</button>
<span>1</span>
<button class="btn btn-sm btn-success mx-2">+</button>
</div>
<div style="display: block;text-align:center;margin-bottom:5px;">
<div style="display: inline-block;color:white;">
<i class="fa fa-user mr-2" style="color:white;margin:15px;"></i>Child</div>
<button class="btn btn-sm btn-success mx-2">-</button>
<span>1</span>
<button class="btn btn-sm btn-success mx-2">+</button>
</div>
</div>
plunker: http://plnkr.co/edit/s4nmZVXpLMzZLDSzVd24?p=preview
Related
I have a row of buttons in the bootstrap HTML website when I open it in desktop view it works perfectly, but in mobile view, it is a mess.
here is my code :
<div class="creative ">
<div class="container" style=" padding-top: 50px">
<div class="card mt-3" style=" background-color: rgba(255,255,255,.6);">
<div class="mt-1 card-body" id="artical">
{# <h4>El Gouna</h4>#}
<a class="btn btn-primary warn" href="#about">
<span>Divecenter</span>
</a>
<a class="btn btn-primary warn" href="#about">
<span>Hotels</span>
</a>
<a class="btn btn-primary warn" href="{% url 'price_list' %}">
<span>Price & Booking</span>
</a>
<a class="btn btn-primary warn" href="#contact">
<span>Book Hotel</span>
............
You can use block buttons on small devices and use flexbox on larger screens like this.
.wrap {
border: 1px solid black;
max-width: 500px;
padding: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap d-grid gap-2 d-md-flex">
<button class="btn btn-primary flex-md-fill">
Button
</button>
<button class="btn btn-primary flex-md-fill">
Button
</button>
<button class="btn btn-primary flex-md-fill">
Button
</button>
</div>
Here I added 2 buttons on the header of the accordian, but when I click the button the entire accordian collapses or expands. Is there a way to add buttons to it in such a way that clicking them won't collapse or expand the accordion?
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
aria-controls="panelsStayOpen-collapseTwo">
<div>26-08-21</div>
<div style="margin-left: -20px;" class="col-1"></div>
<div>project_id</div>
<div class="col-3"></div>
<div>title</div>
<div class="col-3"></div>
</button>
<button type="button" class="btn btn-sm btn-success">
<em class="far fa-edit"></em> Edit
</button>
<button type="button" class="btn btn-sm btn-danger">
<i class="far fa-trash-alt"></i> Delete
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<br>
<button style="margin-left: 20px;" type="button" class="btn btn-sm btn-outline-primary">Download CSV</button>
</div>
</div>
</div>
With the on click of buttons, you need to use $event.stopPropagation()
public onButtonClick($event): void {
// Do something on click
$event.stopPropagation()
}
I used ngb dropdown to display the different statuses that my task can have ('to do', 'in progress', 'done'). Everything works fine, but there is one small issue that's still bothering me. After clicking one of the options I want the dropdown menu to close. At the moment it remains open. How can I close this menu when I click on it?
as you can see below I changed the status on two posts, but the dropdown menu remains open, which is not really something I want
Template code
<div class="col-md-4 text-right padding-topright" style=" object-fit: cover;">
<div ngbDropdown class="d-inline-block">
<button class="btn btn-sm kbn-todo" *ngIf="post.task.status == 'to do'" id="dropdownDone" style=" color: white;"
ngbDropdownToggle>{{post.task.status}}</button>
<button class="btn btn-sm kbn-working" *ngIf="post.task.status == 'in progress'" id="dropdownDone" style=" color: white;"
ngbDropdownToggle>{{post.task.status}}</button>
<button class="btn btn-sm kbn-done" *ngIf="post.task.status == 'done'" id="dropdownDone" style=" color: white;"
ngbDropdownToggle>{{post.task.status}}</button>
<div ngbDropdownMenu aria-labelledby="dropdownToDo">
<button class="dropdown-item pumpkin-orange-bg" (click)="OnMarkTaskToDo(i, this.post._id)">To Do</button>
<button class="dropdown-item" (click)="OnMarkTaskInProgress(i, this.post._id)">In Progress</button>
<button class="dropdown-item" (click)="OnMarkTaskCompleted(i, this.post._id)">Done</button>
</div>
</div>
<p class="small font-weight-bold" style="margin-top: 5px" *ngIf="post.task?.due_to != 'Invalid date'"> due {{post.task?.due_to | date}}</p>
<!-- <p class="small font-weight-bold" style="margin-top: 5px"> status- {{post.task?.status}}</p> -->
</div>
You can do something like this:
<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
<button class="btn btn-outline-primary mr-2" id="dropdownManual" ngbDropdownAnchor (focus)="myDrop.open()">Toggle dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownManual">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>
<button class="btn btn-outline-danger mr-2" (click)="myDrop.close();">Close from outside</button>
Take a closer look on:
#myDrop="ngbDropdown"
And:
(click)="myDrop.close();"
I suppose there are many people which would like this solution.
This is an example taken from: https://ng-bootstrap.github.io/#/components/dropdown/examples
If you question is about CSS/HTML, you just need to apply something as display: none in your menu container.
But you you question is about Angular, you will need something like this:
showMenu: boolean = false;
closeMenu() {
let displayMenu = showMenu ? true : false;
return displayMenu;
}
<div class="menu-container" *ngIf="showMenu">
<button class="close-menu" (click)="closeMenu()"></button>
</div>
This process can be done in very different ways and everything it will depend how you want to work, with animation, with a global event to click "out" of the menu and then the menu disappears, and on...
Anyway I hope these examples can make your path more clear.
I'm trying to wrap or resize text inside bootstrap button without changing button size.I have couple buttons that must be aligned
I've used this class,text is wrap but button grows in size affecting the alignment with other buttons
.btn-wrap-text {
white-space: normal !important;
word-wrap: break-word !important;
}
There is sample code,just resize the view:
https://jsfiddle.net/mrapi/3yv314dx/1/
thanks
Not sure why all the complicated solutions.
Just add the following to your .btn css:
white-space: normal;
So, if you already have a .btn in your global css file, do this:
.btn {
white-space: normal;
}
Or if you do not have anything in your global css file, just do it inline, such as:
<button type="button" class="btn btn-primary" style="white-space: normal;">This is some button with text that should wrap</button>
Note: This method may not work on archaic versions of IE
Here you go with a solution https://jsfiddle.net/3yv314dx/3/
$('[data-toggle="tooltip"]').tooltip();
.btn-outline {
background-color: transparent;
color: inherit;
transition: all .5s;
}
.btn-wrap-text {
overflow: hidden;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE WITH LONGER NAME
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE WITH LONGER NAME
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline btn-wrap-text" data-toggle="tooltip" title="ARTICLE WITH LONGER NAME">
ARTICLE WITH LONGER NAME
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
</div>
</div>
</div>
Here in the solution, I've used ellipse to truncate extra characters & to show entire text used tooltip
You can change the font size. If you dont want to change the font size use the below code
.btn-wrap-text {
overflow: hidden;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
}
I am building a login page with social buttons using Font Awesome icons. On larger devices the buttons are displayed horizontally next to each other, but as I resize my screen the right-most button will wrap underneath the other two buttons when they get too wide for the column. I would like for the buttons to stack vertically and expand to fill the space of the column instead of having a misplaced button underneath. I've tried a method using media queries but it's a bit hacky and I'm afraid it won't be easy to maintain, so I scratched that idea.
Here's what I have so far:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<div class="row">
<button id="login" class="btn btn-default">Login</button>
<button id="facebook" class="btn btn-default"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
<button id="google" class="btn btn-default"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
</div>
Any suggestions on how to tackle this?
You have two options. In my opinion media queries would be the cleanest but here are the options:
1) Adding a media query and targeting a special class that you can add to just those buttons:
#media screen and (max-width: 768px){
.loginBtns {
width:100%;
display:block;
margin: 10px 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8 col-xs-12">
<div class="row">
<button id="login" class="btn btn-default loginBtns">Login</button>
<button id="facebook" class="btn btn-default loginBtns"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
<button id="google" class="btn btn-default loginBtns"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
</div>
2) Duplicating the buttons and hiding one version on small screens while showing the other. I'm not a big fan of duplicating code so I wouldn't recommend this option but if you don't like media queries it could be an option.
.loginBtns2 {
width:100%;
margin: 5px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8 hidden-xs">
<div class="row">
<button id="login" class="btn btn-default loginBtns">Login</button>
<button id="facebook" class="btn btn-default loginBtns"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
<button id="google" class="btn btn-default loginBtns"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
<div class="col-xs-12 visible-xs">
<div class="row">
<button id="login" class="btn btn-default loginBtns2">Login</button>
</div>
<div class="row">
<button id="facebook" class="btn btn-default loginBtns2"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
</div>
<div class="row">
<button id="google" class="btn btn-default loginBtns2"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
Here is a working codepen with both options too:
https://codepen.io/egerrard/pen/woVEJW
not sure if this helpful. but try this..
<div class="container">
<div class="row text-center">
<div class="col-md-6">
<button id="login" class="btn btn-default">Login</button>
<button id="facebook" class="btn btn-primary"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button>
<button id="google" class="btn btn-danger"><span class="fa fa-google fa-lg"></span> Google Login</button>
</div>
</div>
</div>