.color-palette {
border-top: 2px solid lightgrey;
max-height: 32vh;
z-index: 1;
background: rgba(0, 0, 0, 0.75);
width: 90vw;
bottom: 2.75rem;
border-radius: 10px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-end;
padding: 0.75rem 0.5rem;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 0px 5px 10px black;
animation-name: zoomIn;
animation-duration: 0.5s;
}
button {
font-family: inherit;
font-size: 0.8rem;
line-height: 0.9;
width: 3.75rem;
height: 3.75rem;
margin: 0.45rem 0.3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.5s;
border: none;
outline: none;
text-decoration: none;
text-align: center;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 1px 0px grey, 0px 3px 0px 0px lightgrey,
0px 8px 5px #999;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
font-family: "Comic Neue", cursive;
width: 8.5rem;
font-size: 1rem;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 500;
bottom: 110%;
left: 35%;
margin-left: -60px;
}
span {
display: none;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
display: block;
}
<div class="color-palette">
<button class="tooltip">
<span class="tooltiptext">Cannot duplicate</span>
</button>
</div>
I got the tooltip code from https://www.w3schools.com/css/css_tooltip.asp.
I tried the answer here: CSS tooltip getting cut off
And have applied overflow: visible on my color-palette instead of overflow-y: auto; overflow-x: hidden; but this happened:
Yes, the tooltip worked, but my buttons were already outside the div (.color-palette).
I want this to work without removing the bottom arrow of the tooltip, without moving the tooltip downwards, without increasing the div to make the tooltip fit inside. All I want is to make the tooltip overlap. What to do?
Try changing value from 110 to 95 in the class:
.tooltip .tooltiptext {
bottom: 95%;
}
Update:
change top value in class
.tooltip .tooltiptext::after {
top: 100%;
}
Try this fiddle: https://jsfiddle.net/ecxobpg3/38/
Related
This CSS is displayed on the second page of a scrolling page. The .container_block is for holding all the cards in its box. The .cards are for displaying the cards and each individual card is represented by card1,2,3, and 4.
.container_block {
width: 80%;
height: 40%;
display: block;
background-color: red;
margin: auto;
}
.cards {
display: flex;
align-items: center;
justify-content: center;
}
.cards h2 {
font-size: 25px;
color: white;
margin: 15px;
}
.cards p {
font-size: 20px;
color: white;
margin: 15px;
}
.card1 {
box-shadow: 1px 1px 8px 6px rgba(0,0,0,0.2);
transition: 0.3s;
height: 30vh;
width: 30vh;
border-radius: 20px;
margin-top: 4vh;
margin-right: 5vh;
}
.card2 {
box-shadow: 1px 1px 8px 6px rgba(0,0,0,0.2);
transition: 0.3s;
height: 30vh;
width: 30vh;
border-radius: 20px;
margin-top: 4vh;
margin-right: 5vh;
}
.card3 {
box-shadow: 1px 1px 8px 6px rgba(0,0,0,0.2);
transition: 0.3s;
height: 30vh;
width: 30vh;
border-radius: 20px;
margin-top: 4vh;
margin-right: 5vh;
}
.card4 {
box-shadow: 1px 1px 8px 6px rgba(0,0,0,0.2);
transition: 0.3s;
height: 30vh;
width: 30vh;
border-radius: 20px;
margin-top: 4vh;
margin-right: 5vh;
}
Any tips on simplifying code will also be greatly appreciated!
in .container_block, try replacing "margin: 0;" with "margin: 0 auto;"
Just Wrap the container_block division by another division and name in wrapper.
Apply the below CSS.
Also No need to make multiple Card classes if you are applying same CSS to them
just use one class name in all divisions.
.wrapper{
width:100%;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container_block {
width: 80%;
height: 40%;
display: block;
background-color: red;
margin: auto;
}
.cards {
display: flex;
align-items: center;
justify-content: center;
}
.cards h2 {
font-size: 25px;
color: white;
margin: 15px;
}
.cards p {
font-size: 20px;
color: white;
margin: 15px;
}
.card1 {
box-shadow: 1px 1px 8px 6px rgba(0,0,0,0.2);
transition: 0.3s;
height: 30vh;
width: 30vh;
border-radius: 20px;
margin-top: 4vh;
margin-right: 5vh;
}
This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Closed 1 year ago.
I have classes in css
.box {
background-color: white;
border: solid 5px white;
border-radius: 5px;
width: 90px;
height: 90px;
margin-top: 30px;
box-shadow: 0 8px 6px -6px #313131;
object-fit: fill;
position: relative;
cursor: pointer;
}
.active {
background-color: white;
border: solid 5px white;
border-radius: 5px;
width: 100px!important;
height: 100px!important;
margin-top: 20px;
box-shadow: 0 14px 6px -6px #313131;
position: relative;
animation: fadeactive 6s infinite;
}
.box:hover {
background-color: white;
border: solid 5px white;
border-radius: 5px;
width: 100px;
height: 100px;
margin-top: 20px;
box-shadow: 0 14px 6px -6px #313131;
object-fit: fill;
position: relative;
}
.box:hover.active .title {
display: none!important;
}
.title {
display: none;
position: relative;
font-size: 70%;
background: black;
color: white;
border-radius: 5px;
padding: 5px;
top: -40px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
z-index: 2;
width: fit-content;
}
I use .box on some items, and sometimes I use .active as well (using both classes). If I do not use !important, the box size stays 90px instead of 100px. Also in .box:hover.active .title I need to use !important to make it work. What did I do wrong? How can I get rid of !important here?
Here in this example,
Without the !important, the color will be red since ID has most priority.
But since I gave !important to the span, it is taking that style.
#item1 {
color: red;
}
.item {
color: yellow;
}
span {
color: blue !important;
}
<span class='item' id='item1'>hi</span>
I have code that looks like:
.bubble {
background-color: white;
border-radius: 12px;
border: 1.3px solid black;
width: 90%;
max-width: 800px;
padding: 8px 12px;
position: relative;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
text-align: justify;
word-break: break-word;
hyphens: auto;
}
.tail {
position: absolute;
overflow: hidden;
top: 12px;
left: -10px;
height: 12px;
width: 10px;
}
.tail::after {
background: #ffffff;
border: 1.3px solid black;
content: '';
height: 100%;
position: absolute;
right: -6px;
top: -9px;
transform-origin: 0 100%;
transform: rotate(47deg);
width: 100%;
}
<div class='bubble'>
<div class='tail'></div>
Hi!
</div>
<style>
However, on MacOS Chrome there is a thin line in place of the border where there shouldn't be any line at all. Why is that happening and how can I remove it? Thanks!!
I am using material web components in my project, as well as an algolia autocomplete.js. I have made a search input field where I would like to show the results in an autocomplete dropdown menu. This is the html:
<form action="/search" method="get">
<div class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon">
<i class="material-icons mdc-text-field__icon" tabindex="0">search</i>
<input name="q"
type="text"
class="mdc-text-field__input search-input-js aa-input-search"
placeholder="Search for players and videos ..."
aria-label="Full-Width Text Field">
</div>
</form>
And this is the css:
.algolia-autocomplete {
display: flex!important;
flex: auto!important;
height: 100%;
}
.aa-dropdown-menu {
position: relative;
top: -6px;
border-radius: 3px;
margin: 6px 0 0;
padding: 0;
text-align: left;
height: auto;
position: relative;
background: $white;
border: 1px solid #ccc;
width: 100%;
left: 0 !important;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.aa-dropdown-menu:before {
position: absolute;
content: '';
width: 14px;
height: 14px;
background: #fff;
z-index: 0;
top: -7px;
border-top: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
transform: rotate(-45deg);
border-radius: 2px;
z-index: 999;
display: block;
left: 24px;
}
.aa-dropdown-menu .aa-suggestions {
position: relative;
z-index: 1000;
}
.aa-dropdown-menu [class^="aa-dataset-"] {
position: relative;
border: 0;
border-radius: 3px;
overflow: auto;
padding: 8px 8px 8px;
color: #3c3e42;
font-weight: 500;
}
.aa-dropdown-menu * {
box-sizing: border-box;
}
.aa-suggestion {
padding: 0 4px 0;
display: block;
width: 100%;
height: 38px;
clear: both;
}
.aa-suggestion span {
white-space: nowrap !important;
text-overflow: ellipsis;
overflow: hidden;
display: block;
float: left;
line-height: 1em;
width: calc(100% - 30px);
}
.aa-suggestion.aa-cursor {
background-color: transparent;
}
.aa-suggestion em {
color: #00bcd4;
font-weight: 700;
}
.aa-suggestion img {
float: left;
height: 44px;
width: 44px;
margin-right: 6px;
}
.aa-suggestion a {
color: #3c3e42;
}
.aa-suggestions-category {
font-weight: 700;
color: #3c3e42;
border-bottom: 1px solid rgba(102, 105, 105, 0.17);
}
.powered-by-algolia {
padding-left: 15px;
border-top: 1px solid rgba(102, 105, 105, 0.17);
display: flex;
align-items: center;
height: 30px;
}
.aa-input-container {
display: inline-block;
position: relative; }
.aa-input-search {
width: 100%;
height: 30px;
padding: 12px 28px 12px 12px;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
.aa-input-search::-webkit-search-decoration, .aa-input-search::-webkit-search-cancel-button, .aa-input-search::-webkit-search-results-button, .aa-input-search::-webkit-search-results-decoration {
display: none;
}
.media {
margin: 10px 0;
}
.media-body {
p {
margin: 0;
}
}
The problem I have is that the dropdown menu is not visible with the mdc-text-field--box if I am not using the box field and I am instead using the normal field then the dropdown menu is visible. How can I fix this so that the dropdown menu is also visible with the mdc-text-field--box?
You should update the CSS in order to override the overflow on .mdc-text-field--box and update the pseudo elements.
.mdc-text-field--box {
overflow: visible;
}
.mdc-text-field--box:after,
.mdc-text-field--box:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can find an example on the jsFiddle also.
I'm trying to replicate the navigation buttons here, that's a wix website so it's so hard to inspect elements.
What I have tried is here
https://jsfiddle.net/1vngy4uo/1/
I'm trying many variations, never getting the css 100% correct.
.navButton {
width:15%;
display:inline-block;
position:relative;
background-color:#03314b;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton:hover {
background-color:#98b7c8;
}
.navButton span {
width:100%;
display:inline-block;
position:absolute;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton .bg {
height:50%;
top:0;
background-color:#3a6076 ;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton:hover .bg{
background-color:#afcad9;
}
.navButton .text {
position:relative;
text-align:center;
color:#fff;
vertical-align: middle;
align-items: center;
}
.navButton .text:hover {
color:#000000;
}
and html
<a href="contact.html" class="navButton">
<span class="bg"></span>
<span class="text">Contact</span>
A very similar one, using linear-gradient and less HTML markup
jsFiddle
.navButton {
color: white;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: center;
padding: 0 30px;
line-height: 30px;
display: inline-block;
position: relative;
border-radius: 20px;
background-image: linear-gradient(#335b71 45%, #03324c 55%);
box-shadow: 0 2px 2px #888888;
transition: color 0.3s, background-image 0.5s, ease-in-out;
}
.navButton:hover {
background-image: linear-gradient(#b1ccda 49%, #96b4c5 51%);
color: #03324c;
}
Contact
I just used a div element to implement the same button that you referred. Is this what you want?
https://jsfiddle.net/9L60y8c6/
<div class="test">
</div>
.test {
cursor: pointer;
background: rgba(4, 53, 81, 1) url(//static.parastorage.com/services/skins/2.1212.0/images/wysiwyg/core/themes/base/shiny1button_bg.png) center center repeat-x;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
transition: background-color 0.4s ease 0s;
position: absolute;
top: 0;
bottom: 0;
left: 5px;
right: 5px;
height: 30px;
width: 115px;
}
Would this be a start? You might want to adjust the colors a little.
Note: One can use linear-gradient, though it won't work on IE9, so I use a pseudo instead
.navButton {
width: 15%;
display: inline-block;
position: relative;
background-color: #03314b;
border-radius: 8px;
box-shadow: 2px 2px 2px #888888;
text-align: center;
text-decoration: none;
color: #fff;
padding: 5px;
transition: all 0.3s;
overflow: hidden;
}
.navButton:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
background-color: #335b71;
transition: all 0.3s;
}
.navButton span {
position: relative;
}
.navButton:hover {
transition: all 0.3s;
background-color: #96b4c5;
color: black;
}
.navButton:hover:before {
transition: all 0.3s;
background-color: #b1ccda;
}
<a href="contact.html" class="navButton">
<span>Contact</span>
</a>