I have a bokeh project that looks very similar to this https://demo.bokeh.org/movies
Now I would like to make it possible to hide/unhide the column on the left.
I know how to hide it following the solution from here https://discourse.bokeh.org/t/hiding-bokeh-elements/4335/2
The problem is now where to put a button which would show the column again.
I thought of the following:
When hiding the column make another button visible which will allow to unhide the column. This is easy but adding a new widget to the layout would defeat the purpose of hiding the column since either way I would have a big button visible on the screen affecting the position of the figure. Is there some way of adding a new button widget which does not affect the whole layout?
Adding a new tool to the figure which would call the unhide the column. I am not sure though if this can be done easily.
Related
I am using Material UI table components (which is not more than a styled and convenient API for HTML table elements) and I want to make my columns expand collapse on click.
This means that I need that when I click on a column, its sub-columns will be visible and all the rows will also show values for the sub-columns, and when I click on the main column again, the sub-columns will collapse and be invisible again, along with all the values in the rows for those sub columns.
I would also like it to be animated with a nice transition of the columns expanding from the main column into view and collapsing into the main column to invisible.
It doesn't necessarily need to be in react or using MUI, it could regular HTML and CSS, but the animations are crucial!
Thank you in advance for the help :)
I tried to use MUI tables components with the Collapse component (which is an animation component to put things into view with a nice transition) but it was neither smooth nor pretty and not even working properly as the columns were sometimes not aligned..
I've looked everywhere on google and couldn't find any example/library for such a feature anywhere.
I was only able to find examples for expand/collapse rows..
I have a site where I want to be able to show or hide a div based on both user input (clicking/tapping a button) and screen size:
a) If the screen width is greater than a certain size, show the div but allow the user to hide it.
b) If the screen with is less than a certain size, hide the div but allow the user to reveal it.
What I'm struggling with is getting these two requirements to interact properly.
I'm using Foundation 5 and jQuery, so both parts of this are possible - Foundation's "show-for-foo-up" handles initial visibility, and there are numerous jQuery functions that allow a div to be toggled between visible and hidden. But what I can't seem to do is find a way to allow a user click to reveal a div that has initially been hidden by Foundation's media query, or a way to do a pure jQuery toggle (ignoring Foundation) that sets the initial visibility according to screen size.
What makes this more complex is that the div contains a form. So I can't simply repeat it in two different divs and toggle between them, as doing that would either mean duplicate element ids or two different forms, both of which aren't possible in this scenario.
Does anyone have any suggestions? I'm open to either a jQuery solution, a Foundation solution or a pure javascript solution, just so long as it works!
Yes, CBroe's comment put me on the right track and my assumption thereafter was correct. All it needs is to use jQuery to alter the class of the div to add or remove the class which uses a media query. Dunno why I didn't think of this before, really.
I have a homemade drop-down that, when clicked will show the more data below it. Currently, when this happens it expands the holding cell to be taller. Is there a way to avoid this and basically have it work like a normal drop down and write its data on top of the table. An image has been included.
http://imageshack.com/a/img924/4021/dBkvyc.png
Image is at the link. Couldn't get the image to upload.
position:absolute and z-index are your friends but beware of formatting after you do it.
I'm trying to create a column-based, blog layout. I want the text to wrap to a new column when it hits the bottom of the page. At it's very simplest form something like, when the column height == the_height_of_the_wrapper then column-count++.
The problem with something like that would be the text would be distributed evenly. Also, that would rely on css columns and I want something a bit more browser-friendly. Are there any existing plugins for this functionality or anywhere I can get some ideas?
If anyone is familiar with any of the text-heavy windows 8 "metro" apps (such as the news one) that's the kind of layout I'm trying to mimic.
As i noticed in comments, you cannot use column-count there. But there is solution, check this one please: Continuing overflowed text in a different div?
Alternatively. You can apply a fixed height (even a percentage will work) to the wrapper the columns will fill appropriately. (example: w3schools.com/css3/tryit.asp?filename=trycss3_column-count). It even seems as though you don't have to specify a fixed column count as it appears to create extra columns as the content dictates.
I have the following page using Dojo 1.3.1 javascript toolkit
Content Pane
HTML table two columns, N rows
Column 1 (left): text
Column 2 (right) Dojo widget (can be any, but mostly Grids, pullodwn, etc)
Problem:
When page loads, it renders Ok (the type of widget and the number per page are determined at runtime, so I cannot manage this with static CSS)
When I add rows to the grid, while it is embedded in the Table cell
<td> grid </td>
the the given row (where the grid is embedded) gets
proportionally taller and
everything below the grid disappears and there is no scroll bars on the Content Pane
to get to the the rows below.
I do not know how to solve it, I have set 100% or auto height and width on
everything around the page. That does not help.
I am wondering if my design approach is wrong and it is unsolveable.
I have read about people telling not to use Tables for layout, but
I do not know at design time the order and the type of controls that I will
be displaying.
How else can this be done?
I think the problem is that when a grid is within a Table cell,
and the grid expands, the cell expands, but the holding content pane is not aware
it so borders do not get redrawn.
You could use CSS for layout -- what is it that tables can do and CSS don't? Or, you could try using another dojo grid instead of that HTML table, depending on what you're after.
Dijit's widgets work like normal nodes as much as possible. But many widgets, especially ones that let the user define what size things are (as you can with column widths in the grid) need to know specific dimensions.
The good news is that with most of these widgets, you can get an instance of the widget, and call widget.resize();