remove tooltip transparency - javascript

I have one icon. When you hover over the icon with the cursor, the tooltip opens. But when the tooltip is opened, it appears in the input on the back.
Here is the problem;
How can I solve this problem?
html
<div className="installmentinfo__container">
<div className="installmentinfo">
<div className="column">
<div className="installmentnumber" >{(i + 1).toString()}</div>
<div className="installmentdate">{billDate}</div>
<div className="installmentamount">{e.amount} {e.currency}</div>
</div>
</div>
</div>
css
.installmentinfo__container {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
position: absolute;
background-color: white;
top: 210px;
margin: auto;
transform: translateX(-280px);
padding: 0.3em;
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
.column {
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
padding-bottom: 5px ;
}
}
}

The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.
So if you don't have any other z-indexes event 9 will do the job :
.installmentinfo__container {
z-index: 9; ..

Related

i want to place the text near the image inside the round box

I want the icon to be near the text inside the round box but its appearing down, here's my code.
HTML:
<div className="RoundBox">
<div className="DashImages"><img src={PDF} alt="PDF"></img>
<div className="IconText">PDF File</div>
</div>
CSS:
img {
width: 3vw;
height: 3vw;
margin-left: 1vw;
}
.IconText {
}
.RoundBox {
border-radius: 0.5vw;
border: 1.5px solid grey;
box-shadow: #e3eaf6;
width: 20vw;
height: 3vw;
float: left;
}
This should do the trick.
Div elements are block items so they will always try to fill the whole horizontal space if the display or width properties are not changed or the parent item overrides that behavior (eg. using FlexBox)
HTML
<div className="RoundBox">
<div className="DashImages"><img src={PDF} alt="PDF" /></div>
<div className="IconText">PDF File</div>
</div>
CSS
img {
width: 3vw;
height: 3vw;
margin-left: 1vw;
}
.IconText {
padding-left: 10px
}
.RoundBox {
border-radius: 0.5vw;
border: 1.5px solid grey;
box-shadow: #e3eaf6;
width: 20vw;
height: 3vw;
float: left;
display: flex;
align-items: center;
}
Your html is invalid with the image tag and you're missing a div. You would want to fix that first.
<div className="DashImages"><img src={PDF} alt="PDF" /></div>
You then have a couple options. Here are a two examples:
You can simply add float: left to the img css. I might recommend using a class rather than a selector which targets all img tags. Example
img {
width: 3vw;
height: 3vw;
margin-left: 1vw;
float: left;
}
You can also explore using flexbox adding display: flex; to your .RoundBox class. Note there are different alignment attributes that you can use to position elements using flex.
.RoundBox {
border-radius: 0.5vw;
border: 1.5px solid grey;
box-shadow: #e3eaf6;
width: 20vw;
height: 3vw;
float: left;
display: flex;
}

Child div background-color does not fit parent div when zooming

Depending on the zoom-level of the browser, the background color of the child div has a strange behavior. Some white spaces appears.
See these examples:
Zoom 125%:
Zoom 150%:
Zoom 175%:
Zoom 200%:
Here is my code:
(JSFiddle: https://jsfiddle.net/3L4wfvyg/)
$(document).ready(function () {
document.getElementById("HeaderContainer").addEventListener("click", function (e) {
if (e.target.id != "FormContainer") {
document.getElementById("Container3").classList.toggle("clicked");
document.getElementById("HeaderContainer").classList.toggle("HeaderContainer3");
};
});
});
.Container1 {
background-color: white;
line-height: 30px;
font-size: 20px;
color: black;
border: none;
position: absolute;
}
.Container1 h3 {
font-size: 30px;
color: #142D41;
margin-top: 20px;
margin-bottom: 10px;
position: relative;
}
.Container1 .Container3 {
padding: 30px;
display: block;
border: 1px solid black;
border-radius: 5px;
margin-top: 15px;
font-size: 15px;
min-width: 100%;
background-color: white;
text-align: left;
height: 100px;
overflow: hidden;
}
.Container1 .Container3:hover {
text-decoration: none !important;
cursor: pointer;
}
.HeaderContainer3:hover {
color: white !important;
background-color: blue;
}
.HeaderContainer2 {
padding: 30px;
}
.HeaderContainer1 {
z-index: 10;
position: relative;
margin: -31px;
padding: 32px 30px 25px 30px;
width: auto;
}
.FormContainer {
font-size: 20px !important;
}
#Container3 {
height: 0px;
transition: height 300ms ease-in-out;
box-shadow: 0.1px 0.6px 2px 0px #8c8c8c;
}
#Container3.clicked {
height: 314px;
}
.Header {
position: relative;
padding-top: 6px;
overflow: hidden;
width: 100%;
height: 100%;
cursor: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="Container1" class="Container1">
<h3>Title
</h3>
<div class="Container2">
<div id="Container3" class="Container3">
<div id="HeaderContainer" class="HeaderContainer1 HeaderContainer2 HeaderContainer3">
<div class="Header">Header</div>
</div>
<div id="FormContainer" class="FormContainer">
<hr />
<div style="padding: 5px 0px 8px 0px;">
Form
</div>
<br />
<div id="FormElementsContainer" class="FormElementsContainer">
<div>
<b>First</b>
<br />
</div>
<div>
<b>Last</b>
<br />
</div>
<div>
<b>Third</b>
<br />
</div>
<div>
<br />
<button>
Submit
</button>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
Why is this happening and how can I solve the problem?
When i remove the border from Container3 it seems like the problem does not occur anymore, but I do not know if this is because it gets hard to see if the problem is still there due to the white color.
There can be a sort of edge effect on zoom brought about by one CSS pixel not being just one screen pixel but 2 or more on high def/modern screens. If the system is trying to map several screen pixels to one CSS one and is asked to do a fraction it can sometimes 'leave behind' a screen pixel. Hence the white on occasion, and the variation at different zoom levels.
In the case in the question maybe doing a simple hack, making the parent element have background blue on hover, would be sufficient?
.Container1 .Container3:hover {
text-decoration: none !important;
cursor: pointer;
background-color: blue;
}
Inspired by A Haworth's answer: coloring the parent element instead is indeed less prone to rendering artifacts when dealing with different zoomlevels/screen densities. You could remove the background from the child element, and add a new :hover selector for the parent that only activates when it is not in the .clicked state.
.HeaderContainer3:hover {
color: white !important;
/** Background removed here **/
}
/** New block with a :not selector **/
.Container1 .Container3:hover:not(.clicked) {
background-color: blue;
}
Full working code example:
$(document).ready(function () {
document.getElementById("HeaderContainer").addEventListener("click", function (e) {
if (e.target.id != "FormContainer") {
document.getElementById("Container3").classList.toggle("clicked");
document.getElementById("HeaderContainer").classList.toggle("HeaderContainer3");
};
});
});
.Container1 {
background-color: white;
line-height: 30px;
font-size: 20px;
color: black;
border: none;
position: absolute;
}
.Container1 h3 {
font-size: 30px;
color: #142D41;
margin-top: 20px;
margin-bottom: 10px;
position: relative;
}
.Container1 .Container3 {
padding: 30px;
display: block;
border: 1px solid black;
border-radius: 5px;
margin-top: 15px;
font-size: 15px;
min-width: 100%;
background-color: white;
text-align: left;
height: 100px;
overflow: hidden;
}
.Container1 .Container3:hover {
text-decoration: none !important;
cursor: pointer;
}
.Container1 .Container3:hover:not(.clicked) {
background-color: blue;
}
.HeaderContainer3:hover {
color: white !important;
}
.HeaderContainer2 {
padding: 30px;
}
.HeaderContainer1 {
z-index: 10;
position: relative;
margin: -31px;
padding: 32px 30px 25px 30px;
width: auto;
}
.FormContainer {
font-size: 20px !important;
}
#Container3 {
height: 0px;
transition: height 300ms ease-in-out;
box-shadow: 0.1px 0.6px 2px 0px #8c8c8c;
}
#Container3.clicked {
height: 314px;
}
.Header {
position: relative;
padding-top: 6px;
overflow: hidden;
width: 100%;
height: 100%;
cursor: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="Container1" class="Container1">
<h3>Title
</h3>
<div class="Container2">
<div id="Container3" class="Container3">
<div id="HeaderContainer" class="HeaderContainer1 HeaderContainer2 HeaderContainer3">
<div class="Header">Header</div>
</div>
<div id="FormContainer" class="FormContainer">
<hr />
<div style="padding: 5px 0px 8px 0px;">
Form
</div>
<br />
<div id="FormElementsContainer" class="FormElementsContainer">
<div>
<b>First</b>
<br />
</div>
<div>
<b>Last</b>
<br />
</div>
<div>
<b>Third</b>
<br />
</div>
<div>
<br />
<button>
Submit
</button>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
Here's a fix. It's similar to what someone else suggested, but takes into account the .clicked state.
Fix boils down to setting the background-color property on the container with border and border-radius properties instead of on the nested container. It achieves this by replacing .HeaderContainer3:hover selector with .Container3:not(.clicked):hover.
.Container3:not(.clicked):hover {
color: white !important;
background-color: blue;
}
Working fiddle: https://jsfiddle.net/2eqLb6go/
As for why this happens, I don't have a technical answer, but it does appear to have something to do with fractional pixel rendering with nested containers when parent has a border. Here's a demonstration of the same problem in a simplified form:
https://jsfiddle.net/0vje6k5w/
It seems like a rendering issue due to a rounding error with border. It appears that the clipping area and the border widths are calculated differently resulting in an inconsistent gap of transparent pixels which can be rounded to either 0 or 1. The background of the container with the border property is respected (hence the above-described fix), but anything nested inside of it will be clipped, and there doesn't appear to be any way to stop that from happening. E.g. the problem persists even if the child elements are absolutely positioned inside of it.
Honestly, I'd call this a buggy implementation of the box-model with regard to page zoom. It's odd that all major browsers in 2021 suffer from the same behavior.
I changed border size to 0.0125em. (It's weird but worked!).
.Container1 .Container3 {
border: 0.0125em solid black;
}

How to ignore a scrollbar width in CSS?

Explanation
I want to line up three boxes in one line horizontally but the last one falls down.
When I remove the scrollbar, it lines up fine.
So, the problem is caused by the scrollbar width.
How can I ignore the scrollbar width in css?
Do I need to write JavaScript code to calculate the scrollbar width and adjust the width of the wrapper dom element?
DEMO & CODE
I posted html and css code in codePen.io.
http://codepen.io/anon/pen/kXAPap
HTML
<div id="main">
<ul id="window-list">
<li class="window">
<div class="window-thumbnail">
</div>
</li><!--
--><li class="window">
<div class="window-thumbnail">
</div>
</li><!--
--><li class="window">
<div class="window-thumbnail">
</div>
</li><!--
--><li class="window">
<div class="window-thumbnail">
</div>
</li><!--
--><li class="window">
<div class="window-thumbnail">
</div>
</li>
</ul>
</div>
CSS
body {
border-top: solid 1px #a3a1a3;
margin: 0;
padding: 20px;
background-color: #e7e7e7;
}
ul, li, p {
margin: 0;
padding: 0;
}
/*
1px(border-left) + 30px(padding-left) + 158px(width) + 18px(margin-right) + 158px(width) + 18px(margin-right) + 158px(width) + 30px(padding-right) + 1px(border-right) = 572px
*/
#main {
width: 572px;
}
#window-list {
background-color: #ffffff;
border: solid 1px #b8b8b8;
width: 510px;
height: 350px;
margin: 0 0 8px 0;
overflow: scroll; /*This line causes the problem*/
padding: 10px 30px;
list-style-type: none;
}
.window {
display: inline-block;
margin: 0 18px 18px 0;
}
.window:nth-child(3n) {
margin-right: 0;
}
.window-thumbnail {
margin: 0 0 8px 0;
height: 158px;
width: 158px;
border-radius: 8px;
cursor: pointer;
background-color: #e0e0e0;
}
One way to do it in pure CSS is to make the scroll bar invisible completely. This will still allow scrolling.
::-webkit-scrollbar {
display: none;
}
You can also use jQuery to achieve exactly what you wanted:
$(document).ready(function(){
var body = $('body');
var normalwidth = 0;
var scrollwidth = 0;
if(body.prop('scrollHeight')>body.height()){
normalwidth = window.innerWidth;
scrollwidth = normalwidth - body.width();
$('#main').css({marginRight:'-'+scrollwidth+'px'});
}
});
And you can hide the horizontal scroll using:
body {
overflow-x:hidden;
}
Here's a jsfiddle made by Lwym.
I suggest you check out his original answer too.
Here, http://codepen.io/bhshawon/pen/OXBjOg
Using negative value for margin-right of every 3rd child
.window:nth-child(3n) {
margin-right: -16px;
}
Unless it is a business requirement to give these boxes a fixed, I would strongly recommend you to give them a variable width using percentage units which will make your document more responsive to different viewport widths and screen sizes.
.container {
display: block;
width: 100%;
padding: 0;
margin: 0;
}
.container .box {
display: inline-block;
background-color: #ddd;
width: 28%;
height: 80px;
margin: 20px 0 20px 4%;
border: 1px solid #ddd;
border-radius: 3px;
overflow: hidden;
}
<div class="container">
<div class="box"></div><!--
--><div class="box"></div><!--
--><div class="box"></div><!--
--><div class="box"></div><!--
--><div class="box"></div>
</div>
Things to note
1- This solution is 99% CSS2-compatible...some features will degrade gracefully such as the border-radius which is currently supported by all major browsers out there
2- you said it doesn't need to be responsive because it's a chrome extension. Well, it does because desktops come in a lot of screen sizes. So, it is responsive
3- I've given the boxes a fixed height to make them look uniform but if you want a variable height you can wrap the boxes in containers with a group of 3 boxes each
If these have to be fixed, I would highly recommend using flex for this. Here is your CSS using Flex:
body {
border-top: solid 1px #a3a1a3;
margin: 0;
padding: 20px;
background-color: #e7e7e7;
}
ul, li, p {
margin: 0;
padding: 0;
}
/*
1px(border-left) + 30px(padding-left) + 158px(width) + 18px(margin-right) + 158px(width) + 18px(margin-right) + 158px(width) + 30px(padding-right) + 1px(border-right) = 572px
*/
#main {
width: 572px;
}
#window-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: #ffffff;
border: solid 1px #b8b8b8;
width: 510px;
height: 350px;
margin: 0 0 8px 0;
overflow: scroll; /*This line causes the problem*/
padding: 10px 30px;
list-style-type: none;
}
.window {
margin: 0 18px 18px 0;
}
.window:nth-child(3n) {
margin-right: 0;
}
.window-thumbnail {
margin: 0 -6px 8px 0;
height: 158px;
width: 158px;
border-radius: 8px;
cursor: pointer;
background-color: #e0e0e0;
}
Here is a working example: http://codepen.io/jsanatar/pen/xOyLWK

How to have two divs side by side and keep aspect ration same on all dimensions?

Basically the title says it all.
How do I have two divs next to each other, and when on a different sized screen ( lets say smaller ) they don't merge into one, and if there is not enough space to go down to the next line? Also if possible to scale down the elements inside ( text and image and button )
Thank you!
CURRENT PAGE WITH PROBLEM (The giveaway boxes are the dicvs btw):
Here
add a class with float:left in it for both.
And use margin to center them as you want instead of your margin-left:50%.
Something like :
.giveaway {
background-color: #C0C0C0;
width: 360px;
height: 325px;
border-style: solid;
border-color: #336699;
float: left;
margin: 10px 25px;
}
.giveaway1 {
background-color: #C0C0C0;
width: 360px;
height: 325px;
border-style: solid;
border-color: #336699;
float: left;
margin: 10px 25px;
}
you should use the same class for both by the way...
I used a wrapper div to contain and center the two smaller divs. Then just used a media query to make them block level at a certain window width (for smaller screens)
Of course, you can adjust the widths / #media rule to suit your own needs
html, body {
margin: 0;
padding: 0;
}
#page-wrapper {
border: 1px solid red;
text-align: center;
}
.box {
text-align: left;
display: inline-block;
border: 1px solid #000000;
box-sizing: border-box;
width: 300px;
height: 200px;
}
#media(max-width: 650px) {
.box {
width: auto;
display: block;
}
}
<div id="page-wrapper">
<div class="box">
<p>Stuff goes here</p>
</div>
<div class="box">
<p>Stuff goes here</p>
</div>
</div>

Active Page Triangle Marker in CSS

I'm looking to create an active page marker like the one pictured. The title probably doesn't do a great job of describing what I'm trying to do here.
What I'm looking for is a border that has an curved triangle active page marker using CSS.
Here is a simple solution using to <div> tags only.
Setting the width of both container wil set the triangle on different placeses.
body {
margin:0;
width: 100%;
}
* {
box-sizing: border-box;
}
.right {
float: left;
border-bottom: 5px solid black;
width: 50%;
height: 100px;
border-radius: 0 0 40px 0;
}
.left {
float: right;
border-bottom: 5px solid black;
width: 50%;
height: 100px;
border-radius: 0 0 0 40px;
}
<div class="right"></div>
<div class="left"></div>
This is a relatively simple way to achieve the result using a single corner border radius on two small divs with a bottom border - to move the 'triangle', you only need to adjust the left position of the `container' element. It's not perfect, as the border fades towards the tip of the pointer, but it may pass the aesthetics test:
#line {
border-bottom: 3px solid #888888;
position: relative;
width: 500px;
height: 53px;
}
#container {
position: absolute;
bottom: -2px;
left: 200px;
width: 100px;
background: #ffffff;
}
#left,
#right {
float: left;
border-bottom: 3px solid #888888;
height: 50px;
}
#left {
width: 50px;
border-radius: 0 0 50% 0;
}
#right {
width: 50px;
border-radius: 0 0 0 50%;
}
<div id="line">
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
EDIT: The display in the sandbox seems to be inconsistent - here's a FIDDLE
You could play with before, after & border-radius to achieve it.
See an example here: http://codepen.io/anon/pen/RNqPpy

Categories