I am facing an issue with CSS issue in IE11, all other browsers it works correctly.
The issue is due to string length the screen doesnt fit in the browser properly.
I tried setting display:flex,flex: 1 1 auto, flex-wrap:wrap, white-space:pre-wrap to the parent div whose span has the long string.
Please help me to troubleshoot this.
I have also copied the IE11 generated HTML.
Note: The screenshot is cropped version.
HTML markup:
<div class="row pad1-0" _ngcontent-ean-c19="">
<aside class="col-md-3 ng-star-inserted" id="sidebar" style="top: 0px;" _ngcontent-ean-c19="">
<div class="toggle-side" _ngcontent-ean-c19="">
<i class="fa fa-bars" _ngcontent-ean-c19=""></i>
</div>
<ul class="participant-menu popmenu" _ngcontent-ean-c19="">
<li class="menu-item ia-language saved" data-goto="ia-language" _ngcontent-ean-c19="">
Languages</li>
</ul>
</aside>
<main class="col-md-9 ng-star-inserted" id="main" _ngcontent-ean-c19="">
<section class="overview-options pad2-0 tright" _ngcontent-ean-c19="">
<div class="btn-group" role="group" _ngcontent-ean-c19="">
<button class="btn btn-secondary" onclick="window.print();" _ngcontent-ean-c19="">
<i class="fa fa-print" _ngcontent-ean-c19=""></i> Print</button>
<!--bindings={
"ng-reflect-ng-if": "true"
}--><button disabled="" class="btn btn-success btn-submit ng-star-inserted" _ngcontent-ean-
c19="">
<i class="fa fa-paper-plane" _ngcontent-ean-c19=""></i> Submit</button>
</div>
</section>
<app-languages-overview ng-reflect-model-errors="[object Object]" ng-reflect-has-edit-access="true"
ng-reflect-section="[object Object]" ng-reflect-validation-manager="[object Object]" ng-reflect-has-
fcdp-role="false" _ngcontent-ean-c19="" _nghost-ean-c21=""><section class="overview ia fields
language current" id="ia-language" _ngcontent-ean-c21="">
<app-overview-card-header ng-reflect-title="Languages" ng-reflect-is-edit-hidden="true" ng-reflect-
row-version="AAAAAABxc2A=" _ngcontent-ean-c21="" _nghost-ean-c35=""><div class="partTitle flex-row"
_ngcontent-ean-c35="">
<span class="secTitle" _ngcontent-ean-c35="">Languages</span>
<div class="flex-row history-dropdown ng-star-inserted" _ngcontent-ean-c35=""></div>
<nav class="right" _ngcontent-ean-c35="">
<a class="ng-star-inserted" _ngcontent-ean-c35=""><i class="fa fa-history" _ngcontent-ean-c35="">
</i></a>
<a class="ng-star-inserted" _ngcontent-ean-c35=""><i class="fa fa-pencil-alt" _ngcontent-ean-
c35=""></i></a>
<a class="ng-star-inserted" _ngcontent-ean-c35=""><i class="fa fa-compress ng-star-inserted"
_ngcontent-ean-c35=""></i></a>
</nav>
</div>
</app-overview-card-header>
<div class="part language border-right ng-star-inserted" _ngcontent-ean-c21="">
<div class="flex-row overviewContainer ng-star-inserted" _ngcontent-ean-c21="">
<div class="overview-field flex-row col-md-6 overviewItem" _ngcontent-ean-c21="">
<span title="What language do you use at home?" class="ovtitle" _ngcontent-ean-c21="">Home
Language</span>
<span class="ovval" _ngcontent-ean-c21="">English </span>
</div>
<div class="overview-field flex-row col-md-2 overviewItem" _ngcontent-ean-c21="">
<span title="Read" class="ovtitle" _ngcontent-ean-c21="">Read</span>
<span class="ovval" _ngcontent-ean-c21="">Yes </span>
</div>
<div class="overview-field flex-row col-md-2 overviewItem" _ngcontent-ean-c21="">
<span title="Write" class="ovtitle" _ngcontent-ean-c21="">Write</span>
<span class="ovval" _ngcontent-ean-c21="">Yes </span>
</div>
<div class="overview-field flex-row col-md-2 overviewItem" _ngcontent-ean-c21="">
<span title="Speak" class="ovtitle" _ngcontent-ean-c21="">Speak</span>
<span class="ovval" _ngcontent-ean-c21="">Yes </span>
</div>
</div>
<div class="ng-star-inserted" _ngcontent-ean-c21="">
<div class="flex-row overviewContainer ng-star-inserted" _ngcontent-ean-c21="">
<div class="overview-field flex-row col-md-6 caret overviewItem blank" _ngcontent-ean-c21="">
<span title="List any other languages you know" class="ovtitle" _ngcontent-ean-c21="">Other
Language
</span>
<span class="ovval" _ngcontent-ean-c21=""> </span>
</div>
<div class="overview-field flex-row col-md-2 overviewItem blank" _ngcontent-ean-c21="">
<span title="Read" class="ovtitle" _ngcontent-ean-c21="">Read</span>
<span class="ovval" _ngcontent-ean-c21=""> </span>
</div>
<div class="overview-field flex-row col-md-2 overviewItem blank" _ngcontent-ean-c21="">
<span title="Write" class="ovtitle" _ngcontent-ean-c21="">Write</span>
<span class="ovval" _ngcontent-ean-c21=""> </span>
</div>
<div class="overview-field flex-row col-md-2 overviewItem blank" appHistoryData="" _ngcontent-
ean-c21="">
<span title="Speak" class="ovtitle" _ngcontent-ean-c21="">Speak</span>
<span class="ovval" _ngcontent-ean-c21=""> </span>
</div>
</div>
</div>
<div class="flex-row overviewContainer" _ngcontent-ean-c21=""></div>
<div class="flex-row overviewContainer" _ngcontent-ean-c21="">
<div class="overview-field flex-row col-md-12 overviewItem blank" _ngcontent-ean-c21="">
<span title="Notes" class="ovtitle" _ngcontent-ean-c21="">Notes</span>
<span class="ovval" _ngcontent-ean-c21=""> </span>
</div>
</div>
</div>
</section>
</app-languages-overview>
<app-ncp-overview style="overflow: hidden; display: flex; align-items: stretch;" ng-reflect-model-
errors="[object Object]" ng-reflect-has-edit-access="true" ng-reflect-section="[object Object]" ng-
reflect-validation-manager="[object Object]" ng-reflect-has-fcdp-role="false" _ngcontent-ean-c19=""
_nghost-ean-c33=""><section class="overview ia fields ncp current ng-star-inserted" id="ia-ncp"
_ngcontent-ean-c33="">
<app-overview-card-header ng-reflect-title="Non-Custodial Parents" ng-reflect-is-edit-hidden="true"
ng-reflect-row-version="AAAAAABxggI=" _ngcontent-ean-c33="" _nghost-ean-c35=""><div
class="partTitle flex-row" _ngcontent-ean-c35="">
<span class="secTitle" _ngcontent-ean-c35="">Non-Custodial Parents</span>
<a class="ng-star-inserted" _ngcontent-ean-c35=""><i class="fa fa-pencil-alt" _ngcontent-ean-c35="">
</i></a>
<a class="ng-star-inserted" _ngcontent-ean-c35=""><i class="fa fa-compress ng-star-inserted"
_ngcontent-ean-c35=""></i><!--bindings={
"ng-reflect-ng-if": "false"
}--></a>
</nav>
</div>
</app-overview-card-header>
<div class="part ncp ng-star-inserted" style="flex:1 1 0px; overflow: hidden; display: flex; flex-
direction: row;" _ngcontent-ean-c33="">
<div class="ng-star-inserted" _ngcontent-ean-c33="">
<div class="caretaker ng-star-inserted" _ngcontent-ean-c33="">
<div class="row" _ngcontent-ean-c33="">
<div class="overview-field col-md-4" style="display: flex; flex-direction: row;"
_ngcontent-ean-c33="">
<span title="Relationship to Child(ren)" class="ovtitle" _ngcontent-ean-
c33="">Relationship to Child(ren)</span>
<span class="ovval" _ngcontent-ean-c33="">Other Parent </span>
</div>
<div class="overview-field col-md-8" style="flex:1 1 0px; overflow: hidden; display:
flex; flex-direction: row; align-items: stretch;" _ngcontent-ean-c33="">
<span title="Relationship to Child(ren) - Details" class="ovtitle" _ngcontent-ean-
c33="">Details</span>
<span class="ovval" _ngcontent-ean-c33="">fdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdfdsfdsfdsfdsfasdfsdfasdfsfsdffdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdfdsfdsfdsfdsfasdfsdfasdfsfsdffdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdfdsfdsfdsfdsfasdfsdfasdfsfsdffdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdfdsfdsfdsfdsfasdfsdfasdfsfsdffdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdfdsfdsfdsfdsfasdfsdfasdfsfsdffdsfadsfdsfdfdfdsfdsfsdfdfdfdsfsdfsdfsdf </span>
</div>
</div>
</div>
</div><div class="row" _ngcontent-ean-c33=""></div>
<div class="row" _ngcontent-ean-c33=""></div>
</div>
</section>
</app-ncp-overview>
</main>
</div>
I was able to fix this issue, the word-break: break-word; was causing the issue in IE11,
i changed it to word-break: break-all; and it started working..spent 3 hrs on this :)
Related
I am trying to user MdBootstrap 5's chat feature in my app.
This is what I have tried in the template but the thing is I need to refresh the page for it to work even though I am using SignalR in my backend.
<section style="background-color: #eee;">
<div class="container py-5">
<div class="row d-flex justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-6">
<div class="card" id="chat2">
<div class="card-header d-flex justify-content-between align-items-center p-3">
<h5 class="mb-0">Chat</h5>
<button type="button" class="btn btn-primary btn-sm" data-mdb-ripple-color="dark">
Let's Chat
App
</button>
</div>
<div class="card-body" data-mdb-perfect-scrollbar="true" style="position: relative; height: 400px">
<div *ngFor="let message of (messageService.messageThread$ | async)">
<ng-container *ngIf="message.senderUsername !== currentUser!.userName">
<div class="d-flex flex-row justify-content-start">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
alt="avatar 1" style="width: 45px; height: 100%;">
<div>
<p class="small p-2 ms-3 mb-1 rounded-3" style="background-color: #f5f6f7;">ouweee {{message.content}}</p>
<p class="small ms-3 mb-3 rounded-3 text-muted">{{message.messageSent | date:'medium'}}</p>
<span class="text-danger" *ngIf="!message.dateRead">(unread)</span>
<span class="text-success" *ngIf="message.dateRead">(read {{message.dateRead + 'Z' | timeago}})</span>
</div>
</div>
</ng-container>
<ng-container *ngIf="message.senderUsername === currentUser!.userName">
<div class="d-flex flex-row justify-content-end mb-4 pt-1">
<div>
<p class="small p-2 me-3 mb-1 text-white rounded-3 bg-primary"> Nouwweee {{message.content}}</p>
<p class="small me-3 mb-3 rounded-3 text-muted d-flex justify-content-end">{{message.messageSent | date:'medium'}}</p>
<span class="text-danger" *ngIf="!message.dateRead">(unread)</span>
<span class="text-success" *ngIf="message.dateRead">(read {{message.dateRead + 'Z' | timeago}})</span>
</div>
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava4-bg.webp"
alt="avatar 1" style="width: 45px; height: 100%;">
</div>
</ng-container>
</div>
<form [formGroup]="messageForm" enctype="multipart/form-data" (ngSubmit)="createNewMessage()">
<div class="card-footer text-muted d-flex justify-content-start align-items-center p-3">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
alt="avatar 3" style="width: 40px; height: 100%;">
<input type="text" class="form-control form-control-lg" id="exampleFormControlInput1"
placeholder="Type message" formControlName="content" name="content">
<a class="ms-1 text-muted" href="#!"><i class="fas fa-paperclip"></i></a>
<a class="ms-3 text-muted" href="#!"><i class="fas fa-smile"></i></a>
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
This is the page from which I extracted the MDBootstrap template :
https://mdbootstrap.com/docs/standard/extended/chat
Thanks for your time
so basically im doing this in angular and using bootstrap
I want the name and description on the left and img on the right but it isn't working , pls help
code link is below
here
<div class="row">
<div class="col-xs-12">
<button class='btn btn-success'>New bug</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item clearfix"
style="background:grey ; color:red;"
*ngFor="let bug of bugs">
<div class="pull-left">
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span> </div>
<div class="pull-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg"
alt="{{bug.name}}"
class="img-responsive"
style="max-height: 100px;">
</div>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
I'm guessing you want the text to wrap around the image. If that is the case then only put the float class on the image, and reorder the image to above the text.
<div class="container">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success">New bug</button>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item clearfix" style="background: grey; color: red" *ngFor="let bug of bugs">
<div class="float-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg" alt="{{bug.name}}" class="img-responsive" style="max-height: 100px" />
</div>
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
</div>
If you want the text and image to be in 2 columns I would suggest using flexbox
<div class="container">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success">New bug</button>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item d-flex justify-content-between" style="background: grey; color: red" *ngFor="let bug of bugs">
<div>
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span>
</div>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg" alt="{{bug.name}}" class="img-responsive" style="max-height: 100px" />
</div>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
</div>
I am showing my div in column. Issue is i need to center my text
MY code
<div class="card mb-4">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Personal Information</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="align-self-center halfway-fab text-center">
<a class="profile-image">
<img src="assets/img/portrait/medium/avatar-m-9.jpg"
class="rounded-circle img-border gradient-summer width-100" alt="Card image">
</a>
</div>
<div class="text-center">
<span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
<p class="grey font-small-2"></p>
</div>
<div class="row align-self-center">
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
ID: </a></span>
</div>
<div class="d-inline-block">
<span class="">
<span class="display-block overflow-hidden">
{{selectedPatient?.mrn}}</span>
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Age:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span
class="display-block overflow-hidden"> {{selectedPatient?.age}}</span>
</span>
</div>
</div>
</li>
<li class="mb-2">
</ul>
</div>
</div>
</div>
</div>
</div>
Its look like this right now
I need to center the ID and AGE Text in center of my card. They are showing on left right now i need to show them in middle to the center. I try to give the text-align center but its not come in a center
.centered {
width: 100%;
display: flex;
justify-content: center;
}
place your items within that div containg that class.
Try this one. I removed some extra html code which making no sense.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="card mb-4">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Personal Information</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="align-self-center halfway-fab text-center">
<a class="profile-image">
<img src="assets/img/portrait/medium/avatar-m-9.jpg"
class="rounded-circle img-border gradient-summer width-100" alt="Card image">
</a>
</div>
<div class="text-center">
<span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
</div>
<div class="row align-self-center justify-content-center">
<div class="p-2 ">
<span class="text-primary font-weight-bold">ID:</span>
<span>{{selectedPatient?.mrn}}</span>
</div>
<div class="p-2 ">
<span class="text-primary font-weight-bold">Age:</span>
<span>{{selectedPatient?.age}}</span>
</div>
</div>
</div>
</div>
</div>
I have a following HTML with Angular FlexLayout in it
<div fxLayout="column">
<div fxLayout fxLayoutAlign="space-between">
<span >
3123131
</span>
<span >
1231231
</span>
<span >
6568
</span>
<span >
989
</span>
</div>
<div fxLayoutGap="30px" fxLayout fxLayoutAlign="space-around">
<div class=" line first"></div>
<div class=" line red"></div>
<div class=" line first"></div>
<div class=" line red"></div>
</div>
</div>
<div fxLayout fxLayoutAlign="space-around" fxLayoutGap="20px"
style="border: 1px solid #eee; border-left: none; border-right: none; margin-left: 10px; padding: 10px;">
<span class=" large" style="text-align: left;">
12<span class="small" style="vertical-align: top;">%</span></span>
<span class=" large" style="text-align: right;">
68<span class="small" style="vertical-align: top;">%</span></span>
<span class=" large" style="text-align: left;">
45<span class="small" style="vertical-align: top;">%</span></span>
<span class=" large" style="text-align: right;">
35<span class="small" style="vertical-align: top;">%</span></span>
</div>
<div fxLayout="column" fxLayoutAlign="center">
<div fxLayoutGap="30px" fxLayout fxLayoutAlign="space-around">
<i class="icon thick"></i>
<i class="icon thick"></i>
<i class="icon thick"></i>
<i class="icon thick"></i>
</div>
<div fxLayout fxLayoutAlign="space-around">
<span class=" " style="text-align: right;">
684
</span>
<span class=" ">
3514
</span>
<span class=" ">
21
</span>
<span class=" ">
354
</span>
</div>
</div>
The output of this is as below,
But I want them to be evenly aligned in the same straight line, I can't figure out what mistake I'm making in this
Stackblitz
To make horizontal alignment easier, you can define each item as having no width and a centered content. That can be achieved with an inline-flex container:
.centered {
display: inline-flex;
justify-content: center;
width: 0px;
}
After setting the centered class on the items to align, make sure that you use the same spacing on all lines (either space-around or space-between). This stackblitz shows what it looks like when space-around is used:
<div fxLayout="column">
<div fxLayout fxLayoutAlign="space-around">
<span class="centered">3123131</span>
<span class="centered">1231231</span>
<span class="centered">6568</span>
<span class="centered">989</span>
</div>
<div fxLayout fxLayoutAlign="space-around">
<div class="centered line first"></div>
<div class="centered line red"></div>
<div class="centered line first"></div>
<div class="centered line red"></div>
</div>
</div>
<div fxLayout fxLayoutAlign="space-around" class="percentContainer">
<span class="centered large">12<span class="percent">%</span></span>
<span class="centered large">68<span class="percent">%</span></span>
<span class="centered large">45<span class="percent">%</span></span>
<span class="centered large">35<span class="percent">%</span></span>
</div>
<div fxLayout="column" fxLayoutAlign="center">
<div fxLayout fxLayoutAlign="space-around">
<i class="centered icon thick"></i>
<i class="centered icon thick"></i>
<i class="centered icon thick"></i>
<i class="centered icon thick"></i>
</div>
<div fxLayout fxLayoutAlign="space-around">
<span class="centered">684</span>
<span class="centered">3514</span>
<span class="centered">21</span>
<span class="centered">354</span>
</div>
</div>
I am doing an eCommerce project. While displaying the products list, if I insert any content inside, height will vary and total alignment is disturbed.
You can see the code below. I'm using bootstrap 4.
#product_list {
width: 210px;
margin-right: 0px;
font-size: 14px;
}
.product-item {
width: 100%;
height: 350px;
cursor: pointer;
background-color: #FFFFFF;
}
.product {
width: 100%;
height: 350px;
border: solid 2px #e9e9e9;
}
.product_image {
width: 100%;
text-align: center;
}
.product_image img {
width: 70%;
height: 70%;
}
<!-- Start to products display -->
<ul class="inline-item pt-2" style="padding-left:0px;padding-right:0px;" id="product_list_grid">
<li class="list-inline-item mb-1" id="product_list">
<div class="product-item mb-1">
<div class="product">
<div class="product_image">
<img src="images/FREEDOM.png" alt="">
</div>
<div class=" text-center mb-0 ">
<h6 class="product_brand"><a class="text-dark" href="single.html">Ashirvad</a></h6>
<h6 class="product_name">
<p class="card-text m-0">
<label> Ahirvad </label>
<button type="button" class="btn btn-sm text-white " id="background_color" data-toggle="modal" data-target="#myModal1"> 1kg </button>
</p>
</h6>
<p class=" mb-0">
<span>20pc/Box</span> ❙ <span>Min 5 boxes</span>
</p>
<div class="product_price">
<span>MRP : <del>$50</del></span> ❙ <span> <b> Sale : $40 </b> </span>
</div>
<div class="quantity mb-1 ">
<input type="button" value="-" class="minus " style="border-radius:50px;">
<span> 1 </span>
<input type="button" value="+" class="plus" style="border-radius:50px;">
</div>
<div class=" text-center my-2 ">
<a class="btn btn-sm text-white" id="background_color" href="#">add to cart</a>
</div>
</div>
</div>
</div>
</li>
<li class="list-inline-item mb-1" id="product_list">
<div class="product-item mb-1">
<div class="product">
<div class="product_image">
<img src="images/FREEDOM.png" alt="">
</div>
<div class=" text-center mb-0 ">
<h6 class="product_brand"><a class="text-dark" href="single.html">Ashirvad</a></h6>
<h6 class="product_name">
<p class="card-text m-0">
<label> Ahirvad </label>
<button type="button" class="btn btn-sm text-white " id="background_color" data-toggle="modal" data-target="#myModal1"> 1kg </button>
</p>
</h6>
<p class=" mb-0">
<span>20pc/Box</span> ❙ <span>Min 5 boxes</span>
</p>
<div class="product_price"> <span>MRP : <del>$50</del></span> ❙ <span> <b>
Sale : $40 </b> </span> </div>
<div class="quantity mb-1 ">
<input type="button" value="-" class="minus " style="border-radius:50px;">
<span> 1 </span>
<input type="button" value="+" class="plus" style="border-radius:50px;">
</div>
<div class=" text-center my-2 "><a class="btn btn-sm text-white" id="background_color" href="#">add to cart</a></div>
</div>
</div>
</div>
</li>
........
</ul>
This the code I am using to display the products ,while displaying if the list items content and images everything same it will display clearly. If I insert any content inside height alignment issue is arising.
<ul class="inline-item pt-2 d-flex flex-wrap" style="padding-left:0px;padding-right:0px;" id="product_list_grid">
<li class="list-inline-item mb-1" id="product_list">
<div class="product-item mb-1">
<div class="product">
<div class="product_image">
<img src="images/FREEDOM.png" alt="">
</div>
<div class=" text-center mb-0 ">
<h6 class="product_brand"><a class="text-dark" href="single.html">Ashirvad</a></h6>
<h6 class="product_name">
<p class="card-text m-0">
<label> Ahirvad </label>
<button type="button" class="btn btn-sm text-white " id="background_color"
data-toggle="modal" data-target="#myModal1">
1kg
</button>
</p>
</h6>
<p class=" mb-0">
<span>20pc/Box</span> ❙ <span>Min 5 boxes</span>
</p>
<div class="product_price"> <span>MRP : <del>$50</del></span> ❙ <span> <b>
Sale : $40 </b> </span> </div>
<div class="quantity mb-1 ">
<input type="button" value="-" class="minus " style="border-radius:50px;">
<span> 1 </span>
<input type="button" value="+" class="plus" style="border-radius:50px;">
</div>
<div class=" text-center my-2 "><a class="btn btn-sm text-white" id="background_color"
href="#">add
to cart</a></div>
</div>
</div>
</div>
</li>
<li class="list-inline-item mb-1" id="product_list">
<div class="product-item mb-1">
<div class="product">
<div class="product_image">
<img src="images/FREEDOM.png" alt="">
</div>
<div class=" text-center mb-0 ">
<h6 class="product_brand"><a class="text-dark" href="single.html">Ashirvad</a></h6>
<h6 class="product_name">
<p class="card-text m-0">
<label> Ahirvad </label>
<button type="button" class="btn btn-sm text-white " id="background_color"
data-toggle="modal" data-target="#myModal1">
1kg
</button>
</p>
</h6>
<p class=" mb-0">
<span>20pc/Box</span> ❙ <span>Min 5 boxes</span>
</p>
<div class="product_price"> <span>MRP : <del>$50</del></span> ❙ <span> <b>
Sale : $40 </b> </span> </div>
<div class="quantity mb-1 ">
<input type="button" value="-" class="minus " style="border-radius:50px;">
<span> 1 </span>
<input type="button" value="+" class="plus" style="border-radius:50px;">
</div>
<div class=" text-center my-2 "><a class="btn btn-sm text-white" id="background_color"
href="#">add
to cart</a></div>
</div>
</div>
</div>
</li>
</ul>
<style>
/* Start to css for product list */
#product_list {width:210px;
margin-right: 0px;
font-size: 14px;}
.product-item
{
width: 100%;
height: 350px;
cursor: pointer;
background-color: #FFFFFF;
}
.product {
width: 100%;
height: auto;
border: solid 2px #e9e9e9;
max-height: 600px;
}
.product_image
{
width: 100%;
text-align: center;
}
.product_image img
{
width: 70%;
height:70%;
}
/* END to css for product list */
</style>
use "d-flex" and "flex-wrap" class for ul tag. and use max-height instead of height.
I hope it would be helpful.