CSS is acting up. I have a modal that looks like the below when stripped down:
<div id="modal">
<div class="dialog">
<!-- modal content goes here -->
</div>
<div class="backdrop"></div>
</div>
With the following (also stripped down CSS):
.dialog {
/* full width & height (assuming mobile-only) */
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient(to bottom, blue, darkblue);
}
.backdrop {
position: fixed;
background: rgba(0,0,0,.5);
}
It all looks great...
until I focus on an input and then this happens:
The dialog background is getting clipped, and I start seeing the backdrop background at the bottom.
How do I fix this (without having to change the backdrop background to match the dialog)?
EDIT: After some testing, I found that setting a fixed-height to the dialog equivalent to window.innerHeight before the input gets focus resolves the blank space issue. It's messy, but I hope someone has a better solution!
your dialog parent has no height that is why dialogs height: 100%; doesn't work properly. try height: -webkit-fill-available; or give your background color to modal which works as a wrapper. and remove position: absolute; from dialog there is no need to use absolute here so try to make it center without it. hope it was helpful
I was able to solve the issue by specifying the height in px, as opposed to using height: 100%. I did this via Javascript, but waiting for DOM load and then replacing height: 100%.
Here's what that looked like:
window.addEventListener("DOMContentLoaded", () =>
window.setTimeout(() => {
// Wait 1 sec; height isn't always correct on load for some reason
const dialog = document.getElementsByClassName("dialog")[0]
dialog.style.height = dialog.getBoundingClientRect().height + "px"
}, 1000);
})
Related
i have already spent good time trying to get my popover look as i desire.
the popup currently comes in the center of the screen. but i desire it to be at 50px from the top and width equal to device screen. right now the width seems to be some fix number which i am unable to change.
I don't want to do change it globally so i need it for a specific popup only. The current code to launch is:
let data:any;
let options = {cssClass : 'speech-popup'};
let popover = this.popoverCtrl.create(ProcessSpeechPopup, data, options);
popover.present();
the speech-popup css:
.speech-popup {
width: 100%;
top:68px;
}
the popup html is:
#Component({
template: `
<div padding style="background: rgba(255, 255, 255, 0.5);height:100%;">
<h1 *ngIf="showDoYouMean == true">Do you mean?</h1>
</div>
`
})
You need to have a position: absolute; to use the top css attribute. The width is likely being limited by the pop-ups parent. Try this:
.speech-popup {
position: absolute;
width: 100vw;
top:68px;
}
Codepen
Hello,
I'm desperately looking for a simple solution to my problem, my code is available on codepen.
// line 84
.panel-group .panel-heading + .panel-collapse > .panel-body {
border: none;
max-height: 300px;
overflow-y: scroll;
}
The objective is to keep the pink footer always visible (pasted at the bottom of the screen), even if the content is too large (like the panel 3 when it is open).
I tried putting a vertical scroll when the content is too large, but I'm not sure how to use max-height in the best way (currently at 300px, line 84).
This solution does not really work, it is not suitable for those with large screens (because max-height: 300px ...).
Would it be possible to do what I want directly in CSS? If so, can you guide me?
Or Javascript is mandatory according to you? The background-gray of the panel must cover the whole area, down to the bottom, with any resolution.
Thanks !
In my opinion, you should break the footer out of the modal and display it separately because the modal is already a fixed element. You could hook into js modal events and display this standalone footer only when modal is opened.
.modal-footer.outer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 2000;
background: #fff;
}
http://codepen.io/anon/pen/XpbYeE
Your modal footer was being fixed, it actually was behaving properly, the problem is that it's still a child of another fixed item - the modal itself and thus gets detached when the viewport gets too small for the parent.
http://g.recordit.co/pyMEfO94wE.gif
.modal-body
{
overflow-y:scroll;
height:400px;
}
Your modal body can be made scroll-able to keep footer always visible.You can use any height you want.
I'm working with a div sitting above another div. When I scroll the div that sits above the other and reach the bottom, it scrolls the entire body. This is hard to explain so I made a fiddle to demonstrate the effect: http://jsfiddle.net/2Ydr4/
HTML:
<div class="body">
<div class="above">
<!-- Content in here that is longer than the height -->
</div>
</div>
CSS:
.above {
width: 300px;
height: 200px;
overflow-y: scroll;
background: red;
z-index: 10;
position: fixed;
}
My question is: how do I prevent the body scrolling when the floating div is scrolled to the bottom or top? I'm sure it's something really obvious that I'm missing. Thanks!
EDIT: I should probably have mentioned that the target device for this was an iPad. I've tried adding body {overflow: hidden} conditionally as suggested below, and while this solves the problem on a desktop browser, it still seems to persist on a touch-based browser.
Desktop
That's how scrolling works. What you will need to do is remove the body's scroll property temporarily or by the users action.
For example you could disable the body's scroll when the user hovers over the floating div by using...
body{overflow:hidden}
and then re-enable it when you hover off the floating div by using..
body{overflow:auto}
Mobile
On mobile devices you will need to use touch events. I haven't tried this but in theory this should work.
var $body = document.querySelector('.body'),
$above = document.querySelector('.above');
$above.addEventListener('ontouchstart', onAboveStart, false);
$body.addEventListener('ontouchstart', onBodyStart, false);
function onAboveStart()
{
$body.addEventListener('ontouchmove', function(e) {e.preventDefault()}, false);
}
function onBodyStart()
{
$body.removeEventListener('ontouchmove', function(e) {e.preventDefault()});
}
I made a short example of what I have so far in this jsfiddle, but the thing I want to be possible is that when you move your mouse over the div, and you click on a point of the div where there is a textbox (in this example), you do not interact with the textbox, you still only interact with the div. Like if there was an invisible blanket over the textbox, and you trigger the click event of the blanket, but do not gain focus on the textbox.
I have searched a bit around and not a lot of people seem to have asked about this, but I found someone saying I could use a transparent image (1x1 px) of the containing div, and make it repeat like so
background-image: url('transparent.png');
background-repeat: repeat;
But to no avail. It is still possible to "click through" the div. I also tried setting
background: rgba(170, 170, 170, 0);
and
opacity: 0;
of the transparent div, and it was still click-through. I have also fiddled with some z-index, and that made no difference either (setting the z-index of the blanket to a higher value than the z-index of the textbox).
Assuming I understand what you're looking for, something like this will work: http://jsfiddle.net/43MjD/2/ (if you want to see the div over the top, see this fiddle)
#content{
position: relative;
padding: 10px;
border: 1px solid black;
}
#content:after {
position: absolute;
top: 0;
left: 0;
content: ' ';
width: 100%;
height: 100%;
}
-
<div id="content">
<input type="text" />
</div>
For it work work in IE, you can do this: http://jsfiddle.net/43MjD/6/
Adding preventDefault() to .transparent will not work.
You can use the solution suggested by #Prisoner however it uses content attribute which is not supported in all browsers. You could use this jQuery solution which deselects the box when its clicked in -
jQuery('INPUT').click(function (e) {
$(this).blur();
});
You have to set css z-index to a large value like 10 or 15 to the blanket div and specify position property to either absolute or relative because z-index only work with positioned elements.
transparent = $(".transparent")
transparent.click(function(event) {
event.preventDefault()
// code to be executed when clicked
});
The event.preventDefault() prevents the textbox from being selected.
yes another problem with this scroll bar
alright so I started the website over again that was mentioned here
and I am having problems with this scroll bar again
alright so all I have is a single image in a div tag
<div align="center" id="SuggestionBox">
<img src="images/SuggestionBox.jpg"/>
</div>
this code displays right but
when I make the browser window small enough that the full image can not be seen it doesn't give me a scroll bar to see the whole image
hopefully this makes sense
I am using firefox
EDIT:
I tried overflow:scroll and it did not work
this was the outcome
and this happened in the middle of the page
I also tried 'overflow:scroll' on the body of the page through css and all it did was show disabled scroll bars that did not change no matter the size of the browser
also some people are a bit confused
so
this picture might help
notice how the image is not fully shown
well, I want there to be scroll bars in case the user wants to see the whole image
but they're not appearing
also here is all my css code:
body
{
background-image:url("images/background.jpg");
}
a:hover
{
color:#FF0000;
}
table
{
background-color:#FFFFFF;
}
#SuggestionBox
{
position:relative;
right:375px;
}
thanks
Good Luck
get it?
I may not be understanding your question, but it looks like your problem is that you've disabled scrolling in the body but would like the div to scroll. #lukiffer's answer is right. When you resize your browser, however, the scrolling div, which is a fixed size, isn't overflowing because its content still fits.
Are you wanting your "SuggestionBox" div to anchor to the page so that it resizes along with the page? That would enable it to change sizes as the browser does and thus add scroll bars when its content doesn't fit:
#SuggestionBox
{
position: absolute;
/* Change these to establish where to place the div. All zeroes
means it fills its whole container */
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: scroll;
}
Update:
I don't get what #SuggestionBox is supposed to be. If you're just wanting a centered image link, you could get rid of the div and just have this as your markup:
<a id="SuggestionBox"></a>
And for that <a/>, you could have the following CSS:
#SuggestionBox {
display: block;
width: 100px; /* Or whatever the width is */
height: 100px; /* Or whatever the height is */
background-image: url(images/SuggestionBox.jpg);
margin: 0 auto;
}
If your reason for having the div was to give your link a right margin of 375px, your CSS could have the margin set to 0 375px 0 auto instead.
If you use this simple HTML/CSS, your body should be able to scroll normally (unless you have other CSS or HTML that you haven't posted that's breaking it).
div#SuggestionBox { overflow:scroll; }