I'm using Foundation for our website and there's a section where there are 3 boxes / columns per row. As in:
CODE:
<div class="row">
<div class="large-4 columns">[BOX]</div>
<div class="large-4 columns">[BOX]</div>
<div class="large-4 columns">[BOX]</div>
</div>
Now when the browser is resized to about 1023px, each column suddenly changes to full width, as in:
..even though there is still some space on the right to go 2-columns first.
How do I make it so that Foundation goes to 2-columns first at a certain media query size before going full-width?
For people that may find this helpful:
<div class="row small-up-1 medium-up-2 large-up-3">
<div class="columns">
</div>
</div>
Large-up-3 means on large screen, the columns would be 3,
Medium-up-2 means on medium screen, the columns would be 2,
Small-up-1 means on small screen, the column would be 1 only.
You can change the numbers as per how many columns you want displayed.
(Foundation 5 has this update.)
Related
I'm creating excel-like table using react.
And there have some essential features.
Support update feature for the cells including child row's cells.
If head row's data can represents all of it's children's data and itself, it's cell will be merged into single cell and show in single cell.
Support row expanding feature :: When user click row, it expand and show it's children's data which has same columns with parent. (Like each row represents some aggregation of data, and with clicking row, user can see sub-data.
Should guarantee proper performance for more than 30000 rows with 100 columns including images.
Should support filter & sort & search & hide column(s).
Should provide data at single page (It means it need to be infinite-scroll, not pagenation)
Should have sticky table header
Should user can fix some of columns to left side for providing easier way to see data with horizontal scrolling.
I succeed on 1,2,3,4,5,6,7 (Most of them) by react-virtualized. But it become a problem when regarding '8'-Fixing column.
I checked internet and found that react-virtualized is the only way to archive it.
Basic idea of this is quite simple. I use List for rendering each row by user's scrolling(Virtualization), AutoSizer and CellMeasurer(Cache) for implementing dynamic height rows(Expanding rows). And least of codes for implementing TableHeader and cell updating, sort, filter features.
But it became a problem when I need to implement column fix. react-virtualized seems it dose not allow customization for it's feature (Seems really static for their functionalities.)
At first, I considered create two table and position it horizontally so that left table act like fixed column, right table is horizontally scrollable by sharing CellMeasurerCache for dynamic height row. But I found this article https://stackoverflow.com/questions/45682063/react-virtualized-share-cellmeasurercache-for-multiple-grids which says that CellMeasurerCache is not sharable by more than one List.
Also I considered that using other components react-virtualized support. But there are Pros and Cons for each components and I need to give up one of above requirements.
Can you provide me a idea for implementing all above requirements?
I want to share my code but it is quite big (About more than 1000lines for single table -- abstract table which is not hard coded for single purpose) If you want to see, I'll send you in anyway.
But I can provide basic HTML markups -- which is 8 is not implemented. and proven to be usable disregarding some bugs and errors.
This is not real HTML, I omit some of markups.
(All data is not calculated at table, all of them are fetched from other servers.)
<div class="table">
<!--Head part-->
<div class="headers">
<div class="header" style="display: sticky; top: 0">
<div class="upper">Name</div>
<div class="bottom">
<button class="sort" style="background-image: url(sort_asc.png)"></button>
<button class="filter" style="background-image: url(btn_filter.png)"></button>
</div>
</div>
<div class="header" style="display: sticky; top: 0">
<div class="upper">Price</div>
<div class="bottom">
<button class="sort" style="background-image: url(sort_asc.png)"></button>
<button class="filter" style="background-image: url(btn_filter.png)"></button>
</div>
</div>
<div class="header" style="display: sticky; top: 0">
<div class="upper">Gross</div>
<div class="bottom">
<button class="sort" style="background-image: url(sort_asc.png)"></button>
<button class="filter" style="background-image: url(btn_filter.png)"></button>
</div>
</div>
</div>
<!--Content part-->
<div class="row"/> <!-- This is expanded row -->
<div class="column" style="display:flex;flex-direction:column; height:120px;"/>
<div class="headCell" style="height:120px">ChicagoCompany</div> <!-- This is merged cell -->
<div>
<div class="column" style="display:flex;flex-direction:column; height:120px;"/>
<div class="headCell" style="height:40px">215</div> <!-- Display average value of child -->
<div class="cell" style="height:40px">230</div>
<div class="cell" style="height:40px">200</div>
<div>
<div class="column" style="display:flex;flex-direction:column; height:120px;"/>
<div class="headCell"style="height:120px">440</div> <!-- This is merged cell -->
<div>
</div>
<div class="row"/> <!-- This is not expanded row -->
<div class="column" style="display:flex;flex-direction:columnheight:40px"/>
<div class="headCell"style="height:40px">Seattle Corp</div> <!-- This is merged cell -->
<div>
<div class="column" style="display:flex;flex-direction:columnheight:40px"/>
<div class="headCell"style="height:40px">130</div> <!-- Display average value of child -->
<div>
<div class="column" style="display:flex;flex-direction:columnheight:40px"/>
<div class="headCell"style="height:40px">440</div> <!-- This is merged cell -->
<div>
</div>
</div>
What I considered above about append two table horizontally is like above
<div class="tableSet"><div class="fixedTable">...</div><div class="flexibleTable">...</div></div>
(Put two "table" together horizontally)
I tried to set sticky to all class <column>, but it dose not work as I expected. (It is not the same-level properties as you know.)
I think I can bypass restriction on CellMeaurerCache so that it can be shared in both table. But I have no idea for that. Can you give me a advice?
Is there any way to bypass restriction and implement all requirements? Or Is there any library or component or way to achieve it's goal even if it need to be re-build from the scratch?
Yes. It looks like that I want to Excel on webpage.
I need to show the profile overview which may or may not consist of multiple paragraphs of simple text.
<div class="row">
<div class="col-md-12">
<h3 style="color:#26506D"><strong>Profile Overview</strong></h3>
<p class="text-justify">{{Item.Consultant.ProfileOverView}}</p>
</div>
</div>
The user will enter the overview for themselves and that data will be displayed here, if I enter 2 paragraphs of text, then that is displayed as a single paragraph in the display page,
I guess the database doesn't store the data in the form of paragraphs it might be removing the line breaks,
I need to show multiple paragraphs, any suggestions on how to do that.
I am trying to make a nice display of my array data within an element that has a certain width/height. What I want to do is that when my data reaches the bottom of the element to start a new column and continue with printing the data within that next column and so on/forth
Any help is much appreciated!
My code:
<div class="repeater" ng-repeat="files in files"> {{files.name}}
<div class='progress-bar'>
<div class='percentage' ng-style="style">
</div>
</div>
</div>
Current view:
HTML/CSS solution
This should be better solved by CSS than by your application logic. You could display the file names as list and adapt the approach at
How to display an unordered list in two columns?
to display them in multiple columns.
I'm trying to get UI sortable with connected lists to play nice. Basically, I want to keep the functionality of two connected lists but I'd like the list on the right side to have two sections:
"First Place" only holds the very first tab and "Everything Else" holds the rest of the tabs. Basically, I want to just add two labels in there to separate things visually.
The user should be able to sort things vertically as if the labels weren't there and move tabs between the two lists.
This pen should demonstrate what I'm trying to do.
You'll notice that I can't really insert markup into
<div class="app" ng-repeat="app in list2">{{$index}} {{app.title}}</div>
as I only want the labels to appear one time...
Any ideas?
Using $first and $index:
<div ui-sortable="sortableOptions" class="apps-container screen floatleft" ng-model="list2">
<div ng-repeat="app in list2">
<div ng-if="$first">First Place</div>
<div ng-if="$index == 1">Everything Else</div>
<div class="app">{{$index}} {{app.title}}</div>
</div>
</div>
I have following, a view in angular with a map and then, right below it, a list of superregions which I am getting from a controller repeating across the view. At this time, the superRegions are in two columns, which I want. However, you can see from the following picture that there is inconsistent padding in between them, which I definitely don't want. I've tried everything but cannot seem to mitigate the spacing. It's not a problem on the right column but on the left column it definitely is.
<div class="modal-ui-view" ui-view="regionManagementModalView" ></div>
<div class="region-listing-info" id="region-listing-info">
<div class="row">
<div class="portlet col-md-6">
//The map directive
</div>
<div class="portlet col-xs-6 col-md-6" ng-repeat="superRegion in superRegionCollection">
//a list of superRegions with styling
</div>
</div>
</div>
It's driving me crazy and I must have tried eleven solutions. How can I keep consisting vertical spacing on the left column like the right column has?