Bootstrap model
Question
I have a drop-down list which fetch list details from db table and list generated with fetched details. Now the issue is this list is too long. This was my previous code.
<div class="col-md-3">
<!-- list menu start -->
<div class="list-menu hidden-sm hidden-xs">
<div class="list-heading">
<h2>all lists</h2>
</div>
<div class="list-menu hidden-menu">
{!! $lists['tree'] !!}
</div>
</div>
<!-- list menu end -->
This is how my list then display
As I mentioned before this list has more than 36 items and its not user friendly. So that I have add a bootstrap model and code updated as below.
<div class="row">
<div class="col-md-3">
<!-- list menu start -->
<div class="list-menu hidden-sm hidden-xs" data-toggle="modal" data-target="#exampleModalLong" >
<div class="list-heading">
<h2>all lists</h2>
</div>
</div>
<!-- list menu end -->
</div>
<div class="col-md-9">
This is the bootstrap model
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="catagory-list-menu hidden-menu">
{!! $categories['tree'] !!}
</div>
</div>
</div>
After this I get the expected output. Meant that all list items display in a model box. But after clicking model box button
<div class="list-menu hidden-sm hidden-xs" data-toggle="modal" data-target="#exampleModalLong" >
And I pres Esc or click somewhere else to hide the model box again. It gets hide.And now it starts to start problems.
Problem 01
All the content in the web page shift to left side with approximately 10px . And then there is a 10px white space
Problem 02
When I click list all button again it just blur the screen but I cant see the model.
But when I press Esc or click somewhere else and then click list all button then model box appear with item list. When I click esc again it began to shift web page again back to left side and then I click list all button it just get blur and began to shift web page again back to left .So this happens repeatably. So could anyone please help me to solve this.I know this question is little bit long but I hope someone will show me the place where this error occurs. Thanks
1 answers
solution1
1 ACCPTED 2019-07-01 10:31:15
Try this.
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
</head>
<div class="container">
<div class="row">
<h2>Bootstrap-select example</h2>
<p>This uses <a href="https://silviomoreto.github.io/bootstrap-select/">https://silviomoreto.github.io/bootstrap-select/</a></p>
<hr />
</div>
<div class="row-fluid">
<select class="selectpicker" data-show-subtext="true" data-live-search="true">
<option data-subtext="Rep California">Tom Foolery</option>
<option data-subtext="Sen California">Bill Gordon</option>
<option data-subtext="Sen Massacusetts">Elizabeth Warren</option>
<option data-subtext="Rep Alabama">Mario Flores</option>
<option data-subtext="Rep Alaska">Don Young</option>
<option data-subtext="Rep California" disabled="disabled">Marvin Martinez</option>
</select>
<span class="help-inline">With <code>data-show-subtext="true" data-live-search="true"</code>. Try searching for california</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.