I am using an advanceddatagrid in a Flex4.6 solution. I have two advanceddatagrids that are placed on top of each other. At the moment I've got it to work so that moving the bottom horizontal scrollbar moves the top grids scrollbar accordingly but the problem is that it doesnt move it the same distance since one scrollbar is larger than the other. Does anyone know how to set the horizontalscrollbar width so that I can make them the same length?
You'll need to do some math:
grid2.horizontalScrollPosition = grid1.horizontalScrollPosition * grid2.maxHorizontalScrollPosition/grid1.maxHorizontalScrollPosition;
Related
I need to place three buttons at the bottom of my page and I want them to be in the left corner, center and right corner respectively. I did create HorizontalLayout into which I added my button. I am fighting with all kinds of alignments for over three days, but whatever I do, buttons remains in the left corner. Here is my code:
HorizontalLayout bottomLayout = new HorizontalLayout();
bottomLayout.setWidthFull();
bottomLayout.setHeight("82px");
bottomLayout.add(buttonA, buttonB, buttonC);
// bottomLayout.setAlignItems(Alignment.STRETCH);
bottomLayout.setAlignSelf(Alignment.END, buttonC);
bottomLayout.setAlignSelf(Alignment.START, buttonA);
bottomLayout.setAlignSelf(Alignment.CENTER, buttonB);
Please do tell me what I am doing wrong and how to correct it.
Also, all my buttons are 80px high and while first two looks vertically aligned to each other, the third one looks couple pixels higher. How do I align them vertically as well?
What you're looking for is bottomLayout.setJustifyContentMode(JustifyContentMode.BETWEEN);
Explainer:
Layouts are 2-dimensional, so the elements in them can be aligned in two ways: horizontally and vertically.
In CSS FlexBox layout model terminology
justification refers to alignment along the layout's direction (horizontally for horizontal layouts)
alignment refers to "cross-axis" alignment (vertically for horizontal layouts)
So setAlignItems and setAlignSelf both refer to the alignment above, wheras setJustifyContentMode refers to justification above.
I have to admit it's really not the most intuitive API. It is like that because it tries to follow the CSS FlexBox model and terminology.
I'm using Angular UI Grid in a project. The grid sizes itself so that all the columns fit horizontally in a div.
This works great, until there are more rows than fit on one screen. Then, a vertical scroll bar comes up (good), which covers part of the last column (bad). Horizontal scroll bars can be enabled to reach those last 20 or so px, but when you scroll horizontally, the header cells don't scroll. This throws everything out of alignment.
Since the grid was perfectly sized before the scroll bar, there should not be a need for the horizontal scroll bar. But the way the scroll bar covers the content means that without it, you can't see anything that might be in the right 20 or so px.
I need to fix this. Here are some solutions I have looked into implementing, unsuccessfully:
Find some way to know if there is a vertical scroll bar and add padding or margin somewhere to push in the content of both the header cell and the data cell, to keep things in alignment. I haven't found an easy way to grab the container who may or may not have a scroll bar and then I think the logic to ask it if it has a scroll bar would be brittle. Plus, just playing around with adding padding where I think it should go did not effectively push over the content.
Find a way to let the container with the scroll bar push outside of the grid when it has a scroll bar. This has basically the same issue as #1 in that that guy is pretty slippery.
Find a way to replace the scroll bar with my own. It seems that there is someone who did a branch that lets you do this with a specific library, but we are tied to a specific commit of UI Grid and adding libraries takes an act of congress.
Thoughts?
How you can know if there is a vertical scrollbar :
If you haven't customized the rows with a rowTemplate, then you might be having a rowHeight of 30px (if not please inspect).
var dataRowHeight = (numberOfRows * 30) + padding (if you have);
var gridElementHeight = angular.element("#my-ui-grid-div-id")[0].offsetHeight;
if (dataRowHeight > gridElementHeight) {
// you have a verticalscrollbar
}
Safe side : specify width for all columns by % and leave 1% behind for the scrollbar.
Ugly side : Get the width of the 'viewport', loop through and calculate the actual pixels from your provided percentage for all columns, if you detect a vertical scrollbar using the technique above, leave 15px behind.
Using SMartGWT I created a TileGrid, and now I'm trying to set the Overflow parameter in a way such that if there is overflow the scrollbar appears only for the Horizontal navigation and not the vertical one.
There are basically 4 slots for the tiles and if I add a 5th one, only the scroll bar for vertical navigation is shown.
In other words I want that the overflow is inline
I already tried these possibilities, but no one works.
setOverflow(Overflow.AUTO)
setOverflow(Overflow.CLIP_V)
setOverflow(Overflow.CLIP_H)
setOverflow(Overflow.SCROLL)
I also tried with the CSS code
overflow-x: auto;
Any ideas?
Try to set the orientation for the TileGrid to vertical by
setOrientation(Orientation.VERTICAL);
With this, you will get all tiles in one line. Sometimes a small vertical scrollbar still appears because the horizontal scrollbar. In this case you should also play with the settings and sizes to see only a horizontal scrollbar.
I was facing the same problem here. The only solution I've found for now was:
1) Set the tilesPerLine property of TileGrid to a big value.
2) Set the orientation property of TileGrid to "horizontal".
I'm trying to create a floating horizontal scrollbar that will follow the screen as the user scrolls vertically. I have a datagrid that is not scrollable vertically, but horizontally (there's a lot of columns). The container that the grid is in is scrollable vertically. Right now when the user wants to scroll horizontally, they have to go all the way down to the bottom of the page, scroll left/right, then go back up to where they were.
What I'd like to do is having the horizontal scroll bar on the grid float along the grid as they scroll up and down, so it will be visible at all times. Any ideas how this can be done?
This sort of thing was somewhat common with the constraint system from Halo, so I wouldn't be all that surprised if there were still artifacts of this left over in various spots. Essentially what happens is the control in question doesn't really understand that it's part of a constrained container and that it should fit within those bounds, instead it maximizes the container to make the container fit to itself (which is why you'd have to scroll to the maximum vertical -usually of the container to see the horizontal scroll -of the control).
In cases like this, a common work around was instead of setting the offending metric (ie width, height) to a percent layout, we would typically bind it to it's immediate parent or something similar.
Ex (psuedo-code):
<HGroup id="hgroup" width="100%" height="100%">
<DataGrid height="{hgroup.height}" .... />
</HGroup>
I'd try to fix the offending part first though, one thing to try is to turn off scrolling for the container, and allow the control to scroll.
In dreamweaver while positioning the controls (design tab) the css position values (left, top etc) are generated in pixels. Is there any setting through which I can get the values generated in percentages(%) ?
Update: Added my current layout for reference.
Regards
In the Properties pane, you scroll down to the CSS properties you want, (eg: position) and use the select box to choose your type of positioning.
Use the same pane to scroll to top, left or whichever and there will be two select boxes side by side, the first one is for the value, the other for the measurement.
It is possible to figure the percentage if you know the height and width of the page.
You can use drag and drop to size your container and place your them where you want them to be. Divide Dreamweaver's top and height pixels for the container by the page height. And divide Dreamweaver's left and width pixels for the container by the width of the page. It's a bit of work but it can be done.