I am having an issue with Angular File upload, being used with relatively positioned elements. My drop target is 100% width and height, absolutely positioned. If you drag the file over any non-relatively positioned element, the overlay appears fine and everything works. However if you drag over a relatively positioned element, it does not register the drag event. This is because the relative positioned elements are appearing on top of the dropArea.
I've tried applying a z-index to the drop target, and the drag and drop works great, but then I cannot click anything on the UI anymore.
Here is my logic:
HTML
<html>
<head>...</head>
<body>
<div id="dropArea">...</div>
<div id="siteContent">
<div class="row">
<!-- dragging to this element fails, since it is relatively positioned -->
<div class="col-md-12">...</div>
<div>...</div>
</div>
</div>
</body>
</html>
CSS
#dropArea {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
Is there any way to apply a z-index to the dropArea but still allow clicks to pass through?
I solved this by wrapping the entire page content in the drop area.
<html>
<head>...</head>
<body>
<div id="dropArea" class="dropArea" ng-file-drop="onFileSelect($files)" ng-file-drag-over-class="fileAdded">
<div id="drop-content-container">
<div id="drop-content">
<img src="img/app/files-upload-dd.png">
<h1>Drop Files Here!</h1>
</div>
</div>
<div class="page-content">...</div>
</div>
</body>
</html>
Related
I'm trying to make the div not expand over user visibility, but when I dock multiple items in this div, it expands off screen.
Here is an example.
I know, it sounds long, but I was trying to reproduce the entire layout to find the problem.
<body>
<div class="container">
<div class="head"></div>
<div class="main">
<div class="painel"></div>
<div class="dash">
<div class="head-dash"></div>
<div class="content-dash">
<div class="email-list">
<div class="head-content"></div>
<div class="content">
<div class="item"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
https://jsfiddle.net/ricardosc12/rb2kjtfh/12/
change the variable quant -> 50 and you will see the problem
Probably its height setting to 100% ignores its adjacent element, but how can I make it take up the remaining space without expanding later.
As you can see in the example, the email-list class has expanded over content, pushing all the main ones down.
I'm looking for a solution to this using flex, but can you suggest other possibilities.
I looked around but it didn't work.
Make a div fill the height of the remaining screen space
It's not the perfect answer but will solve your problem.
change your height of content-dash to this
.content-dash{
height: calc(100vh - 140px) ;
padding: 25px;
background: #EEEEEE;
}
We will make the content-dash's height to 100vh and subtract the height of head-dash and head from it.
I have a website with fixed body elements, like
[...]
<body>
<div id="header">[...]</div>
<div id="main">[...]</div>
</body>
[...]
There is overflow: scroll on the #main, but without clicking it first I am not able to scroll it with my arrow keys or PgUp/PgDn.
Is there any way to do so?
I am trying to figure out why HTML content underneath a WebGL animation cannot be clicked or interact with.
Please see example.
Currently the div containing the animation is set to:
.webgl-glitch {
position: absolute;
z-index: 2;
overflow: hidden;
opacity: 0.5;
}
..otherwise it will not display at all.
I have tried setting a z-index: 1; property on the header/container div, but this does not seem to help.
Here is the HTML section of the header including the animation div:
<!-- Begin Header animation -->
<div class="webgl-glitch"></div>
<!-- End Header animation -->
<header id="principalheader" class="centerContainer aligncenter fullScreen tintBackground stonebackground" style="z-index:1">
<div>
<div class="container">
<!-- Site logo-->
<img alt="KUBO" src="img/logo.png">
<!-- Site Principal slogan-->
<h1>Digital Exploration for the the digital age</h1>
<!-- Site Resume-->
<div class="row">
<div class="hidden-xs col-md-10 col-md-offset-1">
<h2>CRAFT experiences that <strong>defy</strong> expectations<br/>
CREATE from the the twin <strong>virtues</strong> of inspiration and innovation<br/>
BEAUTY in simplicity and complexity <strong>combined</strong> for the best of both worlds</h2>
</div>
<div class="col-md-10 col-md-offset-1">
<a class="fa fa-angle-down" href="#" data-scrollto="#about"></a>
</div>
</div>
</div>
</div>
</header>
Another thing I have noticed is that if I wrap the .web-glitch animation div inside a HTML5 canvas element it also does not display at all? why would this be?
The only property I have on canvas in the the CSS at the moment is width: 100%;
It's not because of the WebGL animation, it's because of the .webgl-glitch <div>. Putting one HTML element on top of another prevents one from clicking whatever is underneath it; it doesn't matter if it's transparent or not.
As for the <canvas>: anything you put inside a <canvas> element is supposed to be a placeholder for browsers that don't support said element; if your browser supports it, whatever is put inside the <canvas> will be simply ignored; so, if you have something like this:
<canvas>
<h1>Sorry, but your browser does not support the canvas element.</h1>
</canvas>
On browsers that do not support canvas, the message "Sorry, but your browser does not support the canvas element." will be displayed to the user; on the other hand, browsers that do support the canvas will simply not display the elements inside the canvas tag, and will allow the canvas to operate normally.
I am using HTML, and I am trying to make a part of a webpage where I have a textbox in the center of the screen and five images surrounding the textbox.
I am able to place three images above the box, but when I try to place an image to the left and to the right of the textbox, the images seem to be "stuck" in the center of the page. All this is in a div element.
Easiest way to do this is with grid system. In example if you use Bootstrap grid system you can do it like this:
<div class="wrapper">
<div class="row">
<div class="col-md-4"><img src="source" alt="something" ></div>
<div class="col-md-4">Textbox</div>
<div class="col-md-4"><img src="source" alt="something" ></div>
</div>
You can also do it without grid system like Gerasimos answer.
Try using the CSS position property if this doesn't work try entering this code in your style sheet:
#left-image { position: absolute; left: 10px}
#right-image { position: absolute; right: 10px}
Working in a hackathon and we are having an issue with our phone mockup. We want to anchor the text stream to the bottom: seems like a great opportunity for position: absolute...right? Well that makes it so that our scrolling doesn't work. Right now it is anchored to the top, positioned relative, and scrolling does work.
Try clicking the "I said..." button a few times. Ideally those buttons should be anchored (along with the text boxes that appear) to the bottom.
This is the temporary URL:
http://gotinto.com/text/
AND a PERMANENT JS Fiddle URL:
http://jsfiddle.net/Qyn7V/
Here is the simple HTML:
<div class="convoPhone">
<div class="phoneDisplay">
<div class="convoCont">
<div class="actualConvo">...(the actual text convo goes here)...</div></div></div></div>
Any solutions? We would be open to javascript, CSS, any combination. Thanks in advance!
Have you tried position: fixed? Observing your link, as a proof of concept, something like this should do:
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
Edit:
Put three place holder conversations as place holders with visibility: hidden (this ensures they occupy space).
<div class="convoCont">
<div class="actualConvo" style="">
<div class="invisibleFirst">
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
</div>
</div>
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
<div class="isaid textLine">I said...</div>
<div class="tsaid textLine">They said...</div>
</div>
<br class="clear">
</div>
Then for each of the first 3 real entries, remove one of the place holders. If you want more precision, you can replicate the same place holder effect with padding-top on actualConvo. Just reduce the padding-top by a fixed value until it bottoms out at 0. If you want to make the buttons scrollable, just removed the styling and apply the padding-top at a higher DOM level.
I ended up positioning the buttons absolute, then using a bit of jquery/javascript to make a minimum height. Thanks for your help everyone!
var contH = $('.phoneDisplay').css('height');
if($('.convoCont').css('height') < contH) {
$('.convoCont').css('height',contH);
}