Sorry guys.
I am new here and I just got stuck in this.
I have attached a weblink to the picture and code for css.
Everything the same.
Except when the label is a single line, the box shrinks.
I have given fixed width and height to it but still not working.
.product-box {
background: #fff;
padding: .5rem;
border-radius: 4px;
box-shadow: 0 2px 10px #dcdcdc;
cursor: pointer;
display: inline-block;
border-radius: 10px !important;
margin: 15px;
width: 100px;
height: 150px;
}
.product-image {
height: 100px;
width: 80px;
padding-left: 10px;
}
.product-label {
width: 80px;
padding-left: 11px;
height: 50px;
cursor: pointer;
}
.product-label-style {
cursor: pointer;
font-family: Rubik-Medium;
color: $app-greyish-brown;
font-weight: bold;
}
<div class="product-box" ng-click='ctrl.productClick()'>
<div class="product-image" ng-transclude>
</div>
<div class="product-label">
<label class="product-label-style">Commercial Vehicles</label>
</div>
</div>
<div class="product-box" ng-click='ctrl.productClick()'>
<div class="product-image" ng-transclude>
</div>
<div class="product-label">
<label class="product-label-style">Vehicles</label>
</div>
</div>
Wrap those ".product-box" to some div, let's name it .wrapper and then:
<div class="wrapper">
<div class="product-box" ng-click='ctrl.productClick()'>
...
</div>
<div class="product-box" ng-click='ctrl.productClick()'>
...
</div>
</div>
.wrapper {
display: flex;
align-items: flex-start;
}
.product-label {
width: 80px;
padding-left: 11px;
height: 50px;
cursor: pointer;
overflow: hidden;
}
Hey guys,
Thanks for the help.
I found the solution to it from a friend of mine.
Overflow hidden was it!
Related
I work with dynamicaly created boxes, and i have issues that text are not fiting inside box.
EX:
My code:
HTML:
<div class="box" id="box98" style="width: 110px; height: 43px;">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>
CSS:
.box {
background-color: #ccc;
margin: 10px;
border-radius: 10px;
text-align: center;
font-size: 10px;
}
.machine-icon {
vertical-align: middle;
float: left;
width: 40px;
height: 40px;
background-color: #808080;
border-radius: 20px;
margin: 2px;
}
.machine-icon > img {
margin-top: 25%;
width: 20px;
height: 20px;
}
.title-box {
color: #000;
font-size: 10px;
overflow: hidden;
font-weight: 600;
}
.desc-box {
color: #000;
}
So my idea was to not showing all text, just end, for example:
I try to use display: flex and justify-content: end; idea was, to add for title and sub title z-index: 1 and for image z-index: 2, and for box overflow: hidden;
But it's not working for me.
This could be done this way using white-space: nowrap; and direction: rtl;
.box {
background-color: #ccc;
margin: 10px;
border-radius: 10px;
text-align: center;
font-size: 10px;
}
.machine-icon {
vertical-align: middle;
float: left;
width: 40px;
height: 40px;
background-color: #808080;
border-radius: 20px;
margin: 2px;
}
.machine-icon>img {
margin-top: 25%;
width: 20px;
height: 20px;
}
.title-box {
color: #000;
font-size: 10px;
overflow: hidden;
font-weight: 600;
direction: rtl;
white-space: nowrap;
}
.desc-box {
color: #000;
}
<div class="box" id="box98" style="width: 110px; height: 43px;">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>
Remove Height from your in the .box element.
the height should be Auto:
<div class="box" id="box98" style="width: 110px; **height: auto;**">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>
How to make this div starts after the picture.
It starts from the beginning of the container.
I have added /float: left;/ in profile image.
enter image description here
HTML and CSS Code:
.profile{
border: 1px solid #ddd;
padding: 22px;
min-height: 150px;
}
.profile img{
max-width: 150px;
width: 100%;
float: left;
}
.profile #details{
margin-left: 50px;
}
<section class="profile">
<img src="https://www.sonypark360.net/wp-content/uploads/2017/08/profile-pictures.png" alt="profile">
<div id="details">
<h1>Name</h1>
<h2>Age</h2>
<h3>City, Country</h3>
</div>
</section>
This code should work for you
.my-profiles {
border: 1px solid #b2cbe3;
padding: 22px;
font-family: arial;
display: inline-block;
}
.my-profiles img{
max-width: 100px;
width: 100%;
border-radius: 50%;
float: left;
}
.my-profiles .details {
overflow-x: hidden;
padding-top: 10px;
padding-left: 8px;
display: inline-block;
}
.my-profiles .details * {
margin: 0px;
font-size: 22px;
font-weight: 200;
}
<div class="my-profiles">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png">
<div class="details">
<h2>Name</h2>
<h2>Age</h2>
<h2>City, Country</h2>
</div>
</div>
Okay so the desired outcome of this is to have the images on the left and the text sit to the right of the images, screenshot below:
.contact_bar {
width: 100%;
height: 50px;
background: #2c3e50;
color: #ffffff;
border-bottom: solid 2px #c9c9c9;
}
.contact_bar_container {
width: 1050px;
height: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.contact_bar_text {
width: 100%;
}
.contact_bar_call {
background-image: url(/images/call.png);
height: 32px;
width: 32px;
float: left;
margin-top: 8px;
float: left;
margin-right: 100px;
}
.contact_bar_email {
background-image: url(/images/email.png);
height: 32px;
width: 32px;
float: left;
margin-top: 8px;
}
<div class="contact_bar">
<div class="contact_bar_container">
<div class="contact_bar_call">
<div class="contact_bar_text">
Call here
</div>
</div>
<div class="contact_bar_email">
<div class="contact_bar_text">
Email here
</div>
</div>
</div>
</div>
I want the image to be left of the text and automatically understand when the first line of text (phone number) is finished it will then have the email image with a 5px margin and then the email image and address.
Here a solution using img html tag instead of background-image. I edited a bit your html code.
So you just have use a <img src="###" />tag instead of the <div class="contact_image"></div>
.contact_bar {
width: 100%;
height: 50px;
background: #2c3e50;
color: #ffffff;
border-bottom: solid 2px #c9c9c9;
}
.contact_bar_container {
width: 1050px;
height: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}
.contact_bar_content{
display: flex;
align-items: center;
padding: 0 15px;
}
.contact_image{
height: 15px;
width: 15px;
background-color: red;
margin-right: 5px;
}
<div class="contact_bar">
<div class="contact_bar_container">
<div class="contact_bar_content">
<div class="contact_image">
</div>
<div class="contact_bar_text">
Call here
</div>
</div>
<div class="contact_bar_content">
<div class="contact_image">
</div>
<div class="contact_bar_text">
Email here
</div>
</div>
</div>
</div>
I can't get this to work :( I'm just trying to float the image slightly outside the box (half in, half out) above the name but in the center. What am I doing wrong here?
body {
margin-top: 100px;
}
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align: center;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
max-width: 100%;
height: auto;
position: absolute;
text-align: center;
}
.box_info_name_inside {}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
Here is a fiddle: https://jsfiddle.net/ffxyc6d0/1/
try This One :
body{
margin-top:100px;
}
.box_info{
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align:center;
}
.box_info_name{
display: block;
font-size: 24px;
}
.box_info_logo{
width: 150px;
height: 150px;
position: relative;
bottom: 50px;
text-align:center;
}
.box_info_name_inside{
}
<body>
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
</body>
If the image is fixed size (not going to change dynamically) you can position it with a negative margin of half the images height, e.g. margin-top: -85px; (Take an extra -10px off as well as the half image height since there's 20px of padding on the parent container)
Example below:
body {
margin-top: 100px;
}
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align: center;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
display: inline-block;
margin-top: -85px;
max-width: 100%;
height: auto;
text-align: center;
}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
You can do it with flexbox as well :)
body{
margin-top:100px;
}
.box_info{
background: #ccc;
}
.box_info_name{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-size: 24px;
}
.box_info_logo{
position: relative;
margin-top: -75px;
}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150/fff" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
I like to give 'outside the box' answers to questions like this, without using javascript having to change all the margins gets to be a little annoying. So I've tackled it another way. Rather than moving everything around the page why not just make part of the background transparent.
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 95px, #DDD 95px);
border-radius: 4px;
text-align: center;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
text-align: center;
}
.box_info_name_inside {}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
<div class="box_info">
<div class="box_info_name">
<img width="150px" src="https://lh4.googleusercontent.com/-1rv6qW3mpvA/AAAAAAAAAAI/AAAAAAAAS3M/xq0SSZzrgVg/photo.jpg" class="box_info_logo">
<div class="box_info_name_inside">Andrew Bone</div>
</div>
</div>
I've used background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 95px, #DDD 95px); to say anything after 95px should be #DDD and before that needs to be transparent.
95px is height of the image (150px) divided by 2 (75px) plus the padding of the outer box (20px).
Which is great if the image size stays the same, if you plan on it changing then we might need to look at adding a little javascript.
linear-gradient is not supported in IE6 but is in modern IE as well as Edge, Chrome, and firefox.
I hope you find this helpful.
I'm not sure if I'm understanding your question correctly, but maybe this is waht you wan't.
I've simply removed the position: absolute from your .box_info_logo class.
Like this:
body{
margin-top:100px;
}
.box_info{
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align:center;
}
.box_info_name{
display: block;
font-size: 24px;
}
.box_info_logo{
max-width: 100%;
height: auto;
text-align:center;
}
.box_info_name_inside{
}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
To keep .box_info the same size as that in your jsfiddle example, you can add position: relative to this class whilst keeping .box_info_logo as position: absolute.
body {
margin-top: 150px;
}
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align: center;
position: relative;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
max-width: 100%;
height: auto;
position: absolute;
text-align: center;
left: 0;
right: 0;
margin: auto;
bottom: 50px;
}
.box_info_name_inside {}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
How do I target just the text inside the div in order to make the numbers center in the circles? https://jsfiddle.net/Amidi/nevg4gcq/3/
<div class="beads">1</div>
<div class="beads">2</div>
<div class="beads">3</div>
.beads{
background-color: coral;
border-radius: 100%;
height: 35px;
width: 35px;
text-align: center;
color: whitesmoke;
margin-top: 5px;
}
Just give line-height: 35px; to make text center. line-height equals to height of the div.
Working Fiddle
Use display:table for parent and display: table-cell for cell. You must have child element for this approach.
Try this:
.beads {
background-color: coral;
border-radius: 100%;
height: 35px;
width: 35px;
text-align: center;
color: whitesmoke;
margin-top: 5px;
display: table;
}
.beads span {
display: table-cell;
vertical-align: middle;
}
<div class="beads"><span>1</span>
</div>
<div class="beads"><span>2</span>
</div>
<div class="beads"><span>3</span>
</div>
<div class="beads"><span>4</span>
</div>
<div class="beads"><span>5</span>
</div>
<div class="beads"><span>6</span>
</div>
<div class="beads"><span>7</span>
</div>
Fiddle here
try this:
.beads{
background-color: coral;
border-radius: 100%;
height: 35px;
width: 35px;
text-align: center;
color: whitesmoke;
margin-top: 5px;
line-height: 35px
}
<div class="beads">1</div>
<div class="beads">2</div>
<div class="beads">3</div>