I have a view in my application where I would like to display thumbnails in a grid layout. When I create divs with no content they appear as desired:
When I add content to the divs, the layout goes all haywire:
I can't figure out why it is that this is happening.
I'm using a *ngFor directive for angular2:
<div class="board-thumbnail-container" *ngFor="let board of boards">
<img class="board-thumbnail" [src]="getBoardImage(board)">
<h3><span>{{board}}</span></h3>
</div>
and this is the css behind it:
.container {
width:400px;
}
.board-thumbnail-container {
position: relative;
width: 174px;
height: 174px;
margin-right: 5px;
margin-bottom: 5px;
display: inline-block;
border-style: solid;
border-color: lightblue;
border-radius: 7px;
padding: 5px;
text-align: center;
}
.board-thumbnail {
position: relative;
max-width: 160px;
max-height: 160px;
}
.board-thumbnail-container > h3 {
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
}
.board-thumbnail-container > h3 > span {
color: white;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 0px 5px 0px 5px;
}
Here is a plunker exhibiting the problem:
http://plnkr.co/edit/Trl8MJ7wuzYEgRGzy5yA?p=preview
It is working when I gave vertical-align: top to .board-thumbnail-container. Check http://plnkr.co/edit/HIiQrROahSMGggFWcnoX?p=preview
Thought of using angular flex layout?
Related
I have a div like this:
Now I need to remove a part of the circle from this shape which is shown as below:
Therefore the final shape would be looked like this:
So I decided to put the image as the background of my div.
<div class="col-4 customBack">
<div class="mainInfo">
<div class="circle2">
<img src="https://sitename.com/images/image.png">
</div>
<div class="paraDivRight2">
<h6 style="margin-top:5px;"><strong>Lorem Ipsum Dolor Simit</strong></h6>
<hr style="margin-top:-5px;">
<p style="margin-top:-10px;">012-3456789</p>
<p style="padding-top:5px;">ifno#sitename.com</p>
</div>
</div>
</div>
And here are the styles:
.mainInfo{
background-color: #fff;
border: .01rem round #e0e1ed;
border-radius: 20px;
color: #585CA1;
width:100%;
height:5em;
box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.75);
margin-top: 3em;
display: flex;
align-items: center;
justify-content: center;
}
.customBack{
background-image: url("/img/shadow3.png") !important;
}
.circle2 {
position: relative;
left:-60%;
width: 9em;
height: 9em;
background: #fff;
border-radius: 50%;
box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.65);
}
.circle2 img {
position: absolute;
max-width: 85%;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
}
.paraDivRight2 {
position: absolute;
display: inline-block;
padding: 10px;
color:black;
top:0px !important;
padding-top:50px !important;
right: 20px;
text-align: right;
padding-right:50px !important;
}
.paraDivRight2 p {
line-height: 1em;
font-size: 10pt;
margin: 0;
letter-spacing: 1px;
}
As you can see I have put the background in .customBack class But the result is now looks like this:
So the question is, how can I properly place this background image which is (shadow3.png) as background image of this mainInfo div so the side of circle shape that needs to be removed, does not appear...
I'm really stuck with this, so please help me out...
Use CSS filter: drop-shadow() MDN Docs on a wrapper element.
Fix your class naming to use a friendlier convention
Use CSS flex for a simpler alignment of your elements
Stop using inline HTML style attributes
/* Quick Reset */
* {
margin: 0;
box-sizing: border-box;
}
.custom {
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.custom-image {
width: 9em;
height: 9em;
background: #fff;
border-radius: 50%;
padding: 1em;
}
.custom-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.custom-content {
position: relative;
background: #fff;
padding: 1em;
text-align: right;
border-radius: 0 1em 1em 0;
padding-left: 2em;
left: -1em;
}
.custom-content h4 {
border-bottom: 1px solid #ddd;
}
<div class="custom">
<div class="custom-image">
<img src="https://i.stack.imgur.com/qCWYU.jpg?s=256&g=1">
</div>
<div class="custom-content">
<h4>Lorem Ipsum Dolor Simit</h4>
<p>012-3456789</p>
<p>ifno#sitename.com</p>
</div>
</div>
I'm not 100% sure about this but it has worked for me in the past,try making the position attribute of the div relative and make it absolute for the image,then size it properly.
I have a usual search as most websites do. The results are shown below on the div that is visually connected to the search input.
It looks like this:
I need to have one solid shadow for the div parent but can't figure out or find online the way to do this.
I thought that I could either make 2 separate shadows, but that will look inconsistent and just terrible. Or I could make a div below with the same height and width that will act as a shadow but that's a non-necessary complication + the .search-results div's height will change dynamically.
This is an example:
body {
background-color: gray;
}
.search-wrapper {
position: relative;
margin: 100px 100px 0px 100px;
width: 200px;
overflow: initial;
box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.3);
}
.search {
width: 200px;
height: 30px;
color: white;
border-radius: 4px;
} .search input {
padding: 0;
background-color: #022222;
border: none;
height: 100%;
width: 100%;
color: white;
}
.search-results {
position: absolute;
height: 150px;
width: 200px;
background-color: black;
}
<div class="search-wrapper">
<div class="search">
<input placeholder="air max . . .">
</div>
<div class="search-results">
</div>
</div>
I am sure there must be a clever and simple way to do this.
Please help,
Thank you
You don't need to use positions here and you can use FlexBox instead. It's the best way and a lot easier. Also, you can ignore all of them, they will place on top of each other because they are block-level tags/elements. (divs)
You don't need to put the input in another div parent, use it as I did.
Sorry, I couldn't understand your code, so I must write the whole code from the beginning.
EDIT
I removed display flex, cause it's not necessary.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial;
border-radius: 10px;
background-color: #fff
}
body {
height: 100vh;
background-color: gray;
padding: 30px
}
.search-wrapper {
/* EDITED HERE ADDED HEIGHT */
position: relative;
z-index: 999;
width: 200px;
height: 160px;
box-shadow: 0 0 2px 5px rgba(232, 232, 232, .2)
}
.search-input {
width: 100%;
position: absolute;
padding-block: 5px;
border: none;
outline: none;
padding: 15px
}
.search-result {
/* EDITED HERE */
position: absolute;
z-index: 999;
bottom: 0;
width: 100%;
padding: .5px
}
p {
padding: 10px 0 10px 10px;
}
p:hover {
background-color: #e8e8e8;
cursor: pointer
}
<div class='search-wrapper'>
<input class='search-input' placeholder='Search...'>
<div class='search-result'>
<p>Nike Airforce</p>
<p>Nike Airforce</p>
<p>Nike Airforce</p>
</div>
</div>
I'm trying to stick an image to div block in CSS. I couldn't move 'image' using margin... What can I do? Advice is appreciated. Thank you.
What I want to implement
.bottalk {
background-color: white;
height: 100px;
width: 200px;
margin-top: 20px;
margin-left: 280px;
border-radius: 1.5em;
}
.bottalk p {
padding-top: 5px;
padding-left: 15px;
}
.bot .bottalkwhite {
height: 40px;
margin-left: 250px;
margin-top: 0px;
}
.bottalk button {
background-color: yellow;
color: purple;
padding: 5px 5px;
border: none;
margin-left: 50px;
box-shadow: 3px 3px 2px #666666;
}
<div class="col-6 bot">
<div class="bottalk">
<p>Ready to get started?</p>
<button>Let's talk</button>
</div>
<img src="./img/bottalk.png" alt="bottalk" class="bottalkwhite" />
</div> </div>
Current view
Please ignore the background color: I snipped it from the second image!
I have moved the position of the image inside the div with class bottalk, then I absolutely positioned the image, then all you need to do is to set the top and left position based on the image, (Cropped the image online so please ignore the quality of the output), So now you can position this anywhere. Also I have added background-color:pink to the body to show the image, please ignore this too.
So to summarize. I set the parent div element with class bottalk as position:relative and the child image with class bottalkwhite to position:absolute so that it can be positioned inside the parent. Position absolute will take the position relative to the immediate parent with position:relative, I hope I made my summary clear.
body{
background-color:pink;
}
.bottalk {
position: relative;
background-color: white;
height: 100px;
width: 200px;
margin-top: 20px;
margin-left: 280px;
border-radius: 1.5em;
}
.bottalk p {
padding-top: 5px;
padding-left: 15px;
}
.bot .bottalkwhite {
height: 40px;
position: absolute;
top: 80%;
left: -30px;
}
.bottalk button {
background-color: yellow;
color: purple;
padding: 5px 5px;
border: none;
margin-left: 50px;
box-shadow: 3px 3px 2px #666666;
}
<div class="col-6 bot">
<div class="bottalk">
<p>Ready to get started?</p>
<button>Let's talk</button>
<img src="https://i.stack.imgur.com/7i9bY.gif" alt="bottalk" class="bottalkwhite" />
</div>
</div> </div>
You can use the position: relative; and adjust the values of the top and left properties， like the follow code：
.bottalk {
position: relative;
left: -5px;
top: 10px;
background-color: white;
height: 100px;
width: 200px;
margin-top: 20px;
margin-left: 280px;
border-radius: 1.5em;
}
.bottalk p {
padding-top: 5px;
padding-left: 15px;
}
.bot .bottalkwhite {
height: 40px;
margin-left: 250px;
margin-top: 0px;
}
.bottalk button {
background-color: yellow;
color: purple;
padding: 5px 5px;
border: none;
margin-left: 50px;
box-shadow: 3px 3px 2px #666666;
}
<div class="col-6 bot">
<div class="bottalk">
<p>Ready to get started?</p>
<button>Let's talk</button>
</div>
<img src="./img/bottalk.png" alt="bottalk" class="bottalkwhite" />
</div> </div>
In order to put a image into a exact position relative to its ancestor, you can set position property to absolute then using left-right-top-bottom properties, you can determine its exact position. like this:
.bottalkwhite{
position: absolute;
left: 250px;
top: 0px;
}
though in such a particular css rule definition using id selector instead of class selector sounds more appropriate.
Use position:relative on the wrapper element of the image and position the image via position: absolute, left: 0 and bottom: 0 in the bottom-left corner. Then adjust it's position via transform: translate, to get the desired effect.
Note: I moved the image into the div.botttalk container to position it relative to its parent.
Like this:
body {
background: #715886;
font-family: Open Sans, Arial, sans-serif;
}
.bottalk {
background-color: white;
width: 200px;
margin-top: 20px;
margin-left: 100px;
border-radius: 8px;
padding: 24px 16px;
position: relative;
text-align: center;
color: #715886;
}
.bottalk .bottalkwhite {
position: absolute;
left: 0;
bottom: 0;
height: 40px;
color: white;
transform: translate(-100%, 100%) translate(16px, -16px);
}
.bottalk h4 {
line-height: 1;
margin: 0 0 24px 0;
}
.bottalk button {
cursor: pointer;
color: #715886;
display: inline-block;
background-color: #fbcb33;
font-weight: bold;
padding: 0 32px;
border: none;
line-height: 40px;
font-size: 14px;
box-shadow: 0px 1px 2px #666666;
}
<div class="col-6 bot">
<div class="bottalk">
<h4>Ready to get started?</h4>
<button>Let's talk</button>
<img src="https://i.imgur.com/oeUdlld.png" alt="bottalk" class="bottalkwhite" />
</div>
</div>
https://jsfiddle.net/0Lfzbzc5/2/
in here I am trying to make the notification box on top of the body class div but couldn't do it the logic says positioned elements should be on top of the not positioned elements but that isn't happenning
tried even making body class div relative and giving it z-index but failed too
structure of notification box is an absolute element in relative element in absolute element (for CSS animation issues)
HTML
<div class="notiIcon glyphicon glyphicon-globe">
</div>
<div class='notiAbs '>
<div class='notiContainer'>
<div class="notiBox">
<div class="notiHeader">
<span class="notiHeaderSpan">notifications</span>
</div>
<div class="notiBody">
<div class="notiElement">Collaboratively enable high-quality imperatives before ubiquitous paradigms.
</div>
<div class="notiElement">Credibly productize customized services whereas.</div>
<div class="notiElement">Efficiently embrace real-time markets without.</div>
<div class="notiElement">Synergistically simplify collaborative web services.</div>
<div class="notiElement">Intrinsicly evisculate magnetic e-services through.</div>
<div class="notiElement">Holisticly build customer directed technologies.</div>
<div class="notiElement">Phosfluorescently synthesize team driven strategic.</div>
</div>
<div class="notiFooter"><span class="notiHeaderSpan">See All</span></div>
</div>
</div>
</div>
<div class="body">aasdasdasdasdasdasdas</div>
CSS
.notiAbs{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
/* overflow-y: hidden; */
height: 500px;
width: 500px;
/* overflow-x: hidden; */
overflow-y: hidden;
margin: 0 auto;
padding-left: 50px;
}
.notiContainer{
position: relative;
}
.notiIcon{
z-index: 5;
position: relative;
width:100%;
text-align: center;
font-size: 25;
cursor: pointer;
padding-top: 10px;
}
.notiIconNumber{
position: relative;
font-size: 15px;
color: white;
background-color: red;
top: -10;
left: -9;
padding: 2px;
}
.notiBox{
z-index: 4;
position: absolute;
height: 400px;
width: 400px;
display: block;
padding-top: 10px;
box-shadow: rgba(0, 0, 0, 0.298039) 0px 4px 7px;
}
.notiElement{
overflow-wrap:break-word;
font-size: 17px;
padding: 10 0px;
border-bottom-style: solid;
border-bottom-width: thin;
border-bottom-color: lightgray;
}
.notiHeader,.notiFooter{
text-align: center;
font-size: 20px;
font-weight: bold;
height: 15%;
display: table;
width: 100%;
}
.notiHeaderSpan,.notiFooterSpan{
display: table-cell;
vertical-align: middle;
}
.notiFooter{
box-shadow: 0px -4px 7px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.notiHeader{
box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.1);
}
.notiBody{
padding: 20px;
overflow: auto;
height:70%;
}
.body{
}
It is on top but the background is transparent so it makes the illusion that it's not. Just set a background color as follows :
.notiBox{
z-index: 4;
position: absolute;
height: 400px;
width: 400px;
padding-top: 10px;
border-style:solid;
background:#666;
}
Check the Fiddle.
Your notification box which I believe is the element with class "notiBox" is on top. The reason why it appears not to be is because it has an inherited background-color of transparent.
If you set the background-color property to say "yellow" (for examples sake) you will see that it is on top of the element with class "body".
Does that make sense? I can explain further if you need me to.
I've updated my answer as looking at your HTML again i've realised that the element with class "notiBox" is probably the only element (and it's contents) you want to appear on top
Is there a possiblility to bring a html element to front without increasing it's z-index? All elements having the same z-index overlap depending on there order in the DOM. I could remove the element and append it to it's parent again - but is there any nicer solution?
Edit:
Keeping an array of all rects, set all rect's z-index to x and the just hovered to x+1 does the trick, but needs an array.
It would probably work if you wrote your HTML code from bottom positioning to top, since the browser reads the code from the top of the file to the bottom. Still, using z-index is a lot safer and more efficient.
try following code:
strong {
font-family: sans-serif;
}
div {
padding: 10px;
border: 1px dashed;
text-align: center;
}
.DivStatic {
position: static;
height: 80px;
background-color: #ffc;
border-color: #996;
}
.DivAbsolute {
position: absolute;
width: 150px;
height: 350px;
background-color: #fdd;
border-color: #900;
opacity: 0.7;
}
.DivRelative {
position: relative;
height: 80px;
background-color: #cfc;
border-color: #696;
opacity: 0.7;
}
#Main1 {
top: 10px;
left: 10px;
}
#Main2 {
top: 30px;
margin: 0px 50px 0px 50px;
}
#Main3 {
top: 15px;
left: 20px;
margin: 0px 50px 0px 50px;
}
#Main4 {
top: 10px;
right: 10px;
}
#Main5 {
background-color: #ffc;
margin: 0px 50px 0px 50px;
}
<div id="Main1" class="DivAbsolute">
<strong>First DIV #1</strong><br />position: absolute;</div>
<div id="Main2" class="DivRelative">
<strong>Second DIV #2</strong><br />position: relative;</div>
<div id="Main3" class="DivRelative">
<strong>Third DIV #3</strong><br />position: relative;</div>
<div id="Main4" class="DivAbsolute">
<strong>Fourth DIV #4</strong><br />position: absolute;</div>
<div id="Main5" class="DivStatic">
<strong>Fifth DIV #5</strong><br />position: static;</div>