Let's say I have three divs: a, b and c, that share a common wrapper div and that I'd like to align as a triptych.
Is it possible to have either b or c have a fixed width (imagine a sidebar with nav), while the other two expand fluidly? Note that the source order matters (a, b, c order). A max-width (rather than fixed) could work fine as well, as long as it supports fluid expansion of the other two divs.
Yes you can! Check out this SassMeister showing fixed and fluid columns.
Now, there are a couple of caveats to this. First, you need fixed width gutters as you can't have gutters in proportion to fluid columns if not all columns are fluid. Second, you need to be using the calc output style from Singularity Extras. This means your columns will be output using CSS3's calc that, while widely available, does require a fallback for browsers that do not support it. Other than that, the calc output style works exactly like the isolation output style.
Last year when the calc output style was introduced, I wrote a blog post titled Bulletproof Combo Fixed and Fluid Grids with CSS Calc explaining in detail about using calc to create fixed and fluid grids and introducing it to Singularity.
Related
Within an Ace editor, it is easy to find the number of lines in the edited document with the following:
myEditor.session.getLength();
But languages like JSON or XML can be "folded." That is, children properties or elements can be collapsed so only one single line is displayed for the parent.
Is there a way to get the number of lines actually displayed? Something like the following:
myEditor.session.getVisibleLength();
Note: the ultimate goal is to have an editor that adapts its height on the page to the content it displays (if lines are collapsed, then it should shrink, and if collapsed lines are expanded again, it should increase its height.)
UPDATE: After a user's response, I use the following. This is not the answer to the specific question I asked above, but rather the perfect answer to what I was trying to achieve overall:
const myEditor = ace.edit(elem, {minLines: 5, maxLines: 50});
To automatically change the height of the editor use maxLines option, but don't set it to a very large value as performance depends on the number of displayed lines.
Is it possible to display fractions in a gtk widget like GtkTextView, presumably via using pango markup? I'm looking for something which is possible to edit by a user, so e.g. a pixbuf with a rendered png file is not ok.
Also I need arbitrarily long enumerators and denominators so
<sup>a</sup>/<sub>b</sub>
is not acceptable.
No, that's not possible. I don't know what your use case is, but to make an editable horizontal fraction (as in $\frac{a}{b}$) I would suggest doing something like putting two GtkEntry widgets without borders into a grid, and draw a line between them (or use a GtkSeparator.) You could even embed this grid inside a GtkTextView if you needed it to be inline.
ahoy all,
i have a simple example that mixes float-span and grid-span mixins within the same grid context (i.e. the same number of columns in the same row)
http://sassbin.com/gist/7812502/
as you can see, i have 3 items that i want to space out evenly in a row. i use float-span with first and last options on items 1 and 3 to make them sit at the beginning and end of the row respectively, and this works as expected. for the middle item, which i want centered, i assumed i could use grid-span with the correct location to have the 2nd item in the middle. however, what is happening is that the counting of location for grid-span is started after the column taken up by the first floated item. is this expected behavior? in other words, is it allowable to mix float-span and grid-span in the same grid context/row? and if not, what is the preferred way in Singularity for accomplishing the same thing?
i have been searching the documentation wiki, in particular the section on spanning the grid, but have found no statements either way. and the demos do not seem to be using float-span and grid-span together.
thanks as usual for Singularity and for any help.
peace
PS. i have already tried using the isolation-span mixin in place of grid-span with the same results.
It is not advisable to mix output styles like float and isolation in the same grid. You should pick either isolation or floats and stick with it.
Here is your sassbin tweaked a bit: http://sassbin.com/gist/7815953/
I'm using singularitygs as my grid system and am really like the flexibility but I have come across a fairly unique situation and I'm not sure if singularity (or any other grid system) addresses
I have a row that span the entire column width, that breaks up the header portion and the content portion of the document. There is an element, div.b, that sits within above the full column bars next to div.a in larger layout. But on a medium sized layout and below, that element falls below the full span row. Here is the source order and the desired output, showed using a 10 column layout for simplicity.
Source Order
div.a
div.b
div.c
div.d
div.e
div.f
div.g
div.h
Large Layout
Medium Layout
Thanks in advance for any help and ++ to the creators of the grid system
Interesting use case. Honestly it’s going to be pretty hard until CSS grid layout comes out. While Singularity can handle any order horizontally, the vertical reordering like "D" and "G" stacked is going to be tricky. There might be a clever use of floats to get this working but it will probably be more hand manipulation of elements than pure Singularity magic.
I need to plot and display several jpeg images in a single combined display (or canvas?). For example, suppose I have images {a,b,c,d}.jpg, each of different size, and I would like to plot them on one page in a 2x2 grid. It would be also nice to be able to set a title for each subplot.
I've been thoroughly looking for a solution, but couldn't find out how to do it, so any ideas would really help. I would preferably use a solution that is based on the EBImage package.
There are two ways how to arrange several plots with base graph functions, namely par(mfrow=c(rows,columns)) (substitute rows and columns with integers) and layout(mat) where mat is a matrix like matrix(c(1,2,3,4)).
For further info see ?par, ?layout, and especially Quick-R: Combining Plots.
However, as your question is about images I don't know if it helps you at all. If not, I am sorry for misinterpreting your question.
To add to Henriks solution, a rather convenient way of using the par() function is:
jpeg(filename="somefile.jpg")
op <- par(mfrow=c(2,2)
#plot the plots you want
par(op)
dev.off()
This way, you put the parameters back to the old state after you ran the code. Be aware of the fact this is NOT true if one of the plots gave an error.
Be aware of the fact that R always put the plots in the same order. Using mfrow fills the grid row by row. If you use mfcol instead of mfrow in the code, you fill up column by column.
Layout is a whole different story. Here you can define in which order the plots have to be placed. So layout(matrix(1:4,nrow=2) does the same as par(mfcol=c(2,2)). But layout(matrix(c(1,4,3,2),ncol=2)) places the first plot lefttop, the next one rightbottom, the third one righttop, and the last one leftbottom.
Every plot is completely independent, so the titles you specify using the option main are printed as well. If you want to have more flexibility, you should take a look at lattice plots.
If you do not want the images in a regular grid (the different sizes could imply this), then you might consider using the subplot function from the TeachingDemos package. The last example in the help page shows using an image as a plotting character, just modify to use your different images and sizes/locations.
The ms.image function (same package) used with my.symbols is another possibility.