I've just started working with the polymer-dialog and polymer-dialog-scrollable elements. Using the standard case, and following the examples on the Polymer website, the elements are displaying well.
However, I am running into an issue. The content that I wish to display in the polymer-dialog-scrollable does not look good in the standard size dialog:
I would like to increase the height of the entire dialog box, so I tried styling the elements with CSS:
paper-dialog {
height: 90%;
}
paper-dialog-scrollable {
height: calc(100% - 128px); /* 128 seemed to account for the header and footer */
}
In simple HTML, this should work. But in practice, there is actually a generated div inside of the paper-dialog-scrollable with id and class scrollable, which I assume Polymer is inserting. Inspecting this element, I see this CSS:
element.style {
box-styling: border-box;
max-height: 60px;
max-width: 1292.81px;
}
Which renders the screen this way:
I'm not sure where this max-height: 60px styling is coming from, or how to overwrite it. Since the div seems to be a Polymer-generated object, I assume that this is generated by Polymer at some point. But it's not growing with the rest of the dialog.
Is there some setting or method for this element that makes sure the inner "scrollable" div will grow with its container (paper-dialog-scrollable)?
(Ideally, I would like the dialog to only grow based on the size of the content, with a maximum height of 100%. But that's beyond the scope of this question.)
UPDATE:
The max-height is not necessarily sticking on 60px. Right now, it starts at 383px (far below the height of the paper-dialog-scrollable element). The height of the "scrollable" div does change when I expand and shrink the window, but it always seems like a certain percentage of what it should be.
Here is a code sample of how I'm using the elements inside the HTML body:
<body unresolved>
<template is="dom-bind">
<div class="centerPanel">
...
<paper-button class="jobButton" onclick="openTheDialog('#BADialog')" style="margin-top:50px;">Business Analyst</paper-button>
...
</div>
<paper-dialog id="BADialog" modal>
<h2>Business Analyst</h2>
<paper-dialog-scrollable>
<div class="content" id="BAContent">
...
</div>
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm autofocus>Apply for a Business Analyst position</paper-button>
</div>
</paper-dialog>
</template>
<script>
function openTheDialog(selector) {
document.querySelector(selector).open();
}
...
</script>
</body>
Thank you to #tony19 for the help. I tried his working examples in my environment, and they did not work with the same behavior as on Codepen.
This led me to conclude, rightly, that it was my environment that was at fault. I upgraded my local Polymer components to the latest version, and everything now works fine.
Related
I am trying to create a "document viewer" of sorts using html and css. I'm wanting the end result to look somewhat of a pdf when viewed in an iframe with no border.
I have a parent div setup with a class of paper. This has some box shadow and other styles attached to it.
<div class="paper">
</div>
Within this I have children divs setup with a class of page. This is where all the content sits for the page.
<div class="page">
</div>
My problem is when the content gets too long for a page and you scroll to the next "page" it all mixes together and looks like junk. I have attached a code pen to further assist in being able to visually see what I am struggling with.
CodePen
CodePen Link Here
You can change your page class in CSS with this:
.page {
height: 100%;
margin-bottom: 15px;
padding: 20px;
display: table;
text-align: center;
}
What is the problem?
If the content in your pages gets too long, it overflows the height end kind of "bleeds" on the next page.
What to do?
You should set a fixed height of 100vh to your paper
Then, tell it not to expand with: overflow: scroll
Use min-height to set the height of your page, instead of height: it will naturally expand the height of the pages instead as you content grows
Finally, just in case, set overflow: hidden to page
I have a container, made up of an outer div with a scrolling inner div, like so: (note this is stripped down version of what I'm actually doing)
HTML:
<div class="faq-clone">
<div class="faq-clone-content">
Some text goes here.
</div>
</div>
CSS:
.faq-clone {
overflow: auto;
}
.faq-clone-content {
overflow: auto;
width: 375px;
max-height: 400px;
}
The idea is to have .faq-clone draggable and resizable, but for resulting scrollbars to still only appear on the inner div, faq-clone-content. I'm working with an existing project, so I started just by added .draggable() in jQuery, as shown in the following fiddle:
http://jsfiddle.net/jessikwa/5LrL3/2/
Simple enough, it still functions as it should. To get the resizing I understand the CSS will need to change. I added .resizable() to .faq-clone and tweaked the CSS so that the outer container has the width/height set and overflow set to hidden, as seen in this fiddle:
http://jsfiddle.net/jessikwa/5LrL3/4/
The container resizes fine, but the inner scrollbars are lost. Changing overflow:hidden on .faq-clone doesn't seem to be the answer, but without it I gain scrollbars on the outer div, which is undesirable. Any ideas on how the CSS should be set to accomplish this?
Using jQuery to set faq-clone-content to the size of it's parent faq-clone seemed to do the trick.
$(".faq-clone-content").css('height', faqClone.height() + 'px');
See fiddle: http://jsfiddle.net/jessikwa/5LrL3/9/
I have a set of data being displayed as a tree by the help of jstree plugin and jquery.
The data shows up perfectly in the tree structure. On expanding the last node in the tree the scrollbar appears on the right side of the div block.
Problem:
However if I navigate within the tree with the mouse over the scrollbar, the scrollbar keeps on scrolling down and does not go up.
I am at wits end what could the reason be. I am using a Mozilla Firefox browser.
Please help.
Sample Code below:
css:
.myScrollableBlock {
display: block;
height: 170px;
overflow: auto;
}
.jsp:
<div id="myTreeDiv" class="myScrollableBlock">
</div>
.js:
$('div#myTreeDiv').jstree({
// jsTree plugins
...
...
...
});
How to Solve
You just have to create another div, before the div where you instantiate the jstree, and add the class="myScrollableBlock" at the outer div. Like this:
<div class="myScrollableBlock">
<div id="myTreeDiv"></div>
</div>
Explanation
When you dinamically create the jstree, calling the jquery function
$('div#myTreeDiv').jstree({...});
It overlaps any the static css style specified before (class="myScrollableBlock" in your case).
You can make a quick check this way:
<div style="padding: 20px 20px; overflow: auto; height:170px;">
<div id="myTreeDiv"></div>
</div>
Why CSS is overlapped by JS?
When loading an HTML file, the browser executes the JS scripts after the DOM and the CSS files are built. Overlapping anything that has been done before.
Image source: https://www.sitepoint.com/optimizing-critical-rendering-path/
I have a set of divs like so:
<div id="textArea">
<div id="text"></div>
</div>
CSS properties:
#textArea {
height: auto !important;
min-height: 2em;
overflow: hidden;
}
#text{
display: none;
}
I'm filling in the div with the id of "text" with error messages coming back from a POST request using jQuery. The size of the data coming back is not static, but my problem is that the div is not adjusting.
I am basically trying to mimic the Ruby on Rails default flash message that will push divs further down the page with a dynamically adjusted div.
I think you are simply doing too much - A div should automatically expand to fit the text content inside it, unless you have a specific rule saying otherwise. Do you have a rule that specifies a height for all divs? Is that why you have the height: auto !important here? Are you using a reset stylesheet? Something external to these rules is affecting your divs.
Hope that this points you the right way.
Div's should update height and width automatically unless otherwise told to. What is your jQuery code to update the div? What are you using to reveal the div to the browser (since it's currently set to display:none)? Have you tried using firebug to inspect the elements?
I have a flex component like this:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
...
width="100%"
height="100%"
creationComplete="init()">
.......
<components:NavigationBar id="nagivationBar"
left="0" bottom="0" />
This is supposed to show at the bottom left of the screen considering that parent container fills the screen.
The behaviour I just described shows perfectly with Safari
with Chrome it shows correctly if the download bar beneath is not visible but as soon as the download bar has something it covers the bottom part of it.
and FireFox seems to always hide like 50 pixels or so from the bottom of the screen.
It seems like every browser renders the 100% height in its own way.
What is your recommended best way to overcome this? I can add a 100 pixel margin at the bottom but it's not something I want to do in this application.
Try something like this in the <head></head> section of the HTML page that loads your Flex Application:
<style type="text/css">
html, body{
width: 100%; /* make the body expand to fill the visible window */
height: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
overflow: hidden;
}
</style>
Not sure it will help in your case but it's easy to try.
You could wrap the output in a containing <div>, then using YUI's getClientRegion, and a resize event for good measure, set the containing div's CSS height property to the value which YUI has determined the available viewport vertical space.
Sorry the solution is an outside-of-Flex one, but it'll work.
Edit: I meant 'getViewportHeight()' not 'getClientRegion()', sorry, check out the APi docs though, there's plenty of goodies in there for this sort of stuff.
Flex is just a flash component in a web page. Its size depends of what is outside of flex. I don't think you'll get a proper answer unless you post HTML/JS code surrounding flex app.
PS. From my experience working with browser height may be very troublesome.
this normally happens when you have one or more positioning elements in a page. Check your code to see if you have used the position element anywhere else in your code, if so are they different, i.e one relative and the other absolute, if so this could be your problem, its reccomended that they are all the same, ie all relative