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!
Related
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.
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 am using Meteor and Semantic-ui 2 and can't get the stackable grid to work on mobile (iPhone 6). When I resize my computer screen everything works fine but not on the mobile. On the mobile I have 3 columns and space on the sides (just as a large screen). It should be stacked in one column and use 100% of the screen. As I can understand mobile is defined as below 768px and iPhone6 is 750px. Do anyone have any suggestions or answers to solve this?
<div class="ui three column stackable grid container">
<div class="four wide column"></div>
<div class="nine wide column"></div>
<div class="three wide column"></div>
</div>
Just figured it out as I asked a question on gitter.im
Since the header markup is mainly handled by Meteor I forgot to add the
<meta name=viewport content="width=device-width, initial-scale=1">
I added it in my layout template as I am using Iron Router at the top of the page and it worked
I am new to responsive frameworks and I want to know if tables in an existing html file can be added the responsiveness.
If tables cannot be done so, how should tabular data be displayed for it to be "responsive" to the device size.
if you put table in the following div; user will be able to scroll left and right.
<div style="width:100%; overflow:auto">
</div>
I'm working with Zurb Foundation 4.3 and am having trouble wrapping my head around Zurb's small and large column classes. In the code sample below using just large classes for columns, the 2nd column will get repositioned below the first column when the UI width changes. This is nice because it keeps the UI content clean
<div class="row">
<div class="large-8 columns rounded">
Bubbles
</div>
<div class="large-4 columns rounded">
Yadda Yadda Yadda
</div>
</div>
However, if I add small classes to the columns, the 2nd column doesn't get repositioned resulting in a messy UI.
<div class="row">
<div class="small-4 large-8 columns rounded">
Bubbles
</div>
<div class="small-8 large-4 columns rounded">
Yadda Yadda Yadda
</div>
</div>
I like the ability to be able to change the column widths of the content as the overall page changes widths. However, as I drag the page from wide to narrow, the content doesn't reposition if I use the small classes. What am I missing? Thanks.
The small classes control the widths of your columns on small screens, without specifying small classes, columns default to small-12 or 100% width on small screens which is why you see them stack vertically.
In your second example, the first column to second columns ratio will be 1:2 for small screens instead the 2:1 on medium screens. The columns positioned next to each other in the same order but their sizes are swapped.
This should be what you are seeing.
If you wish to have them stack vertically like in the first example but swap the order of columns, use
<div class="row">
<div class="large-4 push-8 columns rounded">
Yadda Yadda Yadda
</div>
<div class="large-8 pull-4 columns rounded">
Bubbles
</div>
</div>
If this is not what you wish to achieve I'll help you specify another solution