i am new to ARIA tags. Kindly excuse if i am stupid.
What i want is a custom drop down to be visible when i click the down arrow.
The problem is the popup comes write below the icon as shown in this pic.
CSS
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.bkcolor {
background-color: #009cf6;
width: 305px;
/*#008bdd*/
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div id="container">
<div class="row" style="background:#009DF8;" id="namebardiv">
<div class="col-xs-10 col-md-5">
<div class="row">
<div class="col-xs-3 col-md-3">
</div>
<div class="col-xs-6 col-md-6">
<div class="row" style="color: white;font-size: 11px;">
</div>
</div>
<div class="col-xs-3 col-md-3">
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-3">
<i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
</div>
<div class="col-xs-7 col-md-7">
<div class="row vertical-align">
<div class="col-xs-7 col-md-7" style="color: white; font-size: 35px;display: inline-block;">
Benarsi Das
</div>
<div class="col-xs-1 col-md-1 dropdrown">
<div class="dropdown-toggle" style="color: white; font-size: 35px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</div>
<ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
something
</ul>
</div>
<div class="col-xs-4 col-md-4">
<span style="color: white;font-size: 23px;padding-top: 10px;"></span>
</div>
</div>
</div>
<div class="col-xs-2 col-md-2">
</div>
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
<div class="col-xs-10 col-md-5 vertical-align">
<div class="row">
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
</div>
</body>
</html>
But I need it like this
I know I can achieve it with this code
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.bkcolor {
background-color: #009cf6;
width: 305px;
/*#008bdd*/
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div id="container">
<div class="row" style="background:#009DF8;" id="namebardiv">
<div class="col-xs-10 col-md-5">
<div class="row">
<div class="col-xs-3 col-md-3">
</div>
<div class="col-xs-6 col-md-6">
<div class="row" style="color: white;font-size: 11px;">
</div>
</div>
<div class="col-xs-3 col-md-3">
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-3">
<i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
</div>
<div class="col-xs-7 col-md-7">
<div class="row dropdown" id="dropdownrow">
<div class="dropdown-toggle" style="color: white; font-size: 35px; width:210px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<div id="dropdownlabel" style="color: white; font-size: 35px;display: inline-block;width:180px;font-family:'Roboto-Regular',san-serif">
Benarsi Das
</div>
<span class="caret"></span>
</div>
<ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
something
</ul>
</div>
</div>
<div class="col-xs-2 col-md-2">
</div>
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
<div class="col-xs-10 col-md-5 vertical-align">
<div class="row">
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
</div>
</body>
</html>
But this makes the dropdown(popup) visible even the text is clicked. I want it only to be visible only when the dropdown icon is clicked.
Any help would be greatly appreciated.
In your stylesheet, add the declaration
transform: translate(-60px, 26px);
to the style rules for .bkcolor.
N.B. You can alter the x-translate (-60px) and the y-translate (26px) to achieve the exact positioning that you want.
Working Example:
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.bkcolor {
background-color: #009cf6;
width: 305px;
/*#008bdd*/
transform: translate(-60px, 26px);
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div id="container">
<div class="row" style="background:#009DF8;" id="namebardiv">
<div class="col-xs-10 col-md-5">
<div class="row">
<div class="col-xs-3 col-md-3">
</div>
<div class="col-xs-6 col-md-6">
<div class="row" style="color: white;font-size: 11px;">
</div>
</div>
<div class="col-xs-3 col-md-3">
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-3">
<i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
</div>
<div class="col-xs-7 col-md-7">
<div class="row vertical-align">
<div class="col-xs-7 col-md-7" style="color: white; font-size: 35px;display: inline-block;">
Benarsi Das
</div>
<div class="col-xs-1 col-md-1 dropdrown">
<div class="dropdown-toggle" style="color: white; font-size: 35px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</div>
<ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
something
</ul>
</div>
<div class="col-xs-4 col-md-4">
<span style="color: white;font-size: 23px;padding-top: 10px;"></span>
</div>
</div>
</div>
<div class="col-xs-2 col-md-2">
</div>
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
<div class="col-xs-10 col-md-5 vertical-align">
<div class="row">
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
</div>
</body>
</html>
Related
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>
Im tried to create some UI for the my university project, But its not working correctly , anyone know how to do that correctly or any ideas (look my sample image) using bootstrap 4
I tried to design like this structure
This is my code
.icn-img {border-radius: 50%; display: block; width: 50px; height: 50px; background: white; border: 1px solid lightgray;}
.st-rgt-img{ display: block; width: 20px; height: 20px; background: lightgray}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="card">
<div class="card-body">
<!----------- details------------>
<div class="row">
<div class="col">
<div class="d-flex flex-row">
<div class=""><span class="icn-img"></span></div>
<div class="ml-2">No </div>
<div class=" ml-3 mt-1"> <span style="font-weight: bold;">Salon</span></div>
<div class=" ml-3"> have been created yet</div>
</div>
</div>
<div class="col">
<div class="api-lst">
<div class="card border-danger border-bottom" >
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2"> <h6 class="card-subtitle mb-2 text-muted">location</h6></div>
</div>
</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2"> <h6 class="card-subtitle mb-2 text-muted">34 salon</h6></div>
</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<div class="card-body text-success">
<h5 class="card-title">5</h5>
</div>
<div class="card-footer bg-success border-success">text</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-100"></div>
</div>
<!----------- details------------>
</div></div>
</div>
</div>
you can check the link
https://codepen.io/Xenio/pen/OqwxZa
.icn-img {
border-radius: 50%;
display: block;
width: 50px;
height: 50px;
background: white;
border: 1px solid lightgray;
}
.st-rgt-img {
display: block;
width: 20px;
height: 20px;
background: lightgray
}
.api-lst .card:hover{
transform: scale(1.04);
position:relative;
z-index:1;
transition: 0.5s;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="card">
<div class="card-body">
<!----------- details------------>
<div class="row">
<div class="col-sm-6">
<div class="">
<div class="d-flex align-items-center ">
<span class="icn-img"></span>
<div class="ml-2">No </div>
</div>
<div class=" ml-3 mt-1"> <span style="font-weight: bold;">Salon</span></div>
<div class=" ml-3"> have been created yet</div>
</div>
</div>
<div class="col-sm-6">
<div class="api-lst">
<div class="card data border-danger border-bottom">
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">location</h6>
</div>
</div>
</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">34 salon</h6>
</div>
</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<h5 class="">5</h5>
<div class="bg-success border-success">text</div>
</div>
</div>
</div>
</div>
</div>
<div class="card border-danger border-bottom">
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">location</h6>
</div>
</div>
</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">34 salon</h6>
</div>
</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<h5 class="">5</h5>
<div class="bg-success border-success">text</div>
</div>
</div>
</div>
</div>
</div>
<div class="card border-danger border-bottom">
<div class="card-body ">
<div class="row">
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">location</h6>
</div>
</div>
</div>
<div class="col-sm">
<div class="d-flex flex-row">
<div class=""><span class="st-rgt-img"></span> </div>
<div class="p-2">
<h6 class="card-subtitle mb-2 text-muted">34 salon</h6>
</div>
</div>
</div>
<div class="col-sm">
0:32
</div>
<div class="col-sm">
<div class="card border-success ">
<h5 class="">5</h5>
<div class="bg-success border-success">text</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-100"></div>
</div>
<!----------- details------------>
</div>
</div>
</div>
</div>
This will look like an obvious question about making the page responsive, but I was not able to resolve the issue so far.
I did this page with Bootstrap 4 and HTML.
The issue I have is, that the page does not fit completely in the screen, but need to use the vertically scroll to see everything. But, using Chrome, when I put this to 75% zoom and also resize the browser window 2/3 of the full size (with the developer's tools I see that the page take a size of 1810 x 1189, in that case, everything looks good and the proportion of all the elements as well.
The final result I am waiting is: use the 100% of the browser zoom and the browser window to take all the screen (not reduced to make it smaller) and it should look equals that when I put the browser zoom to 75% and resize the browser window 2/3 making the page 1810 x 1189.
In other words, I need to make all the content be visible in the screen, keep the proporsion of the elements without using any vertical or horizontal scroll.
I tried also changing the viewport, with no success. I know I am doing a lot of things wrong, and the response will look obvious but I am very confused.
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Marketing Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['DR', 60],
['LI', 20],
['Events', 10],
['Other', 10]
]);
var options = {
legend: 'none',
pieSliceText: 'label',
backgroundColor: '#343a40',
colors: ['#2F5499', '#3965B8', '#708CCE', '#4A6BAD'],
is3D: true,
fontSize: '15',
chartArea: { width: 460, height: 260 }
};
var chart1 = new google.visualization.PieChart(document.getElementById('piechart_3d_1'));
var chart2 = new google.visualization.PieChart(document.getElementById('piechart_3d_2'));
var chart3 = new google.visualization.PieChart(document.getElementById('piechart_3d_3'));
chart1.draw(data, options);
chart2.draw(data, options);
chart3.draw(data, options);
}
</script>
</head>
<body>
<style>
body {
font-family: sans-serif;
}
.card-body {
padding: 0.01rem
}
.padding-header {
padding: 0.6rem
}
.bg-light-blue {
background-color: #4671C3;
}
.bg-lila {
background-color: #6F339F;
}
.bg-dark {
background-color: #424242;
}
.black-box-size {
max-width: 100%;
height: 325px;
}
.shape-round {
height: 150px;
width: 150px;
background-color: #6F339F;
border-radius: 50%;
display: inline-block;
text-align: center;
color: #fff;
padding: 3.5rem 1.5rem;
}
.block-container {
position: absolute;
top: 40%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 109px;
height: 38px;
}
.shadowBox {
text-decoration: none;
display: absolute;
display: block;
transition: 0.5s;
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5);
}
.letterSpacing {
letter-spacing: 4px;
}
/*Viewport windows font size percentage*/
.vwFontSizeH1 {
font-size: 2.1vw;
}
.vwFontSizeH2 {
font-size: 1.65vw;
}
</style>
<div class="container-fluid" style="margin-top: 30px;">
<p></p><di></di>
<div class="card text-white bg-light-blue shadowBox">
<div class="card-body">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<h1 class="text-center padding-header letterSpacing vwFontSizeH1">Marketing Performance Dashboard
</h1>
</div>
<div class="col-md-3"></div>
</div>
</div>
</div>
<p></p>
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-11">
<h2
class="text-center padding-header bg-light-blue text-white letterSpacing shadowBox vwFontSizeH2">
Today</h2>
</div>
<div class="col-md-1"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<h2 class="text-center padding-header bg-light-blue text-white letterSpacing shadowBox vwFontSizeH2">This
Week</h2>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11">
<h2 class="text-center padding-header bg-light-blue text-white letterSpacing shadowBox vwFontSizeH2">This
Month</h2>
</div>
</div>
</div>
</div>
<p></p>
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
<span class="block-container">
<h2 class="text-center padding-header bg-light-blue text-white vwFontSizeH2">ENQ</h2>
</span>
</div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<span class="text-center vwFontSizeH2">10/32</span>
</span>
<p></p>
</div>
<div class="col-md-5"></div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
<span class="block-container">
<h2 class="text-center padding-header bg-light-blue text-white vwFontSizeH2">BOOK</h2>
</span>
</div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<span class="text-center vwFontSizeH2">15/20</span>
</span>
<p></p>
</div>
<div class="col-md-5"></div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
<span class="block-container">
<h2 class="text-center padding-header bg-light-blue text-white vwFontSizeH2">SAT</h2>
</span>
</div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<h2 class="text-center vwFontSizeH2">09/17</h2>
</span>
<p></p>
</div>
<div class="col-md-5"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
</div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<h2 class="text-center vwFontSizeH2">10/32</h2>
</span>
<p></p>
</div>
<div class="col-md-5"></div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
</div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<h2 class="text-center vwFontSizeH2">15/20</h2>
</span>
<p></p>
</div>
<div class="col-md-5"></div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
</div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<h2 class="text-center vwFontSizeH2">09/17</h2>
</span>
<p></p>
</div>
<div class="col-md-5"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-5">
</div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<h2 class="text-center vwFontSizeH2">10/32</h2>
</span>
<p></p>
</div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-5">
</div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<h2 class="text-center vwFontSizeH2">15/20</h2>
</span>
<p></p>
</div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-3">
<span class="shape-round shadowBox">
<h2 class="text-center vwFontSizeH2">09/17</h2>
</span>
<p></p>
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="padding-header bg-light-blue text-white shadowBox letterSpacing vwFontSizeH2">Opportunity Breakdown (Sat)
</h2>
</div>
</div>
<p></p>
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-11">
<div class="black-box-size bg-dark text-white shadowBox">
<h2 class="text-center padding-header letterSpacing vwFontSizeH2">Today</h2>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-8">
<div id="piechart_3d_1" style="width: 460px; height: 260px;"></div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</div>
<div class="col-md-1">
</div>
</div>
</div>
<div class="col-md-4">
<div class="black-box-size bg-dark text-white shadowBox">
<h2 class="text-center padding-header letterSpacing vwFontSizeH2">This Week</h2>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div id="piechart_3d_2" style="width: 510px; height: 260px;"></div>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-11">
<div class="black-box-size bg-dark text-white shadowBox">
<h2 class="text-center padding-header letterSpacing vwFontSizeH2">This Month</h2>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-8">
<div id="piechart_3d_3" style="width: 460px; height: 260px;"></div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<p></p>
<div class="card text-white bg-light-blue shadowBox">
<div class="card-body">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<h2 class="text-center padding-header letterSpacing vwFontSizeH2" style="margin-top: 6px;">Revenue Generated this Month - £ 100,000,000
</h2>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</div>
<p></p>
</div>
I am trying to truncate text in div.inbox-item-message using text-overflow:ellipsis, but whenever the truncation happens, it breaks the layout.
On running the example below, you can see that the second item's text gets truncated and the layout gets messed up.
How to solve this?
.inbox {
border: 1px solid black;
background-color: black;
color: white;
}
.inbox-item-display-picture {
padding: 0;
}
.inbox-item-display-picture img {
width: 100%
}
.inbox-item {
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
cursor: pointer;
padding: 2%;
border-bottom: 0.5px solid gray;
}
.inbox-item:hover {
background: lightblue;
color: black;
}
.inbox-item-timestamp {
text-align: right;
font-size: 75%;
}
.inbox-item-message {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.inbox-header {
padding: 3%;
border-bottom: 1px solid white;
}
.inbox-header-actions {
text-align: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="chat-container">
<div class="row">
<div class="col inbox">
<div class="row inbox-header">
<div class="col inbox-header-title">
<span class="h5"> <span class="fa fa-comments"></span>
Conversations</span>
</div>
<div class="col-3 inbox-header-actions">
<span class="fa fa-filter"></span>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
</div>
<div class="col">
<div class="row">
<div class="col inbox-item-title">
<span>Chat #10</span>
</div>
<div class="col-4 inbox-item-timestamp">
8:48 AM
</div>
</div>
<div class="row">
<div class="col inbox-item-message">
<span class="inbox-item-sender">Person 1:</span> Hello, how are you?
</div>
<div class="col-2 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">2</span>
</div>
</div>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_employee_male-2-512.png">
</div>
<div class="col">
<div class="row">
<div class="col inbox-item-title">
<span>Chat #11</span>
</div>
<div class="col-4 inbox-item-timestamp">
8:50 AM
</div>
</div>
<div class="row">
<div class="col inbox-item-message">
<span class="inbox-item-sender">Person 2:</span> Some really long message here lorem
ipsum
</div>
<div class="col-2 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">1</span>
</div>
</div>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
</div>
<div class="col">
<div class="row">
<div class="col inbox-item-title">
<span>Chat #12</span>
</div>
<div class="col-4 inbox-item-timestamp">
yesterday
</div>
</div>
<div class="row">
<div class="col inbox-item-message">
<span class="inbox-item-sender">Person 3:</span> Short message
</div>
<div class="col-2 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">3</span>
</div>
</div>
</div>
</div>
</div>
<div class="col" class="conversation">
</div>
</div>
</div>
</div>
</body>
</html>
Thanks
.inbox {
border: 1px solid black;
background-color: black;
color: white;
}
.inbox-item-display-picture {
padding: 0;
}
.inbox-item-display-picture img {
width: 100%
}
.inbox-item {
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
cursor: pointer;
padding: 2%;
border-bottom: 0.5px solid gray;
}
.inbox-item:hover {
background: lightblue;
color: black;
}
.inbox-item-timestamp {
text-align: right;
font-size: 75%;
}
.inbox-item-message {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.inbox-header {
padding: 3%;
border-bottom: 1px solid white;
}
.inbox-header-actions {
text-align: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="chat-container">
<div class="row">
<div class="col-12 inbox">
<div class="row inbox-header">
<div class="col-11 inbox-header-title">
<span class="h5"> <span class="fa fa-comments"></span>
Conversations</span>
</div>
<div class="col-1 inbox-header-actions">
<span class="fa fa-filter"></span>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
</div>
<div class="col-10">
<div class="row">
<div class="col-10 inbox-item-title">
<span>Chat #10</span>
</div>
<div class="col-2 inbox-item-timestamp">
8:48 AM
</div>
</div>
<div class="row">
<div class="col-11 inbox-item-message">
<span class="inbox-item-sender">Person 1:</span> Hello, how are you?
</div>
<div class="col-1 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">2</span>
</div>
</div>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_employee_male-2-512.png">
</div>
<div class="col-10">
<div class="row">
<div class="col-10 inbox-item-title">
<span>Chat #11</span>
</div>
<div class="col-2 inbox-item-timestamp">
8:50 AM
</div>
</div>
<div class="row">
<div class="col-11 inbox-item-message">
<span class="inbox-item-sender">Person 2:</span> Some really long message here lorem
ipsum
</div>
<div class="col-1 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">1</span>
</div>
</div>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
</div>
<div class="col">
<div class="row">
<div class="col-10 inbox-item-title">
<span>Chat #12</span>
</div>
<div class="col-2 inbox-item-timestamp">
yesterday
</div>
</div>
<div class="row">
<div class="col-11 inbox-item-message">
<span class="inbox-item-sender">Person 3:</span> Short message
</div>
<div class="col-1 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">3</span>
</div>
</div>
</div>
</div>
</div>
<!--TODO: <div class="col-12" class="conversation"></div>-->
</div>
</div>
</div>
</body>
</html>
Update: If you really must let the columns be able to automatically resize (not set the col-#), you could wrap the contents of the message body inside something like this and this will also give you your expected resulted:
Source: How to work with ellipsis in bootstrap responsive table
.inbox {
border: 1px solid black;
background-color: black;
color: white;
}
.inbox-item-display-picture {
padding: 0;
}
.inbox-item-display-picture img {
width: 100%
}
.inbox-item {
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
cursor: pointer;
padding: 2%;
border-bottom: 0.5px solid gray;
}
.inbox-item:hover {
background: lightblue;
color: black;
}
.inbox-item-timestamp {
text-align: right;
font-size: 75%;
}
.inbox-item-message {
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
// line-height:1;
}
.hackyWrapper {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
width: 95%;
}
.hackyWrapper:before {
content: '';
display: inline-block;
}
.inbox-header {
padding: 3%;
border-bottom: 1px solid white;
}
.inbox-header-actions {
text-align: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="chat-container">
<div class="row">
<div class="col-12 inbox">
<div class="row inbox-header">
<div class="col inbox-header-title">
<span class="h5"> <span class="fa fa-comments"></span> Conversations
</span>
</div>
<div class="col-3 inbox-header-actions">
<span class="fa fa-filter"></span>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
</div>
<div class="col">
<div class="row">
<div class="col inbox-item-title">
<span>Chat #10</span>
</div>
<div class="col-4 inbox-item-timestamp">
8:48 AM
</div>
</div>
<div class="row">
<div class="col inbox-item-message">
<span class='hackyWrapper'>
<span class="inbox-item-sender">Person 1:</span> Hello, how are you?
</span>
</div>
<div class="col-2 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">2</span>
</div>
</div>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_employee_male-2-512.png">
</div>
<div class="col">
<div class="row">
<div class="col inbox-item-title">
<span>Chat #11</span>
</div>
<div class="col-4 inbox-item-timestamp">
8:50 AM
</div>
</div>
<div class="row">
<div class="col inbox-item-message">
<span class='hackyWrapper'>
<span class="inbox-item-sender">Person 2:</span> Some really long message here lorem Some really long message here lorem ipsum
</span>
</div>
<div class="col-2 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">1</span>
</div>
</div>
</div>
</div>
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
</div>
<div class="col">
<div class="row">
<div class="col inbox-item-title">
<span>Chat #12</span>
</div>
<div class="col-4 inbox-item-timestamp">
yesterday
</div>
</div>
<div class="row">
<div class="col inbox-item-message">
<span class='hackyWrapper'>
<span class="inbox-item-sender">Person 3:</span> Short message
</span>
</div>
<div class="col-2 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">3</span>
</div>
</div>
</div>
</div>
</div>
<div class="col" class="conversation">
</div>
</div>
</div>
</div>
</body>
</html>
Hope this helps,
If you add col class you should always add the colspan. for instance you have a col-2 and a col class inside your .row.inbox-item. if you add all the classes on the same level up you should come to a total of 12. So if you have two divs like in your example you should add the 10 you have left after your first .col-2 div to the other div and change .col to .col-10.
The same goes for you other places where you are missing cols. Like "col inbox-item-title" should be "col-8 inbox-item-title" since there is already a col-4 on the same level.
I tried your code you should edit your col class after the col-2 class div to col-10 to make it work.
Like this:
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
</div>
<div class="col-10">
<div class="row">
<div class="col-8 inbox-item-title">
<span>Chat #10</span>
</div>
<div class="col-4 inbox-item-timestamp">
8:48 AM
</div>
</div>
<div class="row">
<div class="col-10 inbox-item-message">
<span class="inbox-item-sender">Person 1:</span> Hello, how are you?
</div>
<div class="col-2 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">2</span>
</div>
</div>
</div>
</div>
I'm trying to arrange a div like this but can't get it to work.
What I'm getting is this
My thought was to keep the image in its own column and then split the other columns into smaller rows and insert there but that doesn't seem to work. Here's my code:
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="row d-flex w-100 justify-content-between products-div">
<div class="col-sm-1">
<img [src]="prod.imagePath" class="product-page-images">
</div>
<div class="row">
<div class="col-sm-10">
<h3 class="mb-1">{{prod.name}}</h3>
<p class="products-price-text">${{prod.price}}</p>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<h5 class="mb-1">{{prod.seller}}</h5>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<p class="mb-1">{{prod.description}}</p>
</div>
</div>
</div>
</a>
HTML
<div class="container">
<div class="row">
<div class="main-container clearfix">
<div class="col-md-1">
<div class="img-con">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" alt="" />
</div>
</div>
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<div class="clearfix">
<div class="pull-left">
<h3>Name</h3>
<small>Seller</small>
</div>
<div class="pull-right">
<h3>Price</h3>
</div>
</div>
</div>
<div class="col-md-12">
<div class="desc">
description
</div>
</div>
</div>
</div>
</div>
</div></div>
css
.main-container
{
border:1px solid ;
}
.img-con
{
height:100%;
width:100%;
}
.img-con img
{
max-width:inherit;
max-height:inherit;
height:100%;
width:100%;
}
.desc
{
border:1px solid;
}
reference link
and style accordingly.. hope this helps