I have a new window with undefined size. How to place it into right bottom corner in the page? The getWidth() and getHeight() functions return -1, because I didnt set them by setWidth() and setHeight(). I dont want to set them to keep the size depending on the content.
You can use Window.setPositionX() to change the horizontal offset from the LEFT border, and setPositionY() for offset from TOP. Unfortunately there is no way to set offset from RIGHT/BOTTOM. So unless you know the width/height of both your window and the main window, this is not possible through Vaadin server calls (as far as I know).
However you can solve it through CSS: define a style name e.g. mywindow using addStyleName("mywindow") and then make a CSS rule like this:
.v-window.v-widget.mywindow {
right: 0;
bottom: 0;
left: auto !important;
top: auto !important;
}
Related
I have problem with fullpage js, situation is:
in full page content there is element with styling for example:
.element{
left: auto;
right: 5vw;
width: 50%;
bottom: 15vh;
transform: none;
}
When page is load (with this section anchor or no ) div looks like for about 100px more to bottom as it should be. When this first section is scrolled down and then back to top position of this element looks as it should be.
I know that element is in same position as in code, but don't know why looks more to bottom before first scroll.
I was also try with min-height and padding:15vh 0 but usucessfuly:/
Thanks for help
solution was to adding height 100vh to parent element of this absolute element. In my case slick slider.
It seems like the height and fixedBarHeight cant both be used in a rowChart. Ids like to use fixedBarHeight so all the bars have the size I want, and the chart to be in a scrollable div so that the numbers of bars define the height of the chart. Is this possible?
#ialarmedalien made this block, which introduces a dc.axisChart to separate the axis of the row chart from the actual chart.
Then you can use conventional overflow-y: auto on the row chart div.
Here is a related issue on dc.js.
The dc.axis addon mentioned by #Gordon will solve the problem with the axis in a scrollable div, but not the problem asked. By default, the axis will only appear at the bottom, not before.
To solve this, add one div after the row chart div, this div will contain a copy of the axis.
<div id='row-axis'></div>
Then initialize this axis in the javascript
dc.axisChart('#row-axis')
.margins({ left: 10, top: 0, right: 10, bottom: 10 })
.height( 50 )
.width( 300 )
.dimension( dimension )
.group( group )
.elasticX( true );
Then change the margin of the row chart to 'glue' correctly with the axis. They also must have the same width.
.width(300)
.margins({ left: 10, top: 0, right: 10, bottom: 0 })
Then , in the css
div.dc-chart {
float: none;
}
Dont forget to include overflow-y: auto for the row style. Then you get:
This however doesnt solve the gap problem if your height is too large (or too small) compared to the fixedBarHeight.
But now your margin is zero, so the proper height is easy to calculate (but you must pass the gap value, which has 5 by default). Assuming N=chart.group().all().length, then do:
.fixedBarHeight(X)
.height(X*N + gap*(N+1))
Which will give you:
Worth mentioning that at this point you dont even need the fixedBarHeight anymore. Simply setting the height using XN + gap(N+1) will result in dc auto setting this value to X.
Based on: https://bl.ocks.org/ialarmedalien/0a4bf25ffc0fb96ae569a20f91957bc1
Just add style="overflow-y: auto; height: 300px;" in your rowchart div. It should work.
Im trying singularity for the first time, and I'm trying to recreate a grid I have. Simple one.
This is a simple structure, for the test:
<header>
header
</header>
<main>
main content
</main>
<aside>
aside
</aside>
<footer>footer, nav, social icons etc</footer>
So in a 12 col grid, the header is full width, the main is 9 cols width, the aside is 3 cols width and the footer is full 12 cols.
Anyway, the inconsistency is this: the header, the aside, and the footer have float:right, but the main is float:left, so it gets out of the flow of the document.
This is the grid:
/* grid */
$grids: 3;
$grids: add-grid(5 at 500px);
$grids: add-grid(7 at 768px);
$grids: add-grid(12 at 1024px);
$gutters: 1/3;
This is the rest:
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #e1e1e1;
color: #333;
}
.container {
min-height: 100%;
margin: 0 auto;
#include background-grid;
}
/* main layout */
header {
#include grid-span(3, 1);
background: red;
#include breakpoint(1024px) {
#include grid-span(12, 1);
}
}
main {
#include grid-span(3, 1);
background: green;
#include breakpoint(1024px) {
#include grid-span(7, 2);
}
}
So the issue is that, it does not respect the flow and it overlaps with the header, like this http://imageupload.maxmendez.net/images/incon.png. The green main, should be below the header.
In order to fix that, I had to do this:
main {
#include grid-span(3, 1);
background: green;
#include breakpoint(1024px) {
#include grid-span(7, 2, $options: 'right');
}
}
Adding options right, seems to clear to the right and fix my issue. Is there a reason that im overlooking as to why the mai is floating left?
Still havent tested in IE, but im worried about compatibility.
It seems as if you are unfamiliar with what the clear property does or how it works. When using the Isolation output method, you need to clear your own floats, something you may not have been exposed to with more traditional Float output method based grid systems/frameworks. A good place to read up on them is MDN's Clear section.
In the example you've provided, header spans the whole grid width. Because the last item in a grid is floated right, the header is likewise floated right. This is to hide any percentage rounding issues with the last item in a row and have them all line up to the right edge. Otherwise, all grid items are floated to the left. Because this item is floated right, in order to clear it's border edge (not have it overlap), we need to tell the next item in the DOM (your main element) to clear items floated right. This will push it below header, creating a new row. Because footer is full width and is therefore floated right, and your aside is also floated right, there is only enough room on the main/aside row for an item of width 100%-width(aside). Because footer is too wide for that remaining area, it drops to the next row without needing to clear its float. That being said, this will only not overlap with main because main and aside are the same height; if main becomes taller than aside, footer will overlap it. To prevent this, you should tell footer to clear things floated to the left, which main is.
While this all sounds fairly complicated, don't be worried about cross-browser compatibility. We have tested Singularity extensively across all browsers, including IE, and it works fine.
If after all of this you are still uncomfortable with the Isolation output method, you can switch to the Float output method. The two have very different mental models; Isolation is about discretely positioning elements in relation to each other whereas Float is more akin to walking across a row on your grid. Keep in mind that if you switch to Float you will then need to use the push and pull mixins to nudge things around the grid.
Hope this helps!
Can you guys please let me know what is the best way to disable the horiontal scroll bar?
I have div with width: 100% and height :280px. When we have long continuous text (without any spaces), we are getting a horizontal scrollbar displayed.
Btw I am using jscrollPane.
Any suggestions would be appreciated.
What I have found in jScrollPane - settings object documentation:
contentWidth - int (default undefined)
The width of the content of the scroll pane. The default value of
undefined will allow jScrollPane to calculate the width of it's
content. However, in some cases you will want to disable this (e.g. to
prevent horizontal scrolling or where the calculation of the size of
the content doesn't return reliable results)
So to get rid of horizontal bars, just set content width lower than the container width.
Example:
$('#element').jScrollPane({
contentWidth: '0px'
});
The answer from Sławek Wala (contentWidth: '0px') is a really magic wand :)
In IE8 unnecessary horisontal scrollbar appears often upon elastic containers. But that's only part of the trouble: when horisontal scrollbar appears the content overflows through both vertical gutter and scrollbar.
So, if one disables horisontal scrollbar just making it invisible (as the other answers suggest) then the second part of the trouble remains.
contentWidth: '0px' fixes the both symptoms.
However, knowncitizen was right, '0px' does something weird with the jScrollPane because contentWidth is an integer property (btw contentWidth: 'foo' gives us the same pretty result ).
To avoid unpredictable effects one can use any positive but small enough number like this: contentWidth: 1
This is quite outdated question. But in case someone has same issue as you and I:
as I haven't found any property or API call to achieve this, I used simple solution - disabled via CSS:
.jspHorizontalBar { display: none !important; }
Not very elegant way, but saved time of investigating or 'hacking' jScrollPane code.
Pass horizontalDragMaxWidth: 0 to the options.
None of the solutions worked for me here so here's what I did using nested divs:
JS
$('#scrollpane').jScrollPane();
HTML
<div id="scrollpane" style="max-height: 400px; width: 700px">
<div style="overflow:hidden; width: 650px">
Your long content will be clipped after 650px
</div>
</div>
I was able to accomplish this using CSS.
Since the parent should have the class horizontal-only, when we only want a horizontal bar, I added the class jspVerticalBar as a child so that when it appears ONLY under the horizontal-only class, it will not display it.
It will still work if you have set the vertical and horizontal on the same page.
div.horizontal-only .jspVerticalBar { display:none; }
After trying and failing with the other answers, we had to hack jScrollPane to make this work. In jquery.jscrollpane.js, line 171:
pane.css('overflow', 'auto');
// Hack: Combat size weirdness with long unbreakable lines.
pane.css('position', 'static');
// End hack
if (s.contentWidth) {
contentWidth = s.contentWidth;
} else {
contentWidth = pane[0].scrollWidth;
}
contentHeight = pane[0].scrollHeight;
// Hack: Continued.
pane.css('position', 'absolute');
// End hack
pane.css('overflow', '');
Not sure how safe it is but that works for us.
For me, the best solution was in to add left: 0 !important; for classes .customSelect and .jspPane in the CSS:
.customSelect .jspPane {
overflow-x: hidden;
left: 0 !important;
}
I have an outer div with a variable height (and max-height) that's set with a specific pixel amount by JavaScript, containing two divs within.
The 1st div is intended to hold a variable amount of content, e.g. a list of links. It has no height set.
The 2nd div is intended to hold a fixed amount of content, and has a specific height set.
Right now, the max-height isn't working. The 1st div keeps growing, even with overflow: auto; set, and pushes the 2nd div below it outside the bounds of the outer div. How can I make it so that when the 1st div gets too large for the outer div to contain both it and the fixed-height 2nd div, the 1st div will start to scroll?
Example page: http://thevastdesign.com/scrollTest.html
Thanks for any help. I'd appreciate a CSS solution the most, even if it requires some hacks. It only has to work in Firefox 3+, IE8, and IE7.
Ideas?
You cant really do that without JS. Your max-height on the outer-div isnt going to control the height of one of your inner divs to invoke its scrolling. That inner div is always going to be the height you set (pixels, auto, etc..). You can either make the entire outer div scroll as needed by using overflow: auto or you can set a max height on the first inner div and set the overflow.
Given your setup, I would do the following (class names are implied by your question, not taken from the linked source):
div.outer {
position: relative;
max-height: $length(y);
overflow: hidden;
}
div.innerFixed {
position: absolute;
bottom: 0;
height: $length(y);
overflow: hidden; /* just in case, to keep things from
blowing out into all manner of crazy */
}
div.innerFlex {
max-height: $length(y);
overflow: auto;
}
These rules don't address box properties, which will have an impact on the height values that you apply. The combined height values (with box values included) of .innerFixed and .innerFlex should equal the height value of the container.
If you want to get all Zen and flip the vertical composition, you do that by swapping bottom for top on .innerFixed and assigning margin-top or padding-top to .innerFlex.
Something else I noticed is that you've got
div.outer { float: left; }
...But given what you need from that element (and to set the right content priority) I would instead suggest that you put your big column first in the source order and apply
div.mainContent {
float: right;
width: $length(x);
}
div.outer { /* i.e., the column that started the discussion */
margin-right: length(x);
}
with the understanding that the margin-right of the latter is somewhat greater than the width of the former (greater to account for the gutter between the two elements). Try it, you'll like it.