I use react to make a function that on the page, users can select a group, and when a group is selected(in area G), its members can right away show in the 'users of the group'(in area U). My problem is that with this layout, when unfolding the table in area G, the table
cannot be fully shown even with a scrollbar scrolling to the bottom.
the render part is
<div className ={'outermost-container'} style={overflowY:'auto',display:'flex',flexWrap:'wrap',justifyContent:'space-around',}>
{/*for Area G, */}
<div>selectableTable</div>
{/*for area U*/}
<div style={display:'flex',justifyContent:'space-around'}>
{/*for left table of area U*/}
<div>selectableTable</div>
{/*for buttons in the middle of area U*/}
<div style={display:'flex' flexDirection:"column"}>2 buttons</div>
{/*for right table of area U*/}
<div>selectableTable</div>
</div>
<div>
this is implemented with https://www.material-ui.com/#/components/list
With this layout, are there any ways to show the complete table when scrolling down to bottom when unfolding? Any ideas are welcome.
I move the list on the left side out of a flexbox, and use percent to indicate size.
Related
I'm using angularjs and attempting to create a div that contains four re-sizable containers. I want these containers to resize in such a way that changing the size of a container alters the width of the adjacent container but no other containers in the same parent div.
For example, if I have four containers and I resize the left side of container 2, then I expect container 1 and container 2 to resize with container 3 and 4 to not change. These four containers exist in a row in their parent div with the expectation being that resizing should only occur horizontally. Width of the four divs should never exceed or be less than the total width of the parent container. Additionally, there should be a minimum width on all containers that restricts resizing adjacent elements below their minimum width value.
I have a partial implementation using angular-resizable but move containers are resizing when using this approach. I believe this is due to the flex-box implementation for allowing growing and shrinking of elements to fill the space but have hit a wall as far as making this work as described above.
Pulled and modified code directly from angular-resizable api page to produce this example. https://codepen.io/CodeRequiem/pen/NXVVKB The resizing is exactly as I want it, but the restriction to min-width is not being respected and there are a few issues with elements being pushed outside the parent container on certain resizes.
<div class="row">
<section id="one" resizable r-directions="['right']" r-flex="true">
<p>Schedule part 1</p>
</section>
<section id="two" resizable r-directions="['right']" r-flex="true">
<p>Schedule part 2</p>
</section>
<section id="three" resizable r-directions="['right']" r-flex="true">
<p>Schedule part 3</p>
</section>
<section id="four">
<p>Schedule part 4</p>
</section>
</div>
My solution to this was to switch from angular-resizable to colResizable which give an implementation using tables that will work for my purposes. There is an example on their documentation page that describes exactly what I need. The multiple range slider section shows a great example of this exact case. Hope this can be used for a similar solution for others.
I can't figure out really the difference b/w mostly fluid and column drop responsive design patterns. Can someone help please.
So that we're looking at the same thing, if you look at the mostly fluid pattern on this site it's a multi-column layout that collapses to a single column layout at screen widths below about 500px ( 31.42em to be exact)
The key points are that the grids are flexible, and when it collapses the the columns stay in the same order. Also, at all viewports the order of content on the screen is the same as the order in your HTML
1
2-3
becomes
1
2
3
The column drop pattern would most likely be a 3 column layout, main content in the centre and sidebars left and right at wide viewports.
For SEO reasons there's an advantage to have the primary content at the head of your HTML, so say your HTML looked like this
<main content>
<secondary content>
<tertiary content>
The column drop pattern will reorder your content so that at wide viewports it's a 3 column layout, main content in the middle
<tertiary content> <main content> <secondary content>
as the viewport decreases, this changes to
<main content> <secondary content>
<tertiary content>
and finally to
<main content>
<secondary content>
<tertiary content>
Hope this helps!
I have developed a screen in extjs which is divided into three sections.The first is the top view then the bottom view is divided into 2sections.The left view and the center view.There is a collapsible pane between the left view and the center view.On integrating this screen with other application I am facing an issue in IE8.What happens is,when I collapse the pane to the left,the top view vanishes away and on expanding the pane also I still do not see it again.Somehow the height of the bottom view increases causing the top view to vanish. Is there any solution for this?Any help is highly appreciated.Thanks
I have table layout and inner table layout (marked with red braŃkets).
When inner table have a few rows vertical scroll bar disabled and it fill cell(3 columns spawn).
However, when there is too many rows, vertical scroll bar is enabled and it take some space from container so horizontal scroll bar became visible also.
Is there is any way to make so that table layout with scroll bar and docking set to fill, have exact width of the container(3 columns in my case) after dynamic creation.
Images:
http://imageshack.com/a/img37/7370/jr04.png
http://imageshack.com/a/img850/3075/nmk3.png
Thanks
I have a scrollview with two tableviews side by side, and a bottom navigation bar.
Both tableviews should consume the entirety of the view, but scroll together if their content is too large for the screen. The two tableviews show different data of the same dataset.
When the table content is larger than the screen, or I rotate the phone to landscape, then there's no scrolling. There doesn't appear to be any scrolling at all.
I'm trying to stick with autolayout. What am I doing wrong here? The tableviews are sized to be the entire size of the view, and navigation bar is set to be 0 away from the bottom of the view. It sticks correctly, but scrolling doesn't work at all.
What am I supposed to do to get scrolling working?
UITableView is itself a UIScrollView - which means that if its interior content is larger than its size it will scroll. I've had to deal with table views inside scroll views before and I think that turning off scrolling does not force the table view to be the height of its interior content, but instead it clips it to the visible area. To get a table view to fit the interior content, you need to add a height constraint to the table view and drag it into your controller to create an outlet. Then in your controller add something like this (updated to match your constraint outlet names)
-(void) viewWillLayoutSubviews{
[self.tableViewOne layoutIfNeeded];
self.tableViewOneHeightConstraint.constant = self.tableViewOne.contentSize.height;
[self.tableViewTwo layoutIfNeeded];
self.tableViewTwoHeightConstraint.constant = self.tableViewTwo.contentSize.height;
}
Make sure that you have constraints from the bottom of your table views to the scroll view too, so that your main scroll view knows to fit the interior content.