Say I have three columns:
Col 1 | Col 2 | Col 3
And I would like, when the screen size changes to "small", the columns to change to this:
Col 1 | Col 3
Col 2 (in it's own full-size row)
Basically, Col 3 would go onto it's own row. Now, I know I can do this with the "visiblity" classes Foundation provides, but then you'd have to duplicate the Col 2 content twice, as far as I understand it. I'd like to avoid this if possible.
Any ideas? Or am I crazy that Foundation doesn't easily allow for this? Or maybe I should just hack it together by making Col 2 positive: absolute or something and call it a day?
You're looking for something called Source Ordering. (It's towards the bottom of that docs page.)
Order your html so that the columns are defined in the order 1,3,2. Then, use the push/pull classes to swap the positions of columns 3 and 2 for when they are all in the same row.
<div class="small-6 medium-4 columns">
... Column 1 Content ...
</div>
<div class="small-6 medium-4 columns medium-push-4">
... Column 3 Content ...
</div>
<div class="small-12 medium-4 columns medium-pull-4">
... Column 2 Content ...
</div>
Related
I want to create a grid which will contain action buttons. The final layout should be something like this:
| 5 | 3 | 1 |
| 4 | 2 |
I'm discovering this but, let apart the fact that it starts from the right, I thought that the code should be as simple as this:
display: grid;
grid-template-rows: 30px 30px;
grid-auto-columns: 30px;
So we say we have 2 rows of 30px height, and that the auto-added colums will be 30px width. But actually that doesn't render as expected at all:
https://codepen.io/Flaburgan/pen/NWXggyd
What am I misunderstanding?
So, I finally found how to control that, the property I was looking for is grid-auto-flow: column dense;
Using ZURB Foundation 6, is there a way to have columns flow around a hidden column?
So for this code:
<ul class="row large-up-3">
<li class="column column-block large-4" style="display:none;">1</li>
<li class="column column-block large-4">2</li>
<li class="column column-block large-4">3</li>
<li class="column column-block large-4">4</li>
<li class="column column-block large-4">5</li>
<li class="column column-block large-4">6</li>
</ul>
It current displays like this:
2 3
4 5 6
But what I'm hoping to achieve is this:
2 3 4
5 6
Is this feasible?
I don't need to use "display: hidden" if there's another way to do this. That's just placeholder CSS code.
If not, is there a way to do this in Bootstrap or writing my own grid CSS? I can bypass Foundation for this particular content if needed.
Thank you for any help!
Figured it out. In Foundation 6, the following CSS code forces each row to start anew:
.large-up-3 > .column:nth-of-type(3n+1), .large-up-3 > .columns:nth-of-type(3n+1) {
clear: both;
}
Note: I'm using a 3-three column row, so your code will be different, depending on how many columns you have per row.
So if you change clear:both to clear:none, you can then hide columns using display:none, and the columns will automatically fill any gaps.
Why does ZURB do this?
Well, if you change this CSS code, you'll find that your columns don't line up vertically anymore, due to varying column heights.
So this CSS code forces everything to look nice.
If you remove the clear:both code and then run into a alignment problems, you might look into ZURB's "equalizer" code to set all your columns to an equal height.
https://get.foundation/sites/docs/equalizer.html
There are various ways to prettify things further if equal column heights end up looking wrong in your theme, such as using CSS overflow options, but that's getting outside the scope of this question.
I hope this helps someone!
I have this Google sheet, using sparklines to graph a change over time. I want a horizontal line at 2 different points, which cannot be done with a sparkline. So as a workaround, I have 3 different sparklines covering the same data but with different mins and maxes so I can draw a border between them.
But there are 6 parts (encircled in red) where lines are showing on the sparkline where they should not be.
What am I doing wrong?
https://docs.google.com/spreadsheets/d/1paFqu2hWAlpnzc3Ba0uo2kBfy9Inf2X6iWjQTzr_6XE/edit?usp=sharing
those are SPARKLINE glitches caused by ymax when the dataset contains the same consecutive values in the array (rows 10 & 11, 12 & 13 and 23 & 24) which are out of bound limited by ymax parameter.
an easy fix would be to slightly alter/manipulate duplicates before they hit the SPARKLINE output:
E17 cell:
=ARRAYFORMULA(SPARKLINE({A$3:A,
IF(COUNTIF(B$3:B, B$3:B)>1, B$3:B+(ROW(B$3:B)*0.0000000001), B$3:B)},
{"Ymin", 280; "Ymax", 285}))
E19 cell:
=ARRAYFORMULA(SPARKLINE({A$3:A,
IF(COUNTIF(B$3:B, B$3:B)>1, B$3:B+(ROW(B$3:B)*0.0000000001), B$3:B)},
{"Ymin", 275; "Ymax", 280}))
Please find the two sql queries which i'm executing and their results.
Code 1
Select TRIM(CHR(10) from Regexp_Replace('<html>
<body>
<div align="left"><font face="Arial"><span style="font-size:8pt">Select CPU test and run for 1 loop </span></font></div>
</body>
</html>', '<[^>]+>','')) from dual;
Result
>Select CPU test and run for 1 loop
Code 2
Select TRIM(CHR(10) from REGEXP_REPLACE(DS_DESCN,'<[^>]+>','')) from Table1 where ID = 123;
where DS_DESCN is column with datatype as CLOB and in this scenario, DS_DESCN provides the exact same string as used in Code 1(string provided below).
<html>
<body>
<div align="left"><font face="Arial"><span style="font-size:8pt">Select CPU test and run for 1 loop </span></font></div>
</body>
</html>
Result
>
>
>Select CPU test and run for 1 loop
>
>
If you watch both the results, you can see in the result of Code 2 is having line breaks at the starting and ending. Why this is happening and what changes should i make to Code 2 to give result like Code 1
I want to extract the values 4, 3 and 0 but don't know how since they do not have an attribute name
<div class="ea_default_border" style="width:230px; margin-left:20px;">
<span class="ea_default_label">Catégorie :</span>
<a href='/index.php?option=com_'>Location</a><br/>
<span class="ea_default_label">Type :</span>
<a href='/index.php?option=com_'>Maison, Villa, Propriété</a><br/>
<strong>Pièces : </strong>4<br/>
<strong>Chambres : </strong>3<br/>
<strong>SDE/Salle de bains : </strong>0
</div>
I want the desired result to be
4
3
0
and
Pièces : 4
Chambres : 3
SDE/Salle de bains : 0
I have tried several guess that isn't giving the desired result. Thanks in advance for your answers
EDIT: I tried the following xpaths
//div[#class="ea_default_border"]/br/text() <== This gets me nothing as the numbers aren't in a tag.
//div[#class="ea_default_border"]/strong/text() <=== This gets me the titles only.
try
//*[#class='ea_default_border']/child::text()
for your second requirement, try this:
concat(//*[#class='ea_default_border']/strong/text(), //*[#class='ea_default_border']/strong/following-sibling::text()[1])