I am developing a web-application which frequently uses tooltips. The application is styled using the Bulma CSS library along with the Bulma Tooltip Extension. Some elements in my application have internal scrolling (with their overflow-y property set to 'scroll' or 'auto'). Setting overflow-y to 'scroll'/'auto' automatically sets overflow-x to 'hidden (this is inevitable according to other answers).
This is causing overhanging tooltips to be cut off, as can be seen in this sandbox:
While I understand that having a visible x overflow with a scroll-able y overflow is impossible, I imagine that there is some work around/solution that will allow at least allow for the appearance of displaying an overhanging tooltip in a scroll-able element. In my case, allowing for visible overhang on the x-axis is more important (no other question/answers address/resolve this exact issue).
Any help will be greatly appreciated.
#testDiv {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 75px;
overflow-y: auto; /* Delete Line to see full tooltip */
}
.button {
margin: 10px;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="https://wikiki.github.io/css/documentation.css?v=201904261505">
</head>
<body>
<div id="testDiv">
<button class="button tooltip" data-tooltip="This is a Tooltip">X</button>
</div>
</body>
</html>
.
You can create another div element (.wrapper) that will have default overflow settings. It will be a container for your #testDiv and .button.
Now, Add position: relative to .wrapper.
.button now can be positioned absolutely, to just look like it's inside #testDiv element, but technically - it isn't :)
#testDiv element need to be expanded to 100% width and height, to inherit size from .wrapper
Last step - add some padding-top to #testDiv to prevent content overlap on .button element.
Look at code below:
.wrapper {
position: relative;
width: 100px;
height: 100px;
margin: 75px;
}
#testDiv {
height: 100%;
width: 100%;
padding-top: 50px;
border: 1px solid black;
overflow-y: auto; /* Delete Line to see full tooltip */
}
.button.tooltip {
margin: 10px;
position: absolute;
top: 0;
right: 0;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="https://wikiki.github.io/css/documentation.css?v=201904261505">
</head>
<body>
<div class="wrapper">
<button class="button tooltip" data-tooltip="This is a Tooltip">X</button>
<div id="testDiv">
content
</div>
</div>
</body>
</html>
I hope this solution will suffice :)
Try this:
.tooltip {
position: absolute;
}
Related
My goal here is to create an image slideshow. I'm trying to add the left and right arrows on each side, however my right arrow won't fit in the div. I'm kind of a beginner so bear with me, I was following w3 schools on the slideshow tutorial to make sense of things. I don't want to copy literally everything from w3 schools but like i said i'm a beginner and i'm trying to make sense of things. My next goal is to move on to js and try to solve things there myself.
<html>
<head>
<title>Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="myscript.js"></script>
</head>
<body>
<div class="container">
<div class="regular-img" >
<img id="city" src="NYC.jpg">
</div>
<div class="regular-img" >
<img id="king" src="KING.jpg">
</div>
<a id="prev">❮</a>
<a id="fwd">❯</a>
</div>
</body>
</html>
````
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
background-color: yellow;
height: 65vh;
width: 95vw;
margin: 75px auto;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
.regular-img {
display: none;
}
a {
cursor: pointer;
/* color: white;
opacity: 0.7; */
position: absolute;
top: 50%;
font-size: 18px;
user-select: none;
font-weight: bold;
padding: 16px;
margin-top: -22px;
width: auto;
}
#fwd {
right: 0;
}
enter code here
Okay, the fellow developer no need to be afraid just add position: relative to .container and you will be good to go. It is because when you give something a position absolute it will relate to the closest parent element whose position is relative. if none is present it will relate to the HTML element so by adding a relative property to the .container right arrow will relate to its parent container and will stay in the container. Google the difference between position relative and absolute and you will have a better understanding
The solution here is very simple. You have added position: absolute; to the arrows. But you didn't add position: relative; to the parent div.
All you have to do is add this :
.container {
position: relative;
}
In this fairly simple HTML page and CSS stylesheet, both the body and html elements are set to "height: 100%;" and yet the page is slightly longer than the window, creating a scrollbar that I don't want.
I've read through many stack exchange posts about this issue of extra space at the bottom of a page, but have not managed to find a fix or an explanation that works for me.
I am fairly certain that the problem is not being caused by a stray text node in the DOM. I have tried removing all extra white space in between tags in the HTML file to no avail. I have tried styling the body with "min-height: 100%", but then the purple content of the page no longer takes up 85% of the whole window as it did before. I have tried setting "overflow: hidden;" on the html element, which seems to work, but I have no idea why it does. I have even tried using a flexbox to achieve the functionality displayed in the code, but I haven't been able to make that work either.
When I right click on that extra unwanted yellow space on the bottom and click "Inspect Element" I get directed to a "buttonWrapper" div, but I have no idea why this would be causing any problems.
A valid explanation of why this is happening is more important to me than a solution right now (hence my dissatisfaction with the "overflow: hidden;" method). If you do have a solution, I'd prefer it would be entirely CSS based.
Thanks for taking the time to read this.
* {
margin: 0;
padding: 0;
}
html {
background-color: yellow;
width: 100%;
height: 100%;
}
body {
background-color: grey;
width: 100%;
height: 100%;
}
#titleSection {
width: 100%;
height: 15%;
text-align: center;
font-size: 10vmin;
}
#contentSection {
width: 100%;
height: 85%;
background-color: purple;
}
.buttonWrapper {
width: 50%;
height: 100%;
display: inline-block;
}
.buttonImage {
height: 100%;
width: 100%;
object-fit: contain;
}
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<link type="text/css" rel="stylesheet" href="style.css">
<link rel="icon" href="" type="image/x-icon" />
<script src="code.js"></script>
</head>
<body>
<div id="titleSection">Who's going to set up the board?</div>
<div id="contentSection">
<div class="buttonWrapper">
<img src="http://orig15.deviantart.net/7e51/f/2013/293/e/9/owl_face_by_cypher2-d6r9e23.png" class="buttonImage">
</div><!--
--><div class="buttonWrapper">
<img src="http://eredivisiezeilen.nl/wp-content/uploads/2015/04/1429207962_male3-512.png" class="buttonImage">
</div>
</div>
</body>
</html>
Change it to this:
#contentSection {
width: 100%;
height: 85%;
background-color: purple;
font-size: 0;
}
Here is the html:
<body>
<div class="ngdialog">
<div class="ngdialog-overlay></div>
<div class="ngdialog-content>
...modal content
</div.
</div>
<body>
The ngdialog div is, as you can guess, an modal (z-index: 10000).
My goal is, by applying some comination of styles (position, float etc.) to the elements to make it so that:
a) When the modal is displayed, have the overlay (grey and opacity; 0.5) cover all other elements in the page.
b) If the modal content is longer than the page, I would like the user to be able to use the main scroll bar to see the bottom/top of the modal. In other words, if the rest of the page is only 100px but the modal is 200px, I would like the scoll bar to allow the user to scroll that extra 100px.
The issue I am having is that when I position ngdialog as absolute, the window won't allow me to scroll to see the rest of the modal (as the absolute element is no longer in the standard element flow).
If I try to use fixed positioning, there is no scroll bar. If I use relative positioning, the other page elements (which the overlay is above) get moved around.
I have tried (what feels like) every combination of absolute, relative, fixed, static, float on all of these elements and I can't get the behavior I am seeking.
Keep in mind that body is position: relative (this can be changed if need be).
Thanks in advance, appreciate all comments.
Edit: Sorry, I had to go to sleep there, here is a fiddle:
https://jsfiddle.net/vpgoy756/1/
WIthout changing your HTML structure, this is what you'd need to do:
* {
/* This was to save typing */
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
position: relative;
width: 100%;
min-height: 100%;
}
.ngdialog {
z-index: 10000;
text-align: center;
overflow: hidden;
}
.ngdialog-overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 9999;
background: rgba(0,0,0, .4);
}
.ngdialog-content {
position: absolute;
z-index: 10000;
width: 100%;
height: 100%;
max-height: 100%;
overflow: auto;
}
.panel {
margin-top: 50px;
margin-left: 10%;
margin-right: 10%;
min-height: 500px;
z-index: 10000;
}
.reg-page-block {
width: 200px;
height: 200px;
display: inline-block;
background-color: #0f0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- ^ from your provided fiddle -->
<body>
<div class="ngdialog">
<div class="ngdialog-overlay"></div>
<div class="ngdialog-content">
<div class="panel panel-primary">
<div class="panel-heading">modal</div>
<div class="panel-body">content</div>
</div>
</div>
</div>
<div class="reg-page-block">Regular Page</div>
</body>
Be aware that if both the dialog and content are taller than the viewport, you will get double scrollbars - this may not be desirable but you specifically asked for the dialog to scroll separately from the content.
Try some of this CSS and see if it does the trick. It's hard to provide an exact solution without seeing your current CSS code, but maybe this will work.
Use this HTML structure instead:
<div class="ngdialog-overlay">
<div class="ngdialog-content">CONTENT HERE</div>
</div>
And this CSS code:
.ngdialog-overlay {
display:block;
width:100%;
height:100%;
background:#333333;
background:rgba(0,0,0,0.8);
z-index:10000;
position:fixed;
top:0;
left:0;
overflow: scroll;
}
.ngdialog-content{
text-align: center;
width:100%;
height:100%;
padding-top:30px;
padding-bottom:30px;
/* Optional if you want content vertically centered */
display:table-cell;
vertical-align: middle;
}
The trick is overflow:scroll; and height:100%; - because we have a set height, if the contents become any taller than that they will overflow and scroll. But in this case, when the user tries to scroll it will actually be scrolling the .ngdialog-overlay element and not the window itself.
http://jsfiddle.net/bcole808/6wcsxf3z/1/
In CSS file Add below lines
.modal-dialog {
transform: translateY(50%)!important;
}
You can change 50% to any other value which will solve problem in your Browser
It worked for me
I've created a bubble in css3, but in some browsers (specifically Windows Safari 5.1.7) my span overflows my anchor tag, even though 1) it's positioned relative and 2) had a static width / height with a hidden overflow. In all other browsers (Firefox, IE, Chrome) it looks fine but the anchor link (hover) extends outside the bubble, to the width of the span since it is displayed block.
My question is, why is it overflowing and how can I fix it? I thought using a relative position with an absolute element sort of put it back into place, is this not correct?
Here's a JSFiddle of the problem at hand. The code looks like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
body {background-color: #ccc;}
a {display: block; -moz-border-radius: 10em; -webkit-border-radius: 10em; border-radius: 10em; border: 5px solid #eee; width: 220px; height: 220px; overflow: hidden; position: relative; text-align: center; line-height: 24px; font-size: 20px; color: #fff; background-color: #fff;}
.content{display: block; position: absolute; bottom: 0px; background-color: #000; width: 100%; padding: 20px 0 30px;}
</style>
</head>
<body>
<a href="javascript:void(0);">
<span class="content">
Test<br />
Bubble
</span>
</a>
</body>
Here's an example I keep running into on chrome, if I hover the Green (padding) or Blue (width) my mouse goes into a pointer, which is not where the link should be with overflow: hidden - it's outside the rounded corners.
SO here is what I figured out.. overflow hidden doesn't work with links, just hides it visually
http://jsfiddle.net/88UeR/
its only visual not clipping of the block level element
#a {
position:absolute;
border-radius:100px;
background-color:#72CEE0;
width:100px;
height:100px;
left:150px;
overflow:hidden;
}
so if you want to hide it completely you have to make the inside element not overflow outside the parent for anything other than to visually hide it
I'm looking for a valid cross-browser solution for an HTML page which:
Consumes 100% of the screen height, with no overflow (i.e. no scrolling)
has a vertically (and horizontally) centered <div> which will hold the main content
I know vertical centering is possible when the wrapping container has a static height. Is adjusting this height to browser window height something feasable? (Preferably, no JS should be used.)
Depends on what you mean with "cross browser". Following works fine with all current, standards compatible ones (thus not IE6):
HTML:
<div id="a">
<div id="b">
<div id="content"></div>
</div>
</div>
CSS:
html, body, #a {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#a {
display: table;
}
#b {
display: table-cell;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
}
#content {
border: 5px solid red;
width: 100px;
height: 100px;
margin: auto;
}
Live example:
http://jsfiddle.net/mGPmr/1/
You could do something like this. It looks to work in IE6 as well:
<html> <head>
<script type="text/javascript"> </script>
<style type="text/css">
#container { height: 100%; width: 100%; position: relative; }
#content {
border: 5px solid red;
width: 100px;
height: 100px;
position: relative;
margin-left: -50px;
margin-right: -50px;
top: 50%;
left: 50%; }
</style>
</head> <body>
<div id="container">
<div id="content"></div> </div>
</body> </html>
Is simply not possible without JavaScript, at least not with CSS2 or earlier (not sure if CSS3 makes this possible, someone clarify on that).
The other provided answers require absolute width and height for the element; I assumed no such requirement. There's no way to center a flowing element vertically which is what you usually want, given that you don't know the aspect ratio of the browser window to reliably use fixed-size containers for content.