I am trying to create same size button (hyperlink) with FontAwesome.
HTML as below:
<a class="btn btn-lg btn-info" href="#">
Button 1 Info<br /> sub<br />
<i class="fa fa-flag fa-2x pull-right"></i>
</a>
<a class="btn btn-lg btn-info" href="#">
Button 2<br /><br />
<i class="fa fa-cloud-upload fa-2x pull-right"></i>
</a>
<a class="btn btn-lg btn-info" href="#">
Button<br /><br />
<i class="fa fa-cloud-download fa-2x pull-right"></i>
</a>
See Image as below.
All button should be of same size
Is there any inbuilt css class in font awesome?
Related
The buttons I created to link to my social media are not working as expected. When I click the button it doesn't open the link unless I click the link's icon.
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<section id="contact" class="py-5 text-center">
<div class="container text-center ml-auto">
<div class="row">
<div class="col">
<div class="info-header md-5 text-light ">
<h1 class="text-primary pb-3">CONTACT US</h1>
<button class="btn btn-outline-success mr-3">
<a style="color: green;" target="_blank" href="https://wa.me/2349080237740"><i class="fa fa-whatsapp fa-1x"></i></a>
</button>
<button class="btn btn-outline-primary mr-3">
<a class="text-primary" target="_blank" href="https://t.me/dopewilly"><i class="fa fa-telegram fa-1x"></i></a>
</button>
<button class="btn btn-outline-danger mr-3">
<a class="text-danger" target="_blank" href="#"><i class="fa fa-instagram fa-1x"></i></a>
</button>
<button class="btn btn-outline-info">
<a target="_blank" href="#"><i class="fa fa-twitter fa-1x"></i></a>
</button>
</div>
</div>
</div>
</div>
</section>
Instead of having the <a> inside the <button> which is invalid and creates the issue you are encountering, move your <button> classes to the <a> and remove the <button> tags after, like this:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<section id="contact" class="py-5 text-center">
<div class="container text-center ml-auto">
<div class="row">
<div class="col">
<div class="info-header md-5 text-light ">
<h1 class="text-primary pb-3">CONTACT US</h1>
<a class="btn btn-outline-success mr-3" style="color: green;" target="_blank" href="https://wa.me/2349080237740"><i class="fa fa-whatsapp fa-1x"></i></a>
<a class="btn btn-outline-primary mr-3 text-primary" target="_blank" href="https://t.me/dopewilly"><i class="fa fa-telegram fa-1x"></i></a>
<a class="btn btn-outline-danger mr-3 text-danger" target="_blank" href="#"><i class="fa fa-instagram fa-1x"></i></a>
<a class="btn btn-outline-info" target="_blank" href="#"><i class="fa fa-twitter fa-1x"></i></a>
</div>
</div>
</div>
</div>
</section>
I am currently working on my first website and I'm attempting to create a product page using bootstrap. However, it seems that the columns and rows are not working with bootstrap. Alongside with the columns not working other things aren't working properly such as the shopping cart icon. What am I missing? here is my code.
HTML:
<head>
<meta charest="UTF-8">
<meta name="veiwport" content="width=device-width, initial-scaled=1.0">
<meta http-equiv="X-UA-Compatible" content="id=edge">
<title>Store</title>
<link rel="stylesheet" href="css/stylesheet.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./css/lightbox.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="./js/lightbox-plus-jquery.min.js"></script>
</head>
<body>
<header id="store-header">
<div class="main">
<div class="logo-text">
<h1 class="text-logo">Your Local Artist</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Store</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</header>
<div class="page-wrapper">
<div class="logo-top">
<h1 class="logo-text">
Your Local Artist
</h1>
<h2>
|Store
</h2>
</div>
<div class="store-container">
<h2>New Arrivals</h2>
<div class="row">
<div class="col-md-3">
<div class="product-top">
<img src="./products/resize2.jpg">
<div class="overlay">
<button type="button" class="btn btn-secondary" title="Quick SHOP"><i class="fa fa-eye"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Wishlist"><i class="fa fa-heart-o"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Cart"><i class="fa fa-shopping-cart"></i></button>
</div>
<div class="product-bottom text-center">
<i class="fa fas-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-half-o"></i>
<h3>Art painting</h3>
<h5>€100.00</h5>
</div>
</div>
</div>
<div class="product-top">
<img src="./products/resize2.jpg">
<div class="overlay">
<button type="button" class="btn btn-secondary" title="Quick SHOP"><i class="fa fa-eye"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Wishlist"><i class="fa fa-heart-o"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Cart"><i class="fa fa-shopping-cart"></i></button>
</div>
<div class="product-bottom text-center">
<i class="fa fas-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-half-o"></i>
<h3>Art painting</h3>
<h5>€100.00</h5>
</div>
</div>
</div>
<div class="product-top">
<img src="./products/resize2.jpg">
<div class="overlay">
<button type="button" class="btn btn-secondary" title="Quick SHOP"><i class="fa fa-eye"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Wishlist"><i class="fa fa-heart-o"></i></button>
<button type="button" class="btn btn-secondary" title="Add to Cart"><i class="fa fa-shopping-cart"></i></button>
</div>
<div class="product-bottom text-center">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-half-o"></i>
<h3>Art painting</h3>
<h5>€100.00</h5>
</div>
</div>
</div>
</div>
</div>
Replace your Bootstrap and font awesome CDN with this(I replaced and it started working)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
I'm building my NavBar in ReactJS using bootstrap 4.
I would like to take some element at the center of the navbar and others on the right.
In this particular case I would like to have the logout icon on the right.
This is the current situation:
This is the current code:
render () {
return (
<nav className="navbar navbar-dark bg-primary fixed-top">
<Link className="navbar-brand" to="/">
App
</Link>
{
!localStorage.getItem('token') &&
<button className="btn btn-dark" onClick={this.loginClicked}>Login</button>
}
{
localStorage.getItem('token') &&
<div className="mx-auto order-0">
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-file-invoice-dollar fa-lg"></i>
<sup className="notification-badge"><span class="badge badge-success">1</span></sup>
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg"></i>
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg"></i>
</button>
<button className="btn btn-outline-danger btn-lg" onClick={this.logoutClicked}>
<i class="fas fa-sign-out-alt fa-lg"></i>
</button>
</div>
}
</nav>
);
}
And this is what I would like to have:
Here's what you will have to do:
You don't even have to over-write the flex properties. The bootstrap nav comes with display flex & space-around property by default.
Group your html content as shown -
A. navbar-brand
B. a parent div that contains the elements you want in the center
C. your logout button
Remove the margin auto class(mx-auto order-0) classes from your code. This is the culprit.
Change your react code to:
render() {
return (
<nav className="navbar navbar-dark bg-primary fixed-top">
<Link className="navbar-brand" to="/">
App
</Link>
{!localStorage.getItem("token") && (
<button className="btn btn-dark" onClick={this.loginClicked}>
Login
</button>
)}
{localStorage.getItem("token") && (
<React.Fragment>
<div className="first-part">
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-file-invoice-dollar fa-lg" />
<sup className="notification-badge">
<span class="badge badge-success">1</span>
</sup>
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg" />
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg" />
</button>
</div>
<div className="second-part">
<button
className="btn btn-outline-danger btn-lg"
onClick={this.logoutClicked}
>
<i class="fas fa-sign-out-alt fa-lg" />
</button>
</div>
</React.Fragment>
)}
</nav>
);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<nav class="flex-container navbar navbar-dark bg-primary fixed-top">
<a class="navbar-brand" to="/"> App
</a>
<div class="first-part">
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-file-invoice-dollar fa-lg"></i>
<sup class="notification-badge"><span class="badge badge-success">1</span></sup>
</button>
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg"></i>
</button>
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg"></i>
</button>
</div>
<div class="second-part">
<button class="btn btn-outline-danger btn-lg">
<i class="fas fa-sign-out-alt fa-lg"></i>
</button>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
You can use display: flex, and align-content: space-between like so:
.wrapper{
width: 100%;
}
.mid_to_right{
padding-left: 50%;
background-color: red;
display: flex;
flex-flow: row nowrap;
flex-basis: 100%;
justify-content: space-between;
}
.left{
display: flex;
flex-flow: row nowrap;
}
.icon{
width: 50px;
height: 50px;
background-color: yellow;
}
.left .icon{
background-color: green;
}
<div class="wrapper">
<div class="mid_to_right">
<div class="left">
<div class="icon">
</div>
<div class="icon">
</div>
<div class="icon">
</div>
</div>
<div class="right">
<div class="icon">
</div>
</div>
</div>
</div>
As explained here and here you have to consider the width of adjacent flexbox items to ensure the center content is actually centered in the viewport.
The simplest method using Bootstrap 4 would be to use the w-100 utility classes to ensure the 3 separate flexbox children always fill the width equally, and then align as desired...
<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand">
<a class="navbar-brand w-100" to="/">
App
</a>
<div class="d-flex">
<div class="text-nowrap">
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-star fa-lg"></i>
</button>
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg"></i>
<sup><span class="badge badge-success">1</span></sup>
</button>
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg"></i>
</button>
</div>
</div>
<div class="w-100 text-right">
<button class="btn btn-outline-danger btn-lg" onclick="{this.logoutClicked}">
<i class="fas fa-sign-out-alt fa-lg"></i>
</button>
</div>
</nav>
https://www.codeply.com/go/SRy82V3M76
I have a div where I want to use a full-width button group with 3 button.
The 2nd and the 3th button "text" will be only font-awesome icons, so I want them to be smaller than the 1st. (For example 60%-20%-20%)
I tried this snippet (I didn't used the "other two are smaller" style yet, so it have to be a 33%-33%-33% buttongroup)
<div class="btn-group btn-group-justified">
<button class="btn btn-default disabled">
{{$buttonText}}
</button>
<button class="btn btn-warning">
<i class="fa fa-edit"></i>
</button>
<button class="btn btn-danger">
<i class="fa fa-trash"></i>
</button>
</div>
But the whole btn-group only occupies the 25% of the div. Why?
To use justified button groups with <button> elements, you must wrap each button in a button group. See bootstrap documentation here: With <button> elements
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<div class="btn-group btn-group-justified">
<div class="btn-group" role="group">
<button class="btn btn-default disabled">
asdasd
</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-warning">
<i class="fa fa-edit"></i>
</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-danger">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
I would use grid layout for my rescue. My btn no longer is restricted by width of the content.
<div class="row">
<button class="col-xs-10 btn btn-primary">
BTN 1
</button>
<button class="col-xs-1 btn btn-warning">
<i class="fa fa-edit"> BTN 2</i>
</button>
<button class="col-xs-1 btn btn-danger">
<i class="fa fa-trash"> BTN 3</i>
</button>
I have this
a simple panel using bootstrap which displays a list of departments in the table and with an input field in the bottom with a button to add. This panel is fixed in height, and as you can see, the content is overflowing the panel. I tried to make it scrollable but I still get the same end result.
What I want is for the the content in the table to be inside the panel and scrollable.
.panel-primary {
border-color: #b3b3b3;
}
.panel__add-pos {
height: 400px;
position: relative;
}
.panel-heading {
display: flex;
padding: 5px 15px;
}
.panel-body {
overflow-x: hidden;
max-height: none;
overflow-y: scroll;
}
.panel-title {
font-size: 14px;
}
.department-actions {
width: 70px;
height: 14px;
}
.department-actions a {
color: #d2d2d2;
}
.department-actions a:hover {
color: #000000;
}
.panel__add-dept form {
position: absolute;
bottom: 0;
margin-bottom: 10px;
width: 97%;
}
.panel__input-container {
border: 0;
border-bottom: 1px solid #cccccc;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
padding: 0;
padding-left: 10px;
}
.panel__input-container:focus {
border-color: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none);
}
[class*="btn"] {
border-radius: 0;
}
[class*="col-"] {
padding: 0 5px;
}
<div class="panel panel-primary panel__add-dept">
<div class="panel-heading">
<span class="panel-title">LIST OF DEPARTMENT</span>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>Department Name</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Accounting Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="1" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="1">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="1" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
<form action="http://localhost/" id="list-dept-form" data-panel_name="Department" method="post" accept-charset="utf-8">
<div class="form-group add-department">
<input class="form-control panel__input-container" id="new_department" type="text" name="new_department" placeholder="Add new department" value="">
</div>
<div class="form-group">
<button type="button" class="btn btn-default button--dark pull-right" id="add-department" name="submit_dept">Add</button>
</div>
</form>
</div>
</div>
A scroll bar will not be added unless the content is taller than the parent. However, the parent must also have a limited height.
.panel-primary {
border-color: #b3b3b3;
}
.panel__add-pos {
height: 400px;
position: relative;
}
.panel-heading {
display: flex;
padding: 5px 15px;
}
.panel-body {
overflow-x: hidden;
max-height: none;
overflow-y: scroll;
height: 100px; /* --- like this --- */
}
.panel-title {
font-size: 14px;
}
.department-actions {
width: 70px;
height: 14px;
}
.department-actions a {
color: #d2d2d2;
}
.department-actions a:hover {
color: #000000;
}
.panel__add-dept form {
position: absolute;
bottom: 0;
margin-bottom: 10px;
width: 97%;
}
.panel__input-container {
border: 0;
border-bottom: 1px solid #cccccc;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
padding: 0;
padding-left: 10px;
}
.panel__input-container:focus {
border-color: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none);
}
[class*="btn"] {
border-radius: 0;
}
[class*="col-"] {
padding: 0 5px;
}
<div class="panel panel-primary panel__add-dept">
<div class="panel-heading">
<span class="panel-title">LIST OF DEPARTMENT</span>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>Department Name</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Accounting Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="1" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="1">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="1" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
<form action="http://localhost/" id="list-dept-form" data-panel_name="Department" method="post" accept-charset="utf-8">
<div class="form-group add-department">
<input class="form-control panel__input-container" id="new_department" type="text" name="new_department" placeholder="Add new department" value="">
</div>
<div class="form-group">
<button type="button" class="btn btn-default button--dark pull-right" id="add-department" name="submit_dept">Add</button>
</div>
</form>
</div>
</div>
.panel__add-pos {
height: auto;
position: relative;
}
.panel-body {
max-height: 400px;
overflow-x: hidden;
max-height: none;
overflow-y: scroll
}
Try that css for your code
You can try this:
.panel {
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
and remove the styles you have on .panel-body