I'm using bootstrap to create 2 rows of circles, the first row is col-sm-2 col-sm-offset-1 and the second row is col-sm-2 col-sm-offset-2. They are both within one container. For the mobile, I want it to be a grid of 9. Is there a way to merge the rows? Right now using col-xs-4 occurs independently I've included images below to express what I did:
I think you need to use <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4 col-lg-offset-1 col-md-offset-1"></div>
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'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.)
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?
Let's say I have a typical bootstrap layout with row's and col-lg-x's
<div class="content container">
<div class="row">
<div class="col-lg-5">
</div>
<div class="col-lg-7">
</div>
</div>
</div>
Are there any plugins (perferably angular but others too) to make a draggable divider between 2 columns to allows the user to adjust the width?
Like in this example (Tab #2) except it should "snap" to bootstrap's possible col-lg-xx combinations like col-6/col-6, col-5/col-7, col-4/col-8.
The following does not address your question directly, in that it does not follow bootstrap's columns/rows. But it might give you a good starting point and others might find it useful:
bg-splitter https://github.com/blackgate/bg-splitter
ui-layout https://github.com/angular-ui/ui-layout
There are good Angular solutions in this answer:
Angular.js using bootstrap and dynamically creating rows
As well as this answer:
how to split the ng-repeat data with three columns using bootstrap