I am trying to achieve this
Using the code from bootstrap examples I do it like this
<body>
<!-- create character component -->
<div id="accordion" role="tablist" aria-multiselectable="true">
<!-- creation step component -->
<div class="card">
<!-- header -->
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Character
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</a>
</h5>
</div>
But I simply can't add icon to the header. Whether I use it in or out a tag it simply shows empty header without arrow.
What is the problem?
Complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!-- create character component -->
<div id="accordion" role="tablist" aria-multiselectable="true">
<!-- creation step component -->
<div class="card">
<!-- header -->
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Character
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</a>
</h5>
</div>
<!-- configurable items -->
<div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<table>
<tr>
<td>Name</td>
<td>
<input id="playerName">
</td>
</tr>
<tr>
<td>Gender</td>
<td>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>Age</td>
<td>
<input id="playerAge">
<td>
</tr>
<tr>
<td>Race</td>
<td>
<select id="races">
<option>Human</option>
<option>Elf</option>
</select>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<h3>Character attributes</h3>
<table>
<tr><td colspan="2" align="center">Magical traits</td></tr>
<tr>
<td>Fire affinity</td>
<td><input id="fireAffinity"></td>
</tr>
<tr>
<td>Earth affinity</td>
<td><input id="earthAffinity"></td>
</tr>
<tr>
<td>Water affinity</td>
<td><input id="waterAffinity"></td>
</tr>
<tr>
<td>Wind affinity</td>
<td><input id="windAffinity"></td>
</tr>
<tr>
<td>Lighting affinity</td>
<td><input id="lightingAffinity"></td>
</tr>
<tr><td colspan="2" align="center">Physical traits</td></tr>
<tr>
<td>Power</td>
<td><input id="physicalPower"></td>
</tr>
<tr>
<td>Vitality</td>
<td><input id="physicalVitality"></td>
</tr>
<tr><td colspan="2" align="center">Mental traits</td></tr>
</table>
<h3>Unique traits</h3>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"
integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"
integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
Related
I am using Bootstrap 4.1.3. I have a navbar which displays a horizontal list of buttons, and when collapsed it displays a vertical list of buttons. In version 4.0.0 alpha6 I was able to have the vertical list displayed as a dropdown instead of a list of buttons. Is there any way I can duplicate the 4.0.0 behaviour in 4.1.3? Sample code attached...
<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Display dropdown list instead of buttons when collapsed</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>Display dropdown list instead of buttons when collapsed</h1>
<nav class="navbar navbar-expand-md navbar-light">
<span class="navbar-brand"></span>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSelect" aria-controls="navbarSelect" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSelect">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button1" title="button1" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button2" title="button2" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button3" title="button3" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button4" title="button4" value="Button Text">
</li>
<li class="nav-item">
<input class="nav-link btn btn-primary" type="submit" name="button5" title="button5" value="Button Text">
</li>
</ul>
</div>
</nav>
<section id="no-more-tables">
<table class="table table-striped table-hover table-sm">
<thead>
<tr>
<th>Select</th>
<th>ID</th>
<th>Description</th>
<th>Tasks</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Select">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="select[1]" name="select[1]">
<label class="custom-control-label" for="select[1]"> </label>
</div>
</div>
</td>
<td data-title="ID"><p class="form-control-static">ADD1</p></td>
<td data-title="Name"><p class="form-control-static">ADD1 - Insert a single record</p></td>
<td data-title="Tasks" class="right"><p class="form-control-static">193</p></td>
</tr>
<tr>
<td data-title="Select">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="select[2]" name="select[2]">
<label class="custom-control-label" for="select[2]"> </label>
</div>
</div>
</td>
<td data-title="ID"><p class="form-control-static">ADD2</p></td>
<td data-title="Name"><p class="form-control-static">ADD2 - Insert a single record</p></td>
<td data-title="Tasks" class="right"><p class="form-control-static">227</p></td>
</tr>
<tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>
</body>
</html>
I'm wanting to change the area marked in red to a grey color, I've tried a bunch of things but I'm stumped, any help would be greatly appreciated!
Essentially I'm wanting to make the background a light grey color but not change the top bar or the navigation.
Image
Here is the code:
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-white sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Domestic Bills <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item<span class="glyphicon glyphicon-pencil"></span></a>
</li>
</ul>
</nav>
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2">
<h1>Title</h1>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
<button type="button" class="btn btn-primary-panel-titles" aria-label="Left Align">Edit</button>
</div>
<ul class="list-group">
<div class="row"><div class="col-md-4"><li class="list-group-item">Payment Times: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Payment Method: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Fixed Payments: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Fixed Payment Amount: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<ul class="list-group">
<li class="list-group-item">24th November 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">10:20 AM Thur 30 Nov 2017</p></li>
<li class="list-group-item">24th October 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">11:00 AM Tue 28 Nov 2017</p></li>
<li class="list-group-item">24th September 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">01:19 PM Mon 27 Nov 2017</p></li>
<li class="list-group-item">24th August 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">03:52 PM Sat 25 Nov 2017</p></li>
</ul>
</div>
</div></div>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading"><h3 class="panel-title">Title</h3></div>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Code</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
Thank you in advance for any help you can provide!
You need to to write or overwrite rules from bootsrap.
Create the selectors for each div you want to target .
example:
main,
main .panel ,
main .panel .panel-heading
/* and whatevere else you want to select */
{
background:grey;
}
What your are looking for is a background-color css property.
You can give him a color. Personaly i like #939393.
So you can try adding :
style="background-color:#93939; to your <main> tag
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-white sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Domestic Bills <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item<span class="glyphicon glyphicon-pencil"></span></a>
</li>
</ul>
</nav>
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2" style="background-color:#939393">
<h1>Title</h1>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
<button type="button" class="btn btn-primary-panel-titles" aria-label="Left Align">Edit</button>
</div>
<ul class="list-group">
<div class="row"><div class="col-md-4"><li class="list-group-item">Payment Times: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Payment Method: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Fixed Payments: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Fixed Payment Amount: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<ul class="list-group">
<li class="list-group-item">24th November 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">10:20 AM Thur 30 Nov 2017</p></li>
<li class="list-group-item">24th October 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">11:00 AM Tue 28 Nov 2017</p></li>
<li class="list-group-item">24th September 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">01:19 PM Mon 27 Nov 2017</p></li>
<li class="list-group-item">24th August 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">03:52 PM Sat 25 Nov 2017</p></li>
</ul>
</div>
</div></div>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading"><h3 class="panel-title">Title</h3></div>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Code</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
Do you have a div containing them all?... I can see you are good at this, so I hope you tried to find the class name and set the background-color="someShadeOfgrey"... You can do this with the < style> tag or a CSS file :)... or just implement it with the < div> tag
<div class="myClass" style="background-color:grey;">
I am trying to open action div box as layer in but unable to do that.
when i click on action button div box will open within that only. it should be open as layer.
Code:
ul {
z-index: 2
}
table {
z-index: 1
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Sr.No</th>
<th>LeadCreated DateTime</th>
<th>RetailerName</th>
<th>ShopName</th>
<th>Mobile</th>
<th>Address</th>
<th>City</th>
<th>Pincode</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>1</td>
<td>10-10-2017</td>
<td>Test</td>
<td>Test</td>
<td>9904773479</td>
<td>Surat</td>
<td>Surat</td>
<td>304230</td>
<td style="background: <?php if ($row->Status == 'InProcess') echo 'green';if ($row->Status == 'Closed') echo 'orange';if ($row->Status == 'Dead') echo 'black'; ?>;color: #FFFFFF">
<?= $row->Status ?>
</td>
<td class="pbutton">
<div class="btn-group">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right " role="menu" style="position: relative;width: 160px;z-index: 99">
<li><span class="glyphicon glyphicon-fullscreen"></span> View</li>
<li><span class="fa fa-edit"></span> Add Lead Update</li>
<li><span class="fa fa-edit"></span> Edit</li>
<li><span class="glyphicon glyphicon-trash"></span> Delete</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
Make the .btn-group positioned relative and the ul positioned absolute. You may want to change the absolute positioning according to your liking.
The z-index can be removed.
.btn-group {
position: relative;
}
ul.dropdown-menu.pull-right {
position: absolute;
top: 0;
left: -160px;
width: 160px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Sr.No</th>
<th>LeadCreated DateTime</th>
<th>RetailerName</th>
<th>ShopName</th>
<th>Mobile</th>
<th>Address</th>
<th>City</th>
<th>Pincode</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>1</td>
<td>10-10-2017</td>
<td>Test</td>
<td>Test</td>
<td>9904773479</td>
<td>Surat</td>
<td>Surat</td>
<td>304230</td>
<td style="background: <?php if ($row->Status == 'InProcess') echo 'green';if ($row->Status == 'Closed') echo 'orange';if ($row->Status == 'Dead') echo 'black'; ?>;color: #FFFFFF">
<?= $row->Status ?>
</td>
<td class="pbutton">
<div class="btn-group">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right " role="menu">
<li><span class="glyphicon glyphicon-fullscreen"></span> View</li>
<li><span class="fa fa-edit"></span> Add Lead Update</li>
<li><span class="fa fa-edit"></span> Edit</li>
<li><span class="glyphicon glyphicon-trash"></span> Delete</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
Try this
ul.dropdown-menu{
position:absolute !important;
}
or use inline styles
<ul class="dropdown-menu pull-right " role="menu" style="position: absolute;width: 160px;z-index: 99">
Override the ul.dropdown-menu styles to make it absolute, either use !important or override the inline styles.
ul.dropdown-menu{
position: absolute !important;
width: 200px;
top: 15%;
left: 20%;
}
ul.dropdown-menu {
z-index: 2
}
table {
z-index: 1
position: relative;
}
ul.dropdown-menu{
position: absolute !important;
width: 200px;
top: 15%;
left: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Sr.No</th>
<th>LeadCreated DateTime</th>
<th>RetailerName</th>
<th>ShopName</th>
<th>Mobile</th>
<th>Address</th>
<th>City</th>
<th>Pincode</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>1</td>
<td>10-10-2017</td>
<td>Test</td>
<td>Test</td>
<td>9904773479</td>
<td>Surat</td>
<td>Surat</td>
<td>304230</td>
<td style="background: <?php if ($row->Status == 'InProcess') echo 'green';if ($row->Status == 'Closed') echo 'orange';if ($row->Status == 'Dead') echo 'black'; ?>;color: #FFFFFF">
<?= $row->Status ?>
</td>
<td class="pbutton">
<div class="btn-group">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right " role="menu" style="position: relative;width: 160px;z-index: 99">
<li><span class="glyphicon glyphicon-fullscreen"></span> View</li>
<li><span class="fa fa-edit"></span> Add Lead Update</li>
<li><span class="fa fa-edit"></span> Edit</li>
<li><span class="glyphicon glyphicon-trash"></span> Delete</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
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"
This is the same problem as https://github.com/twitter/bootstrap/issues/3287 (see image) but I don't understand the solution!
I have the following HTML:
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Options<span class="caret"</span></button>
<ul class="dropdown-menu">
<li> Action 1</li>
<li> Action 2</li>
<li> Action 2</li></ul></div></div>
</ul>
</div>
</div>
which should make a table with a button that can be clicked to reveal some dropdown options from the button.
Many thanks :).
This works for me
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="includes/bootstrap/css/bootstrap.min.css" />
</head>
<body>
<table class="table">
<tbody>
<tr><td>some stuff</td><td>some more stuff</td></tr>
<tr>
<td>here's something</td>
<td>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Options<span class="caret"></span></button>
<ul class="dropdown-menu">
<li> Action 1</li>
<li> Action 2</li>
<li> Action 2</li></ul></div></div>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>another row</td>
<td>with more stuff</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="includes/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>