I made a Highchart with height of 200px.
It seemed to work fine, but export menu does not fully show up when i click on it, i can not export XLS or CSV.
Sadly i can not change the height, i need it to be 200px for my project.
This is an issue with the overflow, without seeing your html it's hard to know what element to select but assuming you're doing something like this
<div id="chart-container" style="height: 200px"></div>
You can add a CSS class like this
#chart-container > .highcharts-container {
overflow: visible!important;
}
As specified by this GitHub issue https://github.com/highcharts/highcharts/issues/7671
This issue may of been hard to find due to the misspelled title, but please search the repos issues before asking
EDIT:
In your case the element under your container has a class called .highcharts-fixed so changing the code above to reflect that, makes it work
#container > .highcharts-fixed {
overflow: visible!important;
}
Working Fiddle
Related
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.
So I have a Bootstrap modal I've created and I am trying to make it resizable using jquery. I have the resize working horizontally but if you try to resize vertically its like the content inside of the modal is not contained within the element I am trying to resize.
I tried using the 'alsoResize' property on the .resizable() and included all the divs within the modal but that seems to cause other issues.
$('.modal-content').resizable({
alsoResize: ".modal-header, .modal-body, .modal-footer"
});
Here is my example: https://jsfiddle.net/p7o2mkg4/
You actually did everything right! But the default overflow behaviour of HTML elements is visible. So if the parent element's content gets overflowed, they break out of the modal and that doesn't look good! So, you need to set the CSS overflow property to scroll or hidden to fix breaking on small size. Try adding:
.modal-content.ui-resizable {
overflow: scroll;
}
This will ensure scrolling on overflow of the element.
Link to JSFiddle: https://jsfiddle.net/p7o2mkg4/1/
This works (css)
#myModal>div{
overflow-y: hidden;
overflow-x: hidden;
}
In case anyone stumbles across this like I have, make sure you have both jQueryUI.js and jQueryUI.css.
I thought having only jQueryUI.js was enough, but it turns out adding the stylesheet is why it wasn't working for me.
I am using the Jquery Isotope plugin with divs that have a back ground image and that are a particular size:
.frontpageimage {
height: 200px;
width: 200px;
background-image: url('tile1.jpg');
}
This works fine. But I want to throw something in there that randomly selects and image and makes it bigger then the others, so I created this:
$('#isotopecontainer .isotope-item:nth-child(2)').find('.frontpageimage').addClass('frontpageimagehigh');
.frontpageimagehigh {
height: 420px;
width: 200px;
}
(note: currently it is hard coded to select the 2nd image - will work on the randomisation later.)
Trouble is if I insert the above code above where Isotope is called it doesnt work.
If I insert the above code after Isotope is called, it works but the images overlap - ie: the image changes size after Isotope has rendered them.
Does anyone know how to perhaps add this to the existing isotope script? Or would anyone have any suggestions for me? Please let me know if clarification is needed.
Thanks
OK, so I found adding my own class to use instead of isotope-item and adjusting my JQuery as well as moving it back above the isotope call did the trick:
$('#isotopecontainer .item:nth-child(2)').find('.frontpageimage').addClass('frontpageimagehigh');
<div class="item isotope-item"...
Hope this helps someone. Please msg me if you need more info
I'm having some trouble positioning the Google +1 button on my website. The div is as follows:
<div class="g-plusone"></div>
The CSS I'm using is pretty simple:
.g-plusone
{
position: absolute;
top:95px;
left:715px;
}
Despite what would seem straightforward, it simple does not want to move.
I know for a fact that the div in question is being accessed. What's strange is that other social sharing buttons, such as the FB like below follow the same syntax and are positioned perfectly.
.fb-like
{
position: absolute;
top:62px;
left:715px;
}
Adding !important to the values does nothing, unfortunately.
Any ideas?
When Google loads +1 button the .g-plusone class seems to disappear, so try to put this DIV inside another DIV, as illustrated below:
HTML:
<div class="google-button">
<div class="g-plusone"></div>
</div>
CSS:
.google-button
{
position: absolute;
top:95px;
left:715px;
}
After page loads, the Google div called g-plusone turns into a lot of code, but, you can manipulate this button with id generated.
In my case, for example, to align the button in the middle of the line I put:
#___plusone_0{
vertical-align: middle !important;
}
Note: The id ___plusone_0 is the id generated by the google codes. Do whatever you want with this id.
Use something like Firebug to ensure you're targeting the correct element. The +1 button is very deeply nested, so you'll most likely need to look further up the DOM tree to get to it's outermost wrapper. You will be able to set the position of that without needing to use !important or anything, so I would definitely check this first.
Sorry, I would have just added this as a comment above but I don't seem to be able :)
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