I am trying to build a two column layout in a bootstrap modal. This is the code:
<div class="modal fade in" id="product-showcase-modal" tabindex="-1" role="dialog" aria-labelledby="product-showcase" aria-hidden="false" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="container col-xs-12">
<div class="row-fluid">
<div class="col-xs-6">
<img src="http://localhost/haya/img/hijabs/dark%20grey.jpg" id="product_image" width="200px" height="auto" style="display: inline;">
</div>
<div class="col-xs-6">
<h3 id="product_name">Dark Gray</h3>
<p id="new_price">$3.00</p>
<p style="text-decoration: line-through;" id="old_price">$4.35</p>
<button class="btn btn-warning">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
And this is the result:
I have no idea why is this happening. Can anyone resolve this?
UPDATE 1:
I removed the col-xs-12 class from the container div. Now the container is in the modal's body but it's has taken a width of 100% (my screen's width). Result:
Just need to add a clearfix to the modal-body. This will fix the float item issue where the container doesn't fully expand.
Fiddle: http://jsfiddle.net/52VtD/6310/
<div class="modal-body clearfix">
Related
I am making an anuglar app and I make use of bootstrap 3 modal dialogs to display images. I'd like to limit the size of the images to to the size of the modal dialog without setting the width and height of the images since the images currently extend over the dialog. Here is what I mean:image
Below is my template code. I'm a novice at template designs so any tips and suggestions would also be much appreciated!
<div class="modal modal-backdrop" tabindex="-1" [ngStyle]="{display: floorPlanChooseDialogShow ? 'block' : 'none'}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<h5>
Choose your floor plan.
</h5>
</div>
</div>
<div class="modal-body">
<form #f="ngForm">
<div class="container" style="width: 700px;" id="fpImages">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6" id="fpimg">
<img src="../../assets/img/Versailles 3D FP.jpg" alt="">
</div>
<div class="col-xl-6 col-lg-6 col-md-6" id="fpimg">
<img src="../../assets/img/Versailles 3D FP.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6" id="fpimg">
<img src="../../assets/img/Barcelona Combined.jpg" alt="">
</div>
<div class="col-xl-6 col-lg-6 col-md-6" id="fpimg">
<img src="../../assets/img/Bourdeaux.jpg" alt="">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="onToggleChooseFloorPlanDialog()">
Submit
</button> |
<button type="button" class="btn btn-warning" (click)="onToggleChooseFloorPlanDialog()">
Cancel
</button>
</div>
</div>
</div>
You can use the background-size property to make the image fit in the modal.
background-size: 100% 100%;
Here is a working Demo on Stackblitz.
Use the "img-fluid" class of the bootstrap
<img class="img-fluid m-0 p-0" src="exemplo.com">
https://getbootstrap.com/docs/4.0/components/modal/
https://getbootstrap.com/docs/4.0/content/images/
I got it to work. I just used 'img-responsive" class.
<div class="modal-body">
.....
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6"
id="fpimg"
data-toggle="tooltip"
data-placement="top"
title="Lourdes"
>
<img class="img-responsive" src="../../assets/img/Lourdes 1 3D fP.jpg"
name="lourdes"
(click)="selectedFloorPlan($event)"
>
</div>
.....
</div>
I have created the modal pop-up screen and am display some text from database. In that some of the text are very long and it is going out of the modal screen window.
am using <pre ng-bind-html="history.comment" class="wrap-word"> tag but, still it over flow.
Please find my html code below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="form-group row">
<div>
<table class="table">
<tr >
<td >
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<label>Action:</label>
</div>
<div id="action" class="col-lg-10">Approved</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<label>User:</label>
</div>
<div id="Name" class="col-lg-10">Karthikeyan</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<label>Comment</label>
</div>
<div id="comment" class="col-lg-10">
<div id="Name" class="col-lg-10">Karthikeyanaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Please find the attached screenshot also.
Please find the update screen shot with more information about <pre> tag.
Your grid layout doesn't recognized because you use table try to add this code at the top your table tag.
<div class='table table-responsive'>
<table class="table">
</table>
</div>
or try to add this css to your comment section
style="word-wrap: break-word;"
Try this thing, there is the most common issue of overflowing, give the static class to your text to perform task on it
.modal-body #historyComment_0 {
word-wrap: break-word;
}
Use code below will resolve this issue
style={{ whiteSpace: 'unset' }}
I'm using Bootstrap 4.1 and bootstrap4-fullscreen-modal (https://github.com/basilebong/bootstrap4-fullscreen-modal).
I have written a html page with bootstrap and the browser shows it very well.
But when I import this page on the bootstrap4-fullscreen-modal using
$("#idCl").load("page.html");
the modal properly works but I see this:.
The page is composed in this way:
<div class="container-fluid"> <!-- Main container -->
<div class="row">
<div class="col-sm-5">
</div>
<div class="col-sm-2" id="id1">
</div>
<!-- Here there is the problem -->
<div class="col-sm-5" id="id2">
</div>
</div>
</div>
The problem is when the id1 div finishes and start with id2 div.
In addition, I have noted this: on chrome there is this problem, on safari the problem doesn't appear.
Have you a solution?
I have tried to zoom or reduce zoom but I see the white line only when I'm on "normal view" (100%).
The modal code is:
<div class="modal fade modal-fullscreen force-fullscreen" id="idClxViewCardModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div id="idCl">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I am trying to use the justify-content-center within a modal but for some it does not render like it should..
I am trying to render a button in the middle of a div
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<img class="card-img-top" src="{% static "images/manager_happy.png"%}" alt="Card image cap">
<div class="modal-body">
<h5>Improve your managerial skills by understanding who is in your team</h5>
<hr>
<div class="container">
<div class="row">
<div class="col">
<div class="price-modal-container">
<span class="modal-price-title">Price:</span><span class="modal-price">60$</span><span class="modal-Oprice">299$</span><span class="modal-discount">60% off</span>
</div>
<div class="time-price">
<i class="far fa-clock fa-spin"></i>Limited time offer discount
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col">
<span class="glyphicon glyphicon-plus"></span> Add Credit Now
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<span class="glyphicon glyphicon-plus"></span> Add Credit Now
</div>
</div>
</div>
</div>
Any idea it does not work ? is there any trouble because of the modal ?
Are you trying to render it so the button is horizontally centered? Right now it's not working because the col class takes up all the remaining width. So you can either make the content inside the column centered or make it so the column itself doesn't take up the full width.
To center the content inside the column you just need add the text-center class either to the column or by simply replacing justify-content-center on the row.
<div class="row text-center">
<div class="col">
<span class="glyphicon glyphicon-plus"></span> Add Credit Now
</div>
</div>
Alternatively you can keep the row the way it is and change the column class from col to col-auto so it won't take the full width.
<div class="row justify-content-center">
<div class="col-auto">
<span class="glyphicon glyphicon-plus"></span> Add Credit Now
</div>
</div>
I have provided the code below and Plunkr link as well.Modal doesn't display properly when I click the "Learn more" button the issue araises.Can someone tell me where exactly I went wrong.The details are provided below.Well, how about adding more details. Like, what are you trying to accomplish, how are you doing it, what difficulties you have found with the approach, another approaches you have tried, etc. In summary, without code isn't a good question neither is with just code. Search for the balance!
code: http://plnkr.co/edit/X8ReWNKXK9RLVvrzeTd5?p=info
<body ng-app="myApp">
<div class="container">
<div ng-controller="listCtrl">
<div class="well">
<h1>Welcome to ssrikanthpp</h1>
</div>
<div class="row">
<div class="col-sm-6" ng-repeat="x in data">
<div class="well well-sm">
<div class="row">
<div class="col-md-6">
<img ng-src="{{x.image_url}}"
class="img-rounded img-responsive well-image">
</div>
<div class="col-md-6">
<h4>{{x.type}}</h4>
<p><strong>Locations: </strong>{{x.locations}}</p>
<p><strong>Size: </strong>{{x.size}}</p>
<p><strong>Average Lifespan: </strong>{{x.lifespan}}</p>
<p><strong>Diet: </strong>{{x.diet}}</p>
<button class="btn btn-primary pull-right" data-toggle="model" target="#turtle-info">Learn more..</button>
</div>
</div>
<!-- row -->
</div>
<!-- well -->
</div>
<!-- col-xs-6 -->
</div>
<!-- model starts hre -->
<!-- Modal -->
<div id="turtle-info" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- model ends here -->
</div>
</div>
Sorry this isn't realy an answer but I can't post a comment because I just started ad SO.
Just rename target to data-target. That should solve the problem.
change this line
<button class="btn btn-primary pull-right" data-toggle="model" target="#turtle-info">Learn more..</button>
to
<button class="btn btn-primary pull-right" data-toggle="modal" target="#turtle-info">Learn more..</button>
and you should be good to go