I've a bit of a problem. I've table data in such a way that you have a table, divided in to column groups, that's then divided in to columns. For the sake of argument, let's say like this:
<person>
<details>
<age>26</age>
<birthplace>Amsterdam</birthplace>
</details>
<appearance>
<hair>Brown</hair>
<eyes>Grey</eyes>
</appearance>
<clothes>
<trousers>Black</trousers>
<shirt>Red</shirt>
</clothes>
</person>
From this, my thinking is that these groups could/should perhaps be represented like this:
+-------------------------------------------------------+
| Layout |
| +---------------+ +---------------+ +---------------+ |
| | Composite | | Composite | | Composite | |
| | +----+ +----+ | | +----+ +----+ | | +----+ +----+ | |
| | |Item| |Item| | | |Item| |Item| | | |Item| |Item| | |
| | +----+ +----+ | | +----+ +----+ | | +----+ +----+ | |
| +---------------+ +---------------+ +---------------+ |
+-------------------------------------------------------+
Since the table groups should be able to be independently hidden from view, or have other actions performed on them (as a group).
However, this is tabular data and so, semantically, should be displayed like this (with appropriate table & tbody tags):
<table>
<colgroup>
<col>...</col>
...
</colgroup>
<thead>
<tr>
<th>Age</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>26</td>
<td>Amsterdam</td>
<td>Brown</td>
<td>Grey</td>
<td>Black</td>
<td>Red</td>
</tr>
...
</tbody>
</table>
Any ideas on how to implement this? I guess (may be wrong) that I'll have to extend/hack about with Marionette somehow to get it to produce the desired output - I just haven't a clue what that might happen to be! Or indeed if my brain is thinking the wrong stuff to begin with ... :)
If I'm understanding your question correctly, you should be able to use one layout to display 3 composite views.
To avoid "div soup" in your composite view, simply use the tagName property. You can see examples of that here:
http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/
http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/
I've found a solution to this problem on this very site - see Turning off div wrap for Backbone.Marionette.ItemView (adapted for a collectionView, since to me it makes more logical sense). However, IMO this solution should be only used in exceptional circumstances; generally the way Backbone/Marionette handle views is very sensible, and by and large markup should be written to fit in with that rather than the other way round! :)
This is a side note -
If you want to add height: 100% to the wrapping div so that % height values in child elements would work.
Change the render function in backbone.marionette.js under
Marionette.ItemView= Marionette.ItemView.extend({ ... and
Marionette.CompositeView= Marionette.CollectionView.extend({ ... like so:
render: function() {
.......
// ADD THIS BEFORE THE RETURN STATEMENT
$(this.el).css("height", "100%");
return this;
},
Related
I have an HTML table with a column of cells containing two parts e.g.
| Cat (meow) |
+---------------------------+
| Long-dinosaur-name (roar) |
There are also other columns not shown. My users' browsers have unknown widths. On a wide one, I wish to show the cell as one line, as above. If it gets too narrow, I'm fine with wrapping
| Cat |
| (meow) |
+----------+
| Long- |
| dinosaur-|
| name |
| (roar) |
but if one line wraps, all lines must also wrap:
| Cat |
| (meow) |
+---------------------+
| Long-dinosaur-name |
| (roar) |
Without using Javascript, is it possible to do this?
I know I can use <td nowrap> to prevent wrapping, or <br> to force a wrap, but how can I make one cell depend on another?
Try using media query(CSS) with breakpoints. I know you said, the user browsers width's are unknown, but you can anticipate for different width's etc
Tables that used to appear like this in Chrome:
----------------------------------
| Header A | Header B | Header C |
----------------------------------
| Item 1 | | |
----------------------------------
| Item 2 | Stuff 1 | Stuff 2 |
----------------------------------
...after upgrading Chrome to v65 now appear like this:
---------------------------------------------
| Header A | Header B | Header C | |
---------------------------------------------
| Item 1 | Item 2 | Stuff 1 | Stuff 2 |
---------------------------------------------
Firefox v59 also renders the table this last way, so this probably only suddenly affects those who have Chrome-only systems.
The source might look something like this:
<table>
<tr> <th>Header A</th><th>Header B</th><th>Header C</th> </tr>
<tr> <td rowspan="0">Item 1</td> </tr>
<tr> <td rowspan="1">Item 2</td><td>Stuff 1</td><td>Stuff 2</td></tr>
</table>
Chrome used to render a row with an attribute rowspan="0" as either 0 height or 1 height. Chrome v65 now renders it 'properly' as given in the html spec here. This means that the entry now fills the first column, pushing all following entries into the next column and so out to the right.
This may be caused by, for example, html renderers that calculate how many rows a cell might take according to a list of sub-items, when that list is empty. (For example improve-foundation's struts-layout does this; it does not appear to have been maintained since 2011 and attempts to register on the site fail me for now)
So, I have two files that can be retrieved from a database right now. They contain, as follows:
A table of info describing certain items. Essentially, key-value pairs. Something like this:
----------------------------------------------------
| id | count | description |
|----------------------------------------------------|
| 1 | 6 | description |
| 43 | 0 | description |
| 25 | 11 | description |
----------------------------------------------------
A map from collections to ids:
-----------------------
| collection | ids |
|-----------------------|
| a | 1,10 |
| b | 25,43 |
| c | |
-----------------------
(This is almost certainly an unclear title, but I'm not sure what I'm missing here.)
I want to create a page, such that I can view essentially what is in the second table (which is fairly straightforward). I'd like to be able to click one of the collection ids in the second table and go to a page that displays only the relevant lines from the first table.
That is, you'd click on b, and you'd see :
----------------------------------------------------
| id | count | description |
|----------------------------------------------------|
| 43 | 0 | description |
| 25 | 11 | description |
----------------------------------------------------
I'm not sure how to go about doing this, and I'd like some pointers.
The data is currently stored in some yaml files, but I can store it any way I want, really. I'm using rails for this project. This feels like it should be easy, and I'm just not understanding views in rails properly.
Can I create some sort of model that would apply for each of the ids and display some set of them at the same time? This feels like the most convenient solution, as it would probably allow for me to have hard links to an id.
If you can create page with RoR you must read this. After, you must create object( for example: #data = Post.all ) in controller(action in your controller). This object will have data from database. Last, your view file use this object and show your html code. For example index.html.erb:
<h1>Index</h2>
<table>
<thead>
<th>ID</th>
<th>Desc</th>
</thead>
<tbody>
<% #data.each do |d| %>
<tr>
<td><%= d.id %></td>
<td><%= d.desc %></td>
</tr>
<% end %>
</tbody>
</table>
If I didn't understand your question so sorry.
I have one entire column of a table who's header consists of a question and in the following rows contains only a checkbox...
------------------------------------------------------
| Would you like this text to wrap ? | <rest of row> | <-- <th>
-------------------------------------+----------------
| [] + <rest of row> | <-- <tr>
-------------------------------------+----------------
| [] + <rest of row> | <-- <tr>
It looks unsightly to me. Can I use any markup to "encourage" browsers to render it like this...
---------------------------
| There, | |
| isn't | |
| that | <rest of row> | <-- <th>
| nicer? | |
----------+----------------
| [] | | <-- <tr>
----------+----------------
| [] | | <-- <tr>
----------+----------------
Please note that I do NOT want to force the browser into a particular rendering, just to suggest something - or to be told that it is not possible.
Any solution must work in MS IE 7.
I guess the best you can do is giving a width to the chosen th
here some example code: http://jsfiddle.net/karameloso/aMTNH/
Set width for that column like:
table#my-table th:first-child {width: 4em}
Here is an example
UPDATE.
Changed px to em's as Brock Adams suggests
I want to have a column in a database that can contain multiple entries. Is it possible to have to define the type of the column as an array (fixed-sized array or some dynamic collection) so that it can store multiple entries.
If you require various values to be stored together, in a single field, then you will likely be best off storing them as a delimiter-separated string of values:
+----------------------------------+
| PRODUCTS |
+----------+-----------------------+
| Product | Colors |
+----------+-----------------------+
| Notebook | blue,red,green,orange |
+----------+-----------------------+
This is usually not what youw want though. Generally-speaking, the idea solution is to create relationships between tables. For instance:
+---------------+
| PRODUCT |
+----+----------+
| ID | Product |
+----+----------+
| 1 | Notebook |
+---------------+
+---------------+
| COLORS |
+----+----------+
| ID | Color |
+----+----------+
| 1 | Blue |
+---------------+
| 2 | Red |
+---------------+
| 3 | Green |
+---------------+
+---------------------+
| PRODUCTCOLORS |
+-----------+---------+
| ProductID | ColorID |
+-----------+---------+
| 1 | 1 | Notebook, Blue
+-----------+---------+
| 1 | 3 | Notebook, Green
+-----------+---------+
yes, in a typical relational design, you would have a 1:N (1-to-many) relationship between 1 table and another. each row in the first table represents a collection, each row in the second table is an element in a collection and references the first table.
a comma-separated list, serialize, or a url-encoded string is also a good solution as the other answers point out...
No, but what server side language are you using?
If using PHP you can use
$serializedArray = serialize($myArray);
And then insert that value into the db. To get it back out use unserialize();
This is pretty much the same answer as above (have a delimited string), but you could also save the text in that column as XML. Depending on the database you are using, that could be easy or tedious.
As pointed out above, is you obviously lose any aspect of being able to manage the data integrity from your DB layer (easily).