I am having a lot of difficulty using the CSS 3 columns style. I'm using Firefox 3.6 which should support the -moz-column layout.
I have a list of items and I'm trying to render them in 2 columns, top to bottom. To assist my internal sorting algorithm, the very first list item is a sub list.
my css uses this
.container{
-moz-column-width:635; //slightly wider than the list item we're displaying
-moz-column-rule:1px solid;
}
.sub_list{
width:50%;
display:list-item;
}
.item{
overflow:hidden;
padding:0;
margin:0;
display:list-item;
width:634px;
}
Unfortunately my list is displaying as a single column list or a multi column layout where each <li> is marked float:left; but which isn't sufficient since it orders thusly:
1 2
3 4
5 6
This isn't what I need, and it looks absolutely hideous because list item 1 is itself a list.
The examples I have found all seem to order the list items vertically and they don't use any additional tags:
http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html and/or
https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions .
Can anybody tell me what I'm doing wrong? Maybe I'm failing to understand the layout engine properly.
It's been requested that I officially "answer" this question so I'm moving my answer from the comment to an answer.
After nearly a full day of research and tinkering I finally tinkered my way to the answer about five minutes after posting the question.
I removed all display/position related styles for .item. Whether or not any of them are actually compatible with Column format I don't know. You'll have to experiement with it or ask someone more knowledgable.
I gave .container a fixed height.
Related
I have a table where I need to get the values of the ticked headers as shown. The ALL takes precedence and it will include all headers when ticked.
Here is the working copy of the sheet.,
The expected values are shown in the image below.
The purple cells will have formula, H2, H3 and so for for each row.
I have tried with
=TRANSPOSE(FILTER(Config!A$1:A$16,(INDEX(Config!A$1:G$16,,MATCH(2,Config!$A$1:$1,0) ))=TRUE))
delete H:K range and use in H2:
=INDEX(TRIM(SPLIT(FLATTEN(QUERY(TRANSPOSE(IF(B2:B=TRUE, C1:F1&"♦",
IF(C2:F=TRUE, C1:F1&"♦", ))),,9^9)), "♦")))
Code Guy, see if this formula (need to drag down) does what you want:
=IF(B2,{C$1:F$1},IFERROR(FILTER(C$1:F$1,C2:F2),""))
"Brute-forcing" the solution with IFs kinda works, even though it's inelegant and not scalable to larger number of columns. Might be interesting to re-ask the question with an arbitrary number of columns. Pure formula solution might not be possible.
When dynamically filling css grid columns I recently noticed that after column 1000 the remainder seems to be filled in the row direction. See the example below. This leads me to the question:
Is there a maximum amount of rows and/or columns when using CSS grid?
Suggestions of how to get the remainder (from 1001 on) in the next columns are welcome, but are not the core of this question.
The CSS grid seems to have a different column/row limit depending on the browser.
For chrome the limit seems to be 1,000x1,000 as explained here in the answer of Bludev
For firefox the limit seems to be 10,000x10,000, but I can't remember exactly where i read this.
I searched around for this for awhile, so forgive me if there is an answer already. I am having trouble applying borders to merged cells using CFSpreadsheet. Below is some example code.
<cfscript>
newSS = SpreadsheetNew('Testing'); //Create Spreadsheet
SpreadsheetMergeCells(newSS,1,1,1,9);
SpreadsheetAddRow(newSS,'Underline this Header');
SpreadSheetFormatCell(newSS,{bold=true,alignment='center',bottomborder='thin'},1,1);
Spreadsheetwrite(newSS,expandpath('myTest.xls'),true); //Write File
</cfscript>
What I would expect is the top cell to be underlined all the way across. What I get is the top cell only underlined through column "A" and not underlined after. Is there anyway around this or is this just a limitation of CFSpreadsheet??
Thanks!
According to the POI FAQ's, ie underlying library CF uses to generate spreadsheets, this is currently not supported (emphasis mine):
12. How do I add a border around a merged cell?
Add blank cells around where the cells normally would have been and
set the borders individually for each cell. We will probably enhance
HSSF in the future to make this process easier.
Probably the best you can do for now is to use SpreadsheetFormatCellRange instead of SpreadSheetFormatCell:
SpreadsheetFormatCellRange ( newSS
, {bold=true,alignment='center',bottomborder='thin'}
, 1,1,1,9 );
I'm currently working an a very simple project management template.
The Idea is that after entering a start and end-date columns will show up as a very simplistic gantt chart (conditional formating).
Everything works fine, until "year" comes into consideration. Since it is a several years lasting project and we work with calenderweeks it is essential that the work package is only visualized in its specific year.
So I came up with the following (rough'n'dirty) formular (example from cell K3):
=and(if(K$2>=$F3;1;0);if(K$2<=$H3;1;0);if(or(right($E3;4)=K$1;1);(right(G3;4)=K1;1;0)))
This is the document: https://docs.google.com/spreadsheets/d/15F1uBnoHMuJqc_w0X04U5-ZCQ_6mgO_HJqvN5U28cog/edit?usp=sharing
Problem: GoogleSpreadsheets only alows three arguments with IF. But I do not know how to structure it otherwise...
Thankful for any suggestion!
Cheers,
Matt
This might be what you are looking for, ties the start week/ end week and year together for comparison.
=IF(AND(
(K$1&TEXT(K$2;"00")) >=(RIGHT($E$3;4)&TEXT($F$3;"00"));
(K$1&TEXT(K$2;"00")) <=(RIGHT($G$3;4)&TEXT($H$3;"00")))
;1;0)
I have a row setup like so:
<div class="row">
<div class="small-12 small-push-12 large-6 columns">
<!-- Content -->
</div>
<div class="small-12 small-pull-12 large-6 columns">
<!-- Content -->
</div>
</div>
Basically, I want the second column to be pulled before the first column when the screen is small, but keep it at proper order for large screens.
What am I doing wrong here? The document reflows like it always does.
Also, I do realize I can just reverse the order in the HTML itself and it'll work, but just curious if it's possible to make it work this way.
Your question prompted me to look at Foundation’s SCSS source code to see how the grid was implemented since like you I was having trouble getting my columns to shift as I wanted. In the time spent finding an answer I’ve now forgotten what I’d needed to find out originally but having gained insight as to how the grid works I know it will now be much easier to use and I’ll feel more confident that my work is correct. I’ll try to provide some of that insight here.
The simple answer to your question is, No, you can’t make Foundation swap a block of columns in the way you’ve done it. [I’ll call them columns as opposed to grid columns that refer to Foundation’s (usually 12) base columns.] Assuming it might have worked I’d say that the code you wrote would be correct. The actual reason it fails to work is because *there are no 12 column push or pull classes defined in Foundation for small, medium, large or any media size range." Thus, when the media screen size is "small" (in your case) the push and pull classes are silently ignored by CSS and you end up with two columns on two rows in the original order.
The general rule is that you can’t push or pull columns from one row to another; you can only move them along the same row. After seeing that I reread your question which began, "I have a row setup like so…" But that’s not true since the intention is to produce two rows. That one can create multiple rows with one column(s) definition is, I think, just a side effect of how CSS floats work.
Here’s what happens (excuse me for anthropomorphizing the CSS attributes…it's just easier to talk about them as "doing something to something" and often seems to be the best way to clearly understand what's happening):
For every column you specify, it’s width is determined using the current grid column width (plus some "gutter" for spacing) multiplied by the specified number of grid columns from the class name used (large-6, small-2, etc.). Since they have been given the float attribute they are then lined up one against the next starting at the beginning of the row. If there is not enough room on one row to display all the columns the line of columns is split and continues on the "line" below, and so on; those that don't fit are moved to the next row (and so on). Without other classes specified each column will be displayed in this initial position. This is how multiple rows can be formed from one column(s) definition.
When you add push and pull classes the CSS right and left attributes are added to those described above. The offset determined by the specified push or pull class is used to calculate the relative shift which is used to reorder columns if necessary. But the left and right CSS attributes know nothing about where these column-blocks have come from or that there is any row but the one they work on. So each column is moved along the line where it was initially placed and if the amount of shift moves the column outside of the row boundary it will be placed (or partially placed) to the left or right of the row (and possibly out of sight). That’s the reason that your proposed process won't work in general though in your case, as mentioned above, you used a class that wasn't defined (small-push-12) and got a different effect. If you play around a bit with the lower numbered push and pull classes (1 through 11) you can see more clearly how the columns are pushed part way off a row. (the way it is currently done by Foundation, at least) and why I now think (since at first I thought it might be possible myself) that being able to create multiple rows in the base case is a beneficial "side effect" of how CSS happens to work.
For anyone wanting to improve their CSS understanding or who uses Foundation, I highly recommend taking some time to work through one or more of the features that Zurb has implemented in the framework. I find that the SCSS definitions are well designed and cleanly coded (though perhaps not to everyone’s liking since, IMHO, CSS coding opinions seem to be as inflammatory as Mac/Windows opinions and often evoke the same fervor when expressed).
Found the solution in a separate thread! Start with the order you want in the source for mobile, then use the push/pull classes to bend it around for the LARGER sizes. In other words, approach it from the opposite end.
Change order for Foundation small-12 column