i am trying to make the pop up information that angular-chart-js provides visible in its full lenght. My problem is as follow: I have mi charts inside a bootstrap defined column, usually when you hover over the chart you get the pop up information but, in my case, there is not enought space for this pop up to be fully visible due to the reduced space of the bootstrap column. Is there a way to make this information overflow visible exceeding the column size?.
I am sorry about my english not being that good.
Related
I am creating a table where I need to freeze some cell while keeping the other cell scrollable. The table must be responsive to screen size that is why I need to make some cell scrollable.
Based on the picture above, I want to keep the blue area floating/or freeze while the red area scrollable.
How is this possible in google app maker?
First of all, this widget that you refer to as a table in your sample screen is actually a composite widget where it combines several basic widgets like the list, horizontal panel, and pager.
There is another table widget under charts, called Table chart, that can be used to present your data in rows and columns. But if you are looking for a property that can achieve this UI effect, then I'm afraid AppMaker does not support this yet.
If you are really keen to make this work, I would suggest that you combine two table widgets that inherit the same data source then wrap them SIDE-BY-SIDE in a horizontal panel. The left side will only contain columns that you want to freeze while the right size will have the rest of the column that can be scrollable.
Make sure to set the height of both tables to auto-grow based on the content (Fit to content). This will give the effect that the two tables are merged when doing vertical scrolling.
I have here a sample implementation as I described above. I gave a background to the main container to better understand the concept. I also added a small gap to show that I used two table widgets.
Here is the set-up in editor view (screen-shot)
See it in action here (video)
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Is there a simpler way to even distribute multiple objects within the bounds of another object?
I've included a picture to help illustrate what I want done.
The green portion is my artboard, the gray portion is the main body and I would like item1-6 to be even distributed within the bounds of the white box. Typically to achieve the desired result I have to create additional objects (represented by the red lines) and place one at the left end of my box, one at the right end, and one between each item, and then use the distribute evenly button and remove the red lines afterwards.
I imagine there is a faster way but I can't seem to find it. Any ideas are appreciated.
Okay, this is slightly fiddly, but hopefully this will seem quite inuitive once you've done it once or twice.
Short version;
Find the width of your container.
Select container and objects - then set container to Key Object.
Enter width of container into Align window: Distribute Spacing, divide the figure by the number of objects, then click Horizontal Distribute Center.
Group your objects and center them to your container. Ungroup them again, if desired.
Long version;
1. Work out the width of your containing box (or artboard, if you are distributing your items to that). If, for example, you have a rectangle you can simply select it and look at the 'W' (width) value at the top of the window (click on Transform to reveal the info if you're working on a smaller screen). Just remember this number - nothing else.
2. Select all of your items AND your container. Click on the container again to make it the 'Key Object' (you should see that its selection edge becomes distinctly fatter).
3. If necessary, open up your ALIGN window (Window > Align). With the window visible, you should see three rows or sections from which to choose - 'Align Objects', 'Distribute Objects' and 'Distribute Spacing'. If the latter is missing, you may need to click on the little up/down arrow symbol next to the 'Align' tab title a few times in order to expand all of the options.
4. Ensuring that you still have all of your items selected and your container set as the Key Object (The 'Align To' box should automatically be set to 'Align to Key Object' in recognition of this), enter the container width you took note of earlier into the 'Distribute Spacing' box - and append /x where x = the number of items you have. So, if your box is 200 pts wide, and you have 5 items, you would enter 200/5 - this will just save you having to do the maths. Illustrator will automatically divide your starting figure and (in the case of this example), it would change to 40 pt (200 divided by 5).
5. Now click on the Horizontal Distribute Center button and all of your items will be set to the correct spacing. They probably WON'T be properly aligned with your container, though, so ...
6. In order to prevent your nicely spaced items being messed up by the next step, DE-SELECT the container (so only your items are selected), group them together - either with the keyboard shortcut CTRL+G (or COMMAND+G on Mac), or by going to Object > Group.
7. With the items grouped, re-select your container (so container AND group of objects are selected), make the container the Key Object again - if you don't want to see it move) and click on Horizontal Align Center. Your items will now be properly centered in your container and can be safely ungrouped if you wish (Ctrl+Shift+G / Command+Shift+G).
I'm very new to some of this, including getting the Boostrap grid down. I'm trying to create a responsive layout where the business graphic essentially slides to the left as you make the screen smaller so that by the time you are at a mobile size, the title, subtitle, login buttons and image are all stacked and centered, and the business graphic still looks like it's sitting on the grey line. For some reason, my image 'jumps up' when making my page smaller and I do not understand why. It should justslide along the grey line and scale down as needed..or that's at least what I am trying to make it do.
Here's a link to what I currently have: http://dev.blueeyesdesign.net/plm/homeimage.html
Any help is greatly appreciated!
It is "jumping" as it hits the thresholds of the columns. When you are using col-xs-# col-sm-# col-md-# etc all on the same row.
Those all stack at different points. Use the same col-[size] in the row if you want them all to stack at the same time.
http://getbootstrap.com/css/#grid-options
Edit: The higher the threshold the earlier the columns will stack.(ie: col-lg-# will stack first, col-xs-# will stack last)
I have an mx:Tree, but when the vertical scroll bar appears, it overlaps the content of the tree (odd that the horizontal bar does not). That might be acceptable for the text, but the stripe that I create using the item renderer, for certain items, seems to make it an anathema to the QA guys. How can I keep this from happening?
I have an idea for a workaround: I could make use the item renderer to stop the drawing a little bit short of the right side of the view (not that I can reliably get the width of a scroll bar) but I can't even figure out how wide the displayable part of a tree is--all the properties of a tree seem to be about its entire width, which includes the entire area coverable using the horizontal scroll bar. However, the blue stripe signifying a selected item doesn't seem to have that problem--it stops short of the scroll bar. In any case, when trying to find the displayable region, I don't know if I could handle the added complication of when the horizontal scroll bar is moved. Much better if someone could tell me how to put the veritcal bar outside the displayable tree area (or shrink the displayable area, of course). Thanks.
I'm using the Flex 3.5 SDK
I was able to find the solution when researching horizontal scrollbar issue on list and tree component. The blog to which it links eventually shows a kind of hacky solution (in the readers' comments) that shows how to make sure that none of the drawing is done beyond a certain boundary.
I am using Telerik's Radgrid for a website. Often the grid columns exceed the available width, and extend outside the main content area (fixed width).
So what are my options for presenting very wide grids. horizontal scroll bars just look ugly on my site
Your choices are a combination of the following:
Smaller fonts
Consolidate some cells to have more than one row (e.g. if you have a "start date" and "end date" put the start date on top and the end date on the bottom.
Widen the window
Make some cells appear conditionally (based on user-defined filters). Maybe the most frequently used cells appear normally and a checkbox unhides the less frequently used cells or groups of cells.
Allow horizontal scrolling
Make the window a fluid width
Popup data in a floating <div> via javascript instead of putting it in a column
Am I missing anything?
i am using telerik controls too, one thing i have learned after a lot of work with them is their CSS is usually good, but i also face your problem, and here is my advise.
what Keltex said.
always add a custom class to your Rad Grid where you do fix those nasty stuff.
don't use fixed width for Grid, instead use it on columns and make the grid Fluid, so does the page.
hope this helps.
I agree with devmania and making the grid fluid, I had a similar problem recently. So I made a few of my columns nowrap and left the rest to wrap. It doesn't look great on smaller screens but it's still usable because I've stopped things like date+time columns wrapping. However, once you start using it on a wider screen it looks great.
It all depends on how much of a scrollbar you have. Is it possible to strip out some of the columns and have that information in a popup/flyout somewhere?
Another option is to make which columns are shown user configurable, but you're not really addressing the problem, just making it the responsibility of the user to make it look nice.
If you can't get rid of the horizontal scrollbar you should at least try to put the more important columns first so that your users don't have to scroll to the right very often.