I created a tooltip with absolute position and I'm not specifying any min nor max width (so the with should be auto, stretching according to it's content), yet the text inside the tooltip - which could comfortably sit on one single line - for some reason I don't understand, breaks on a new line.
See my jsfiddle and my code below:
.tooltip-wrapper {
width: 250px;
position: relative;
font-size: 14px;
border: 1px solid;
padding: 10px;
text-align: center;
margin: 10px auto;
}
.tooltip-wrapper:hover .tooltip {
display: block;
}
.tooltip {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.5);
padding: 3px;
color: #fff;
font-size: 12px;
display: none;
}
<div class="tooltip-wrapper">
<span class="tooltip">Lorem ipsum dolor sit amet</span>
Text
</div>
Can anyone explain me why this happens?
And is there anyway I can let the text stay on one line without using white-space: nowrap, and then wrap if it reaches a max-width for example?
Thank you!
Don't center using left/translate. Do it differently:
.tooltip-wrapper {
width: 250px;
position: relative;
font-size: 14px;
border: 1px solid;
padding: 10px;
text-align: center;
margin: 10px auto;
}
.tooltip-wrapper:hover .tooltip {
display: block;
}
.tooltip {
position: absolute;
/* added */
inset: 0 0 auto; /* top, left and right equal to 0 */
margin: auto;
width: fit-content;
/* */
background: rgba(0, 0, 0, 0.5);
padding: 3px;
color: #fff;
font-size: 12px;
display: none;
}
<div class="tooltip-wrapper">
<span class="tooltip">Lorem ipsum dolor sit amet</span>
Text
</div>
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 doing a design using HTML & CSS to represent that I'm doing a calculation with the data that will be entered on the fields.
What I want to achieve:
What I have tried:
.bracket-dividers {
border-left: 4px solid #000;
border-right: 4px solid #000;
position: relative;
display: inline-flex;
}
.bracket-dividers:before {
content: '';
height: 4px;
width: 10px;
background: #000;
position: absolute;
top: 0;
}
.bracket-dividers:after {
content: '';
height: 4px;
width: 10px;
background: #000;
position: absolute;
bottom: 0;
}
.plus-symbol {
height: 35px;
width: 35px;
color: #000;
font-size: 35px;
line-height: 35px;
text-align: center;
align-self: center;
}
.plus-symbol::before {
content: '+';
}
<div class="bracket-dividers">
<div>
Field 1
</div>
<span class="plus-symbol"></span>
<div>
Field 2
</div>
</div>
Issues In the example above:
if I copy-paste the .bracket-dividers:before and .bracket-dividers:after but changing the position (right & top = 0, right & bottom = 0), causes that the horizontal lines of the left side disappear. Maybe we cannot have more than 1 before/after selector?
I try to apply margin or padding to the content inside but, don't work. Seems that the selectors don't allow this.
My goal is to apply the vertical and horizontal lines on both sides to a div and apply a space inside for the content (margin or padding).
No, you cannot define multiple pseudo-elements (::before / ::after) for a single element.
Instead, imagine using the ::before pseudo-element for the left bracket and the ::after pseudo-element for the right bracket.
The left bracket is an element with top, left and bottom borders defined, while the right bracket is an element with the top, right and bottom borders defined.
Example:
.bracket-dividers {
position: relative;
display: inline-flex;
margin-left: 10px;
margin-right: 10px;
line-height: 35px;
padding: 30px; /* Extra padding works correctly! */
}
.bracket-dividers:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -10px;
width: 10px;
box-sizing: border-box;
border: 4px solid #000;
border-right: 0;
}
.bracket-dividers:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -10px;
width: 10px;
box-sizing: border-box;
border: 4px solid #000;
border-left: 0;
}
.plus-symbol {
height: 35px;
width: 35px;
color: #000;
font-size: 35px;
line-height: 35px;
text-align: center;
align-self: center;
}
.plus-symbol::before {
content: '+';
}
<div class="bracket-dividers">
<div>
Field 1
</div>
<span class="plus-symbol"></span>
<div>
Field 2
</div>
</div>
A border-image can do it:
.bracket-dividers {
border: 4px solid transparent;
border-image:linear-gradient(to right,#000 10px,transparent 0 calc(100% - 10px),#000 0) 4;
padding:10px;
display: inline-flex;
}
.plus-symbol {
height: 35px;
width: 35px;
color: #000;
font-size: 35px;
line-height: 35px;
text-align: center;
align-self: center;
}
.plus-symbol::before {
content: '+';
}
<div class="bracket-dividers">
<div>
Field 1
</div>
<span class="plus-symbol"></span>
<div>
Field 2
</div>
</div>
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?
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