While zooming the page TEXT is overlapping with the Image, I am sharing my screenshot, Please look into that and can you please give me the solution.
Thanks in Advance...
This is the css Code, While zooming the page TEXT is overlapping with the Image,
.Pad{
padding: 60px 0px;
margin-top: -300px;
}
body {
margin: 0;
}
.outer-div-for-the-imgae-icon{position:relative; display:block; height:300px; width:300px; }
.outer-div-for-the-imgae-icon img{height:300px; width:300px; object-fit:cover;}
.outer-div-for-the-imgae-icon i{position:absolute; top:0; left:100%; font-size:40px;}
This is the HTML code, While zooming the page TEXT is overlapping with the Image,
<div class="col-12 col-12 p-0">
<div class="col-6 float-left">
<div class="outer-div-for-the-imgae-icon">
<app-image [imagesrc]="imagePath" style="width: 190px;max-height: 190px;clip-path: square(25px at center);"
class="d-none d-sm-block" alt="..."></app-image>
<i (click)="inputFile.click()" style="color : white;left: 180px;
position: absolute; top: -5px; padding: 3px; background-color: rgb(0, 195, 255);
border-radius: 50%;font-size: 12px;"
class="fa fa-pencil fa-lg" aria-hidden="true"></i>
</div>
<div class="col-6 Pad float-right">
<div class="col-sm ">
<span class="name">
<b style="color: rgb(25,25,112); font-size : 15px ">{{myprofile?.FirstName}}
{{myprofile?.LastName}}</b>
</span>
</div>
<div class="col-sm">
<span class="name">
<p>{{myprofile?.Role}}</p>
</span>
</div>
<div class="col-sm">
<span class="name">
<p>{{myprofile?.Phone}} {{myprofile?.UserName}}</p>
</span>
</div>
</div>
</div>
<!-- end snippet -->
Hi sandeep please try this and replace this css in you css and let me know if its fine.please adjust the min and max width and height according to you.
.outer-div-for-the-imgae-icon{position:relative; display:block; min-height:300px; width:100%; height:auto;} .outer-div-for-the-imgae-icon img{max-height:300px; width:100%; max-width:300px; height:auto; object-fit:cover;} .outer-div-for-the-imgae-icon i{position:absolute; top:0; left:100%; font-size:40px;}
I think this is overlapping only because we have given the image a fixed width and height .
EDIT:
so i've changed the code a bit and this is what you will need:
<style>
.Pad{
padding: 60px 0px;
margin-top: -300px;
}
body {
margin: 0;
}
.outer-div-for-the-imgae-icon{position:relative; display:block; height:300px; width:300px; }
.outer-div-for-the-imgae-icon img{height:300px; width:300px; object-fit:cover;}
.outer-div-for-the-imgae-icon i{position:fixed; top:0; left:100%; font-size:40px;}
</style>
<html>
<body>
<div class="col-12 col-12 p-0">
<div class="col-6 float-left">
<div class="outer-div-for-the-imgae-icon">
<app-image [imagesrc]="imagePath" style="width: 190px;max-height: 190px;clip-path: square(25px at center);"
class="d-none d-sm-block" alt="..."></app-image>
<i (click)="inputFile.click()" style="color : white;left: 180px;
position: absolute; top: -5px; padding: 3px; background-color: rgb(0, 195, 255);
border-radius: 50%;font-size: 12px;"
class="fa fa-pencil fa-lg" aria-hidden="true"></i>
</div>
<div class="col-6 Pad float-right">
<div class="col-sm ">
<span class="name">
<b style="color: rgb(25,25,112); font-size : 15px ">{{myprofile?.FirstName}}
{{myprofile?.LastName}}</b>
</span>
</div>
<div class="col-sm">
<span class="name">
<p>{{myprofile?.Role}}</p>
</span>
</div>
<div class="col-sm">
<span class="name">
<p>{{myprofile?.Phone}} {{myprofile?.UserName}}</p>
</span>
</div>
</div>
</div>
<div id="over" >
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg"> some text
</div>
<div style="padding-left: 100px;" class="col-6 float-right">
<div class="col-12 ">
<div class="office-address-heading">
<p class="Address">Office Address</p>
</div>
<div class="d-flex align-items-center">
<!-- <i style="color:grey;" class="fa fa-map-marker fa-2x mr-2" aria-hidden="true"></i> -->
<address class="mb-0 size">
{{myprofile?.OfficeAddress}}
</address>
</div>
</div>
<hr />
<div class="col-12">
<div class="office-address-heading">
<p class="Address">Communication Details</p>
</div>
<div class="d-flex align-items-center office-address-details ">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style ="right: 14px;">
<div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 float-left">
<i class="fa fa-phone fa-2x mr-2" aria-hidden="true"></i>
<a style="color: black;" href="tel:1-562-867-5309">{{myprofile?.Phone}}</a>
</div>
<div class="d-flex1 col-xs-12 col-sm-12 col-md-8 col-lg-7 align-items-center office-address-details float-right ">
<i class="fa fa-envelope fa-2x mr-2" aria-hidden="true"></i>
<a style="color: black;" href="mailto:rafael.cepeda#lpl.com">{{myprofile?.Email}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
which you will get this result:
enter image description here
what i have changed is removing the css from the div that is responsible for the image, (bear in mind that i don't have the required files like photo's, links ect.... but this changed the image not overlapping the text.
reply if there is something wrong or if you have any questions
Related
I have a horizontal scrollable div where I have squared divs. I need to make these squared divs bigger, but I can't achieve this. In the example I provide here, there are 3 squared divs. Each time I add a new one, all of them get even smaller. How can I prevent them from shrinking and maintain my scrollable div?
Here's my codepen.
Set a min-width to your boxes, and make sure your container doesn't wrap.
Modified code is in the bottom of the CSS snippet
.publish-product-form {
margin-bottom: 15px;
}
.image-scroller {
border: 1px solid blue;
width: 375px;
height: auto;
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
background-color: white;
padding: 0px;
-webkit-overflow-scrolling: touch;
}
.img-box {
padding: 0px;
}
.img-holder {
margin-top: 20px;
}
.image-doesnt-exist {
width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center;
border: 2px dotted #8ABE57;
border-radius: 0.25rem;
}
.add-img-button::before {
font-size: 1.2em;
}
.add-img-button {
color: #8ABE57;
position: absolute;
top: 50%;
left: 50%;
font-size: 1.2em;
transform: translate(-50%, -50%);
}
.add-img-button:hover {
color: #9FD362;
}
/**New css**/
.image-scroller .row {
flex-wrap: nowrap;
}
.image-scroller .img-box {
min-width: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#editProductModal">Click me</button>
<!-- Modal Editar Aviso -->
<div class="modal fade bd-example-modal-md publish-product-modal" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true" id="editProductModal">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content publish-product-modal-content">
<div class="modal-header publish-product-modal-header">
<img src="images/logo-header.svg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body publish-product-modal-body text-center col-lg-11 col-md-11 pb-5 pt-0 mx-auto">
<!-- Image Edition Section -->
<div class="publish-product-form col-12">
<form class="edit-ad-product-information">
<!--- MY IMAGE SCROLL TEST -->
<div class="row">
<div class="image-scroller col-12">
<div class="row">
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /MY IMAGE SCROLL TEST-->
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Modal Editar Aviso-->
remove col class from div.img-box,
also you need to change .row class' display property to block from flex
.row {
display: block;
white-space: nowrap
}
.img-box {
height: 125px;
width: 125px;
display: inline-block;
}
I am trying to align the text and icons, which are in a box, to the center of it. I want it centered like this:
I tried the following:
adding align-content: center and justify-content: center as an inline style in the div tag for row, but no luck. Any helps or leads are appreciated. I have provided a jsfiddle link to show you what I have now. As of now, all the content is left.
https://jsfiddle.net/silosc/76ktyveu/4/
<div class="row" style="width:100%">
<div class="report-card-i report-card-i-height">
<h3 class="m-l-35 p-t-25 p-b-10">Stats</h3>
<div class="fa-orange m-t-10 m-b-15">
<div class="row">
<div class="col-sm-3 col-xs-3">
<i class="fa fa-star m-r-15">Stat1</i>
</div>
<div class="col-sm-2 col-xs-3">
<i class="fa fa-angle-right"></i>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-3 col-xs-3">
<i class="fa fa-star m-r-15">Stat2</i>
</div>
<div class="col-sm-2 col-xs-3">
<i class="fa fa-angle-right"></i>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-3 col-xs-3">
<i class="fa fa-star m-r-15">Stat3</i>
</div>
<div class="col-sm-2 col-xs-3">
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</div>
</div>
<style>
.report-card-i{
background: orange;
box-shadow: 2px 2px 10px 4px rgba(0, 0, 0, 0.2);
position: relative;
margin-top: 30px;
}
.report-card-i-height {
min-height: 280px;
height: auto;
width: 100%;
}
.report-name {
font-family: Questrial;
font-weight: bold;
color: #f0522f !important;
}
</style>
Since you are using bootstrap you can use the text-left class. Also a lot of your bootstrap margins and padding classes are set wrong... margins are mr-1 to mr-5. Same format for paddings
.report-card-i {
background: orange;
box-shadow: 2px 2px 10px 4px rgba(0, 0, 0, 0.2);
position: relative;
margin-top: 30px;
}
.report-card-i-height {
min-height: 280px;
height: auto;
width: 100%;
}
.report-name {
font-family: Questrial;
font-weight: bold;
color: #f0522f !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="width:100%">
<div class="report-card-i report-card-i-height">
<h3 class="ml-5 pt-5 pb-2">Stats</h3>
<div class="fa-orange mt-5 mb-5">
<div class="row">
<div class="col-sm-3 col-xs-3 text-center">
<i class="fa fa-star">Stat1</i>
</div>
<div class="col-sm-2 col-xs-3">
<i class="fa fa-angle-right"></i>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-3 col-xs-3 text-center">
<i class="fa fa-star m-r-15">Stat2</i>
</div>
<div class="col-sm-2 col-xs-3">
<i class="fa fa-angle-right"></i>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-3 col-xs-3 text-center">
<i class="fa fa-star m-r-15">Stat3</i>
</div>
<div class="col-sm-2 col-xs-3">
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</div>
</div>
Try this: .fa { margin-left: 50%; transform: translateX(-50%); },
and if you want space between the icon and the text then try: .fa-star:before { padding-right: 20px; }
When I Zoom the page Giving more text , Text is coming out of the box and Image icons are moving out.I am putting two screen shots, 1st Image is what I am getting the output after coding the below code and
2nd Image is excepted output
Please help me in this Thanks in advance
This is Css code,When I Zoom the page, Text is coming out of the box and Image icons are moving out.
.flex-container{
display: flex;
overflow-x:auto;
}
.officeflex{
margin: 10px;
padding: 20px;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
.d-flex.align-items-start.summary {
display: flex;
flex-direction: row;
justify-content:space-between;
margin:auto;
max-width:1170px;
width:100%;
}
.align-items-center{
.size{
font-size: 12px;
}
}
.office-address-heading{
.Address{
color:grey;
font-size: 12px;
}
}
.office-address-details{
.mr-2{
color: rgb(0, 195, 255); font-size: 20px
}
}
.profile-details{
margin-left:15px;
padding:40px;
.name{
font-size:12px;
line-height:22px;
font-weight: 500;
}
.designation{
font-size:12px;
line-height:25px;
font-weight: 400;
}
.phone{
font-size:12px;
font-weight: 100;
}
}
.btn{
font-size: 12px !important;
background-color: #0076C8;
color: #FFFFFF;
}
This is HTML code,When I Zoom the page, Text is coming out of the box and Image icons are moving out.
<div class="row">
<div class="col-sm-12">
<div class="profile-summary">
<b>Profile summary</b>
</div>
<div class="d-flex align-items-start summary1" style="margin-bottom: 10px;background-color: #fff;">
<app-image [imagesrc]="imagePath" style="width: 150px;max-height: 150px;clip-path: square(22px at center);"
class="col-2 mr-3 d-none d-sm-block" alt="..."></app-image>
<i (click)="inputFile.click()" style="color : white;left: 165px;
position: absolute; top: 28px; padding: 3px; background-color: rgb(0, 195, 255);
border-radius: 50%;font-size: 12px;"
class="fa fa-pencil fa-lg" aria-hidden="true"></i>
<div class="col-5 profile-details">
<div class="col-sm">
<span class="name">
<b style = "color: rgb(25,25,112); font-size : 15px ">{{myprofile?.FirstName}} {{myprofile?.LastName}}</b>
</span>
</div>
<div class="col-sm">
<span class="name">
<p>{{myprofile?.Role}} </p>
</span>
</div>
<div class="col-sm">
<span class="name">
<p>{{myprofile?.Phone}} {{myprofile?.UserName}}</p>
</span>
</div>
</div>
<div>
<div class="col-12 ">
<div class="office-address-heading">
<p class="Address">Office Address</p>
</div>
<div class="d-flex align-items-center">
<!-- <i style="color:grey;" class="fa fa-map-marker fa-2x mr-2" aria-hidden="true"></i> -->
<address class="mb-0 size">
{{myprofile?.OfficeAddress}}
</address>
</div>
</div>
<hr />
<div class="col-sm">
<div class="office-address-heading">
<p class="Address">Communication Details</p>
</div>
<div class="d-flex align-items-center office-address-details">
<i class="fa fa-phone fa-2x mr-2" aria-hidden="true"></i>
<div><a style="color: black;" href="tel:1-562-867-5309">{{myprofile?.Phone}}</a></div>
<span class="d-flex align-items-center mail office-address-details">
<i class="fa fa-envelope fa-2x mr-2" aria-hidden="true"></i>
<div>
<a style="color: black;" href="mailto:rafael.cepeda#lpl.com">{{myprofile?.Email}}</a>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
[1]: https://i.stack.imgur.com/qc2ci.png
[2]: https://i.stack.imgur.com/ZYK1a.png
for the image and the icon take an outer div to your image and the icon. and apply this css to them .
.outer-div-for-the-imgae-icon{position:relative; display:block; height:300px; width:300px; }
.outer-div-for-the-imgae-icon img{height:100%; width:100%; object-fit:cover;}
.outer-div-for-the-imgae-icon i{position:absolute; top:0; left:100%; font-size:40px; color:green; }
<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head>
<div class="outer-div-for-the-imgae-icon">
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"/>
<i class="fa fa-check-circle-o" aria-hidden="true"></i>
</div>
I am trying to add background color for nav-header, and since it is within col-md-10, it won't take full width when sidebar (col-md-2) is closed.
I tried to wrap it inside another div, but it doesn't work, I can't override col-md-10 rules. Is there any way to do this?
<div class="container-fluid">
<div class="row d-flex d-md-block flex-nowrap wrapper">
<div class="col-md-2 float-left col-1 pl-0 pr-0 collapse width hidden" id="sidebar">
<div class="list-group border-0 card text-center text-md-left">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">Item 2</span>
<i class="fa fa-book"></i> <span class="d-none d-md-inline">Item 3 </span><i class="fa fa-heart"></i> <span class="d-none d-md-inline">Item 4</span>
<i class="fa fa-list"></i> <span class="d-none d-md-inline">Item 5</span>
</div>
</div>
<main class="col-md-10 float-left">
<div class="nav-header">
<i class="fa fa-navicon fa-2x py-2 p-1"></i>
<img src="img/logo.png" height="45" alt="">
</div>
<div class="page-header">
<h2>Bootstrap 4 Sidebar Menu</h2>
</div>
<hr>
</main>
</div>
</div>
Perhaps a positioned pseudo-element to imitate a background.
.col-md-10 .nav-header{
position: relative;
}
.col-md-10 .nav-header::after {
content:"";
position: absolute;
top:0;
left:0;
height:100%;
background: red;
width:calc(100vw - 30px);
}
.col-md-10 .nav-header {
position: relative;
}
.col-md-10 .nav-header::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
background: red;
width: calc(100vw - 30px);
z-index: -1
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row d-flex d-md-block flex-nowrap wrapper">
<div class="col-md-2 float-left col-1 pl-0 pr-0 collapse width hidden" id="sidebar">
<div class="list-group border-0 card text-center text-md-left">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">Item 2</span>
<i class="fa fa-book"></i> <span class="d-none d-md-inline">Item 3 </span><a href="#" class="list-group-item d-inline-block collapsed"
data-parent="#sidebar"><i class="fa fa-heart"></i> <span class="d-none d-md-inline">Item 4</span></a>
<i class="fa fa-list"></i> <span class="d-none d-md-inline">Item 5</span>
</div>
</div>
<main class="col-md-10 float-left">
<div class="nav-header">
Nav header content
<i class="fa fa-navicon fa-2x py-2 p-1"></i>
<img src="img/logo.png" height="45" alt="">
</div>
<div class="page-header">
<h2>Bootstrap 4 Sidebar Menu</h2>
</div>
<hr>
</main>
</div>
That's tricky. Unless you can use the sass functions to build your columns, you'll have to override the styles for that particular .col-md-10. Maybe something like this?
#sidebar:not(.show) + [class*=col-] {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
Demo (Note: I'm using jsfiddle because stack snippets is blocking a part of bootstrap's js and failing to execute the part for opening or closing the menu)
Edit
For those curious, the SCSS way to do it would be to use a mixin
Your SCSS might look like this:
#sidebar + main {
#include make-col(12);
}
#sidebar.show + main {
#include make-col(10);
}
I am using bootstrap for my column structure and want to draw a horizontal line between the columns:
<div class="col-md-2 col-xs-12">
<div class="col-md-2 icon">
<i class="fa fa-bandcamp" aria-hidden="true"></i>
</div>
<div class="col-md-10 height hidden-xs">
<p>mycomp account number</p><span class="text">2000299999940</span>
</div>
<div class="visible-xs height">
<hr>
<p class="col-xs-5">mycomp account number:</p>
<p class="col-xs-7">2000299999940</p>
</div>
</div>
<div class="col-md-1">
<hr class="line" />
</div>
css:
.line {
width: 200px;
height: 3px;
background-color: #dadada;
margin-right:40px;
}
Because of the bootstrap columnstructure there are margins involved, but how can I make the line without all the space ie make it wider? Codepen here
well in case you want to ignore the default padding and margin in bootstrap make a class in css file as
.no-padding-margin
{
padding:0px;
margin: 0px;
}
and then apply this class to your bootstrap columns as
<div class="col-md-2 col-xs-12 no-padding-margin">
<div class="col-md-2 icon">
<i class="fa fa-bandcamp" aria-hidden="true"></i>
</div>
<div class="col-md-10 height hidden-xs">
<p>mycomp account number</p><span class="text">2000299999940</span>
</div>
<div class="visible-xs height">
<hr>
<p class="col-xs-5">mycomp account number:</p>
<p class="col-xs-7">2000299999940</p>
</div>
</div>
<div class="col-md-1 no-padding-margin">
<hr class="line" />
</div>
well as i understand you just want your line to be longer .
so why don't you remove the paddings from the col the line is in. and also add width:100% on the .line if you want.
code :
.line {
width: 100%;
height: 3px;
background-color: #dadada;
}
.col-md-1 {
padding-left:0;
padding-right:0;
}