I am using foundation 6 in a new project and stumbled upon an issue.
I have a grid with and I want to hide a column (which I want to show again later), the problem is that if I hide the column, it does not reorder all the other columns, I tried by just hiding it with jQuery and by hiding it with Foundation's hide class (which, I guess, is basically the same thing).
The only way I was able to achieve the wanted functionality is by actually removing the column completely, but I need to show it again later so this is not an option.
Please take a look at the fiddle to maybe get a better idea of what I need.
(You will have to Run the script again after click one of the buttons)
JsFiddle link
The primary issue is you are not using the classes properly, for example the size of column should be applied to the column not the row elements.
<div class="column">
Should be:
<div class="small-4 column">
https://jsfiddle.net/875ascsk/4/
Related
I'm building an app in which I need to use React to render a Bootstrap grid. I'm a React newb so please bear with me.
Frontend will receive N objects that need to be displayed in Boostrap columns, each in his own column. The problem is, I don't know how large is N so I don't know how many rows do I need.
Any ideas how to approach this?
Should I have just one component? Or three (Container, Row, Column)? Or something else?
First of all, consider if you even need custom components for Container, Row and Column. You can just use a div with the appropriate css class, I don't see that much value in wrapping this into a custom component. If you do decide to use a custom component, you may want to look at react-bootstrap, they already implemented these.
As for the layout, I believe you can place as many columns as you want in a row in Bootstrap layout and they will wrap as necessary (if there's more than 12), so it might be easiest to just have one row and put all the columns inside it (see Bootstrap docs).
There are different ways to approach this problem depending on the type of content that you are trying to insert into the grid.
First off, as far as columns go, Bootstrap uses a 12 column grid system. This will make your life a bit easier because you can divide 12 by the number of elements in each row. If your html is set up correctly you can use:
var numOfElements = document.getElementById('objectsWrapper').children.length;
If you're using images you may want to set a strict max-height and max-width (percentages) to restrict the images generated from messing up the grid.
Next, when the column exceeds 12 elements, you'll want to start a new .row if necessary. Create a new div, append it to your current container and set it as the currentDiv you want to add your children to.This step is important because your code needs to know which 'objectsWrapper' it's querying for children.
Wash. Rinse. Repeat.
Hope this helps.
This question already has an answer here:
How to use Bootstrap 3 grid system with table component?
(1 answer)
Closed 8 years ago.
First I was using a table to layout some elements in my page, with the <table> <thead> etc... tags.
Then I found that bootstrap has a grid system, and I want to use it for laying out my elements. This went ok for the layout, with <div class="row"> for each <tr> tag and <div class="col-md-12"> for each <td> tag.
However I would like to use some styling provided by bootstrap, such as available for the table at this first example. Is this possible or available?
Right now I just get the layout, but no separation (e.g. borders) between rows like with the table example. Am I going at this the wrong way, or is there actually a way to style this grid in a table like fashion, and how would I do this?
if you want to add further styles to your boostrap, include an extra style sheet in your HTML, and give your HTML elements an extra class with styling outlined in your added stylesheet. put your class after the bootstrap class when calling it.
so, your html would be
<div class="row my_special_style_class">
I actually found out fairly quick after asking, how to achieve what I wanted.
You can just use the regular html <table class="table"> (and related) tags for the layout and apply the col-md-6 type classes to the header tags. This way it is styled as a table, but it behaves like a bootstrap grid.
I thought it was required to use div tags for the layout, because all the examples i've seen on the internet used (and said to use) the div tags instead of table tags.
If you're looking to show tabular data, with the lines and styling you like from Bootstrap, use a table and apply the classes that Bootstrap provides (e.g. <table class="table table-striped">).
I like to go to
http://getbootstrap.com/css/#tables
and use Chrome DevTools or Firebug to inspect the table examples they have on the page. It's much more precise and to the point than reading through their explanations sometimes :)
However, if you just kind of like the lines and stripes, but are just laying out a page (but not using tables), the answer is that you must implement those borders yourself in your own CSS.
Hope that helps.
In my current Webproject I have to implement a table containing all days of a month, resulting in ~30-31 table columns. Since such a huge table isn't very pretty, I wanted to implement something similar to the tables of Doodle Polls. Doodle folds a table, replaces the hidden columns with a pic and if you click on that picture it unfolds the columns -> displays the hidden columns.
But how do I achieve such a behaviour? I'm new to Javascript and not that familiar with fancy CSS3 techniques.
Especially, how do I replace the hidden columns with a picture?
The tutorials I've found only allow to hide specific columns and not to replace them.
PS: I also tagged RoR, since the project I'm working on is built with RoR and maybe there is also a Rails solution for that problem?
PPS:
You could hide the columns you want to hide first and have a column with the image displayed in the table. When the image (folding) is clicked you can hide the column containing the picture and make the other columns visible again. This is not really about some fancy css3 stuff but you need basic knowledge of how to interact with DOM elements through javascript (hide / show) elements. That should do the trick.
See this tutorial at w3schools. All that you need is get the elements you need (Image Column and all TDs in the hidden columns) ant then apply a css style to them (hidden / visible).
I need to populate my subgrid which shows some of the columns from main grid without actually going and getting data again using URL? Example:Main Grid is getting data from server (10 columns) using jsonReader. Out of which I want to show 7 columns in the parent row and 3 columns in the subgrid row . Can I do this? (Or some other way to achieve this expand concept?)
One possible workaround to use the sub-grid as 1-1 with main grid, instead of as parent-child : query all the columns as normal in the parent grid, but set the ones you don't want in main row as hidden. Then in sub-grid load event, access those fields using the "parent" row id and create them as custom fields or simply emit custom html.
This does cause duplication of the fields though, since the original main grid fields are still present, even if hidden. The html ids will get duplicated and may cause conflicts if you don't handle them.
Perhaps there is a cleaner way to do it than this (which I'm sure #Oleg will show us any minute now!)
But I wish jqgrid had a documented feature to more easily handle this kind of thing. It is very useful because you get the benefit of full inline editing in the subgrid, so you can design a much nicer edit form (eg. multiline textareas) than when confined to one straight line.
Note the presence of this feature in other grids.
Jquery EasyUI Datagrid demo
Telerik Grid Editing Demo
Kind of a two-part question. First, in ExtJS 4, how would i go about attaching a hover listener (aka mouseenter, mouseout) to the rows of a grid panel?
Secondly, reason I want that event is so I can show a couple action buttons within one of the cells when any cell in the row is hovered over. What would be the most efficient way implement this menu (creating the actual html elements). My first thought was to create a renderer for the cell that will hold the menu and return the html for the buttons in that renderer, initially hidden. However that seems like it would be alot of extra html being put into the dom since those same buttons would be created for each row thats displayed in the grid.
Part 1:
You can do this by tracking the itemmouseenter and itemmouseleave events on the grid view. However, for these events to be fired, you need to make sure you enable trackOver on the grid view.
Note that this all applies to the grid view config, not the grid config, and that the trackOver config is off by default for performance reasons. You want to be careful about doing too much in these events.
Part 2:
A better way to do this may be to define an editor for the cell, which is a component containing the buttons you wish to use. You can trigger the editing with the events discussed in part 1. This will mean your buttons get reused in the same way other editors do, and can be Ext components rather that html cludges.
I had a similar issue with showing menus for toolbar buttons on hover (and hiding them on mouseout). I wrote up a HoverButton extension which you should be able to easily extend to be a HoverRow if you need, using the events mentioned in Simon's solution.
Ext.HoverButton
Hope it helps.