i have the following html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<tr>
<td class="text-center">
<button type="button" data-toggle="dropdown" class="btn btn-warning dropdown-toggle" aria-expanded="false">
<i class="fa fa-phone" aria-hidden="true"></i>
<div style="background-color:white;width:0.5em;display:inline-block;"></div>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right"> <li><i class="fa fa-eye"></i> Vizualizeaza</li>
<li><i class="fa fa-plus"></i> Adauga</li>
</ul>
</td>
</tr>
what i'm trying to do is to make a dropdown, but i have two problems, first one, the div in the middle of the button won't display (i need to make a white delimitation, i don't know if this is the right way i'm trying)
and second, this html it inside a loop and when i click the button, the dropdown opens at the end of the table
You need to add dropdown class for making the dropdown to work as follows
<tr>
<td class="text-center">
<div class="dropdown">
<button type="button" data-toggle="dropdown" class="btn btn-warning dropdown-toggle" aria-expanded="false">
<i class="fa fa-phone" aria-hidden="true"></i>
<div style="background-color:white;width:0.5em;display:inline-block;"></div>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><i class="fa fa-eye"></i> Vizualizeaza</li>
<li><i class="fa fa-plus"></i> Adauga</li>
</ul>
</div>
</td>
</tr>
And for making the div visible specify height property as well
<div style="background-color:white;width:0.5em;display:inline-block;"></div>
Hope this works
I think I have an idea of what you're trying to accomplish. All of the code to do this can be found on bootstrap's website. That link will direct you to how to create dropdown buttons in bootstrap 3. Additionally, here's a link to a codeply project with the code in action.
<tr>
<td>
<div class="btn-group">
<button type="button" class="btn btn-warning"><i class="fa fa-phone"></i></button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><i class="fa fa-eye"></i> Vizualizeaza</li>
<li><i class="fa fa-plus"></i> Adauga</li>
</ul>
</div>
</td>
</tr>
WORKING EXAMPLE ! Please wrap Button and ul inside a div."'div class="btn-group">'", This should resolve your problem.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td class="text-center">
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-warning dropdown-toggle" aria-expanded="false">
<i class="fa fa-phone" aria-hidden="true">Button click</i>
<div style="background-color:white;width:0.5em;display:inline-block;"></div>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu"><li><i class="fa fa-eye"></i> Vizualizeaza</li>
<li><i class="fa fa-plus"></i> Adauga</li>
</ul>
</div>
</td>
</tr>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Basically, You should wrap button and ul inside a div with below properties.
position: relative;
display: inline-block;
vertical-align: middle;
Or you can use bootstrap class "btn-group"
Related
I have the code and markup shown here for a button, but for some reason the dropdown functionality does not work - need a fresh pair of eyes please...
<td class="text-right">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu shadow animated--grow-in">
<a class="dropdown-item">
<i class="fas fa-pencil-alt"></i> Edit
</a>
<form class="d-inline">
<a class="dropdown-item"><i class="fas fa-trash-alt"></i> Delete</a>
</form>
</div>
</div>
</td>
Have you refered the css file and js file ?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" >
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" ></script>
Notice the css file should be refer before other css file and the order of js file could not be reversed
In my case:
This is my HTML
<div class="row">
<div class="col-md-6">
<div class="dropdown pull-left">
<button class="btn btn-xs btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-left" aria-labelledby="dropdownMenu1">
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
<span class="dark_gray_font pull-right">Ventes fleurs à 12%</span>
</div>
<div class="col-md-5">
<span class="dark_gray_font pull-right">25 <i class="fa fa-eur"></i></span>
<hr>
</div>
Edit
If select Edit option, I want to change
<span class="dark_gray_font pull-right">Ventes fleurs à 12%</span>
&
<span class="dark_gray_font pull-right">25 <i class="fa fa-eur"></i></span>
to input box
Delete
If select Delete option, I want to remove whole div (<div class="row">...</div>)
I tried to do it but my functions are wrong.
any help please.
Thank you.
Can be done by writing ng-click listeners on 'Edit' and 'Delete' element.And having a hidden input field each data record which will be shown when user press 'Edit' & the span element will be made hidden at that time.
In the below example if written makeItEditable as an edit listener & deleteIt as a delete listener.
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function (response) {$scope.names = response.data.records;});
$scope.makeItEditable=function(index){
if($scope.currentEditableIndex!=null)
$scope.names[$scope.currentEditableIndex].editable=false;
$scope.names[index].editable=true;
$scope.currentEditableIndex=index;
}
$scope.deleteIt=function(index){
if($scope.currentEditableIndex!=null)
$scope.names[$scope.currentEditableIndex].editable=false;
$scope.names.splice(index,1);
$scope.currentEditableIndex=null;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<div class="row" ng-repeat="x in names">
<div class="col-md-6">
<div class="dropdown pull-left">
<button class="btn btn-xs btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-left" aria-labelledby="dropdownMenu1">
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
<span ng-hide="x.editable" class="dark_gray_font pull-right">{{x.Name}}</span>
<input ng-show="x.editable" type='text' ng-model="x.Name"/>
</div>
<div class="col-md-5">
<span ng-hide="x.editable" class="dark_gray_font pull-right">{{x.Country}}<i class="fa fa-eur"></i></span>
<input ng-show="x.editable" type='text' ng-model="x.Country"/>
<hr>
</div>
</div>
You can have input fields adjacent to you span tags, which you can show/hide based on click of Edit and blur of the input field respectively.
angular.module('app', [])
.controller("test", function($scope) {
$scope.text1 = "Ventes fleurs à 12%";
$scope.text2 = "25";
$scope.edit = function() {
$scope.editText1 = true;
$scope.editText2 = true;
}
})
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="test">
<div class="row">
<div class="col-md-6">
<div class="dropdown pull-left">
<button class="btn btn-xs btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-left" aria-labelledby="dropdownMenu1">
<li>Edit
</li>
<li>Delete
</li>
</ul>
</div>
<span class="dark_gray_font pull-right" ng-show="!editText1">{{text1}}</span>
<input type="text" class="dark_gray_font pull-right" ng-model="text1" ng-show="editText1" ng-blur="editText1=false" />
</div>
<div class="col-md-5">
<span class="dark_gray_font pull-right" ng-show="!editText2">{{text2}} <i class="fa fa-eur"></i>
</span>
<input type="text" class="dark_gray_font pull-right" ng-model="text2" ng-show="editText2" ng-blur="editText2=false" />
</div>
</div>
I'm using Bootstrap 3 and I have a line of buttons. One of them is a <a> button, or: <a class='btn btn-default' role='button'>Button here</a>; the rest are <button> elements with the same classes.
I was expecting to have them all correctly aligned and spaced, as seen in Bootstrap's examples, however, the result was this:
As you can see, the first button, the one specified as <a> doesn't have the right margin with the next button. What can be causing this?
Here's my HTML:
<a class="btn btn-default" role="button">
<i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
The anchor tags and buttons are correctly spaced because they are inline-block- not sure how there is no spacing between the a and the button you got over there.
Try floating them and then you can remove the space between them if you want to- and set the required margin if needed.
They must be correctly aligned and spaced by default- see below snippet:
a.btn, button.btn {
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<body>
<a class="btn btn-default" role="button">
<i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
</body>
See what happens when we float them:
a.btn, button.btn {
margin: 0;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<body>
<a class="btn btn-default" role="button">
<i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
</body>
I'm struggling with a problem for several days now and I couldn't find a solution yet, even though I've tried myself with different approaches, searched google and the mighty stackoverlow for hours.
The set-up:
I've got a panel with two list-groups next to each other, where relations can be managed. On the left are the linked items, on the right all available items that are not linked yet (featuring a pagination and all). The js-logic is working flawless. Clicking on a question-mark does display details for the item. Clicking on a plus moves an item to the left list, clicking on an "x" moves it back to the right. Of course the icons are properly switched, too.
The problem:
The items are user-generated and the form is used both on big and small screens (used bootstrap for that reason).
Some of the items do have a rather long name, limiting the users to keep it short is not an option here. If the text is too long, it just breaks out of the layout.
What I tried so far:
Since the input-groups work with simulating table-elements, I've tried several approaches with table-layout:fixed;, but that doesn't seem to work if it's not really a table. Then I tried several approaches with containing different elements in div-containers and giving them percentual sizes.
It never worked.
Now I'm experimenting with cutting the text server-side, but that looks stupid if the screen is wide enough and the text is cut anyway.
Does someone smarter than me have a solution that makes overflow:hidden; and text-overflow:ellipis; work on those elements?
Here is a (very cleaned-up) fiddle to work with:
https://jsfiddle.net/Fanmade/9vf8xvuL/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<ul class="list-group" id="left">
<li class="list-group-item">
<h4 class="text-center">Header Left</h4>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 1
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 2
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 3
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-group" id="left">
<li class="list-group-item">
<h4 class="text-center">Header Right</h4>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 4
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 5 just has a really long text and I don't want to cut it when there is enough space on wide screens
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 6
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Edit after the answers:
Thank you both so much for the answer!
I'm feeling so stupid right now. Of course the answer had to be so simple and I was just searching in the wrong direction.
The working fiddle is
https://jsfiddle.net/sesn/y98pz4hj/1/
Here is your answer
button { white-space: normal !important; height: auto !important; }
It will work :
button {
white-space: normal !important;
height: auto !important;
}
I am building an app with Bootstrap 3.3 and Bootstrap Material Design framework. I am trying to make a floating action button that opens when you click it.
In an attempt to do this, I've created this Bootply, which has the following code:
<div class="btn-group dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i></button>
<ul class="dropdown-menu dropdown-menu-right" style="min-width:0; background-color:transparent;">
<li><i class="material-icons">clear</i></li>
</ul>
</div>
The buttons works, but it doesn't look right. There are two issues that are driving me nuts. First, the popup menu isn't transparent. There is like a border and shadow that I can't seem to get rid of.
Second, I can't use the small version of the buttons as shown in the Floating action buttons section of the Bootstrap Material Design framework page. I'm not sure what I'm doing wrong.
So the .dropdown-menu in bootstrap CSS has by default box-shadow and border, which you have to reset it in order to make it transparent.
Plus in your Bootply it's not applying the Material Design Icons, because you didn't link the fonts.
Regarding small icons, add .btn-group-sm to .btn-group
Here is a working SNIPPET with examples for every sizes.
.floating-action-button {
position: relative;
top: 100px;
margin-left: 50px;
}
ul.dropdown-menu {
box-shadow: none;
border: 0;
min-width:0;
background:transparent
}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Material Design fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Code -->
<div class="btn-group btn-group-lg dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><i class="material-icons">clear</i>
</li>
</ul>
</div><div class="btn-group dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><i class="material-icons">clear</i>
</li>
</ul>
</div>
<div class="btn-group btn-group-sm dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><i class="material-icons">clear</i>
</li>
</ul>
</div>
<div class="btn-group btn-group-xs dropup floating-action-button">
<button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><i class="material-icons">clear</i>
</li>
</ul>
</div>
I wouldn't say that it is ideal, but the following seems to solve part of your problem.
.dropdown-menu {
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}
Unfortunately, I was not able to figure out what the material-icons class didn't work. Hopefully this answer will help you get closer to a solution.