In an app I am maintaining, I am implementing less (the styling language) changes for iPad form factors. I've already got media queries set up to handle this, but I have a slight problem with getting my markup to behave!
Currently, in our 'normal' form factor, we have a 3-column layout:
*---*-----*---*
| A | B | C |
*---*-----*---*
<div class="lft-side-panel">
A
</div>
<div class="ctr-panel">
B
</div>
<div class="rt-side-panel">
C
</div>
.lft-side-panel {
.span4(); // 4/16 slots wide
margin-left: 0;
left: 0;
}
.ctr-panel {
.span8();
}
.rt-panel {
.span4();
}
However, due to size constraints on these smaller form factors, I am trying for a 2-column setup as such:
*---*---------*
| A | |
*---* B |
| C | |
*---*---------*
<div class="lft-side-panel">
A
</div>
<div class="ctr-panel">
B
</div>
<div class="rt-side-panel">
C
</div>
/* These appear to be where the solution lies, at least as far as Less is concerned. */
.lft-side-panel,
.rt-side-panel {
left: 0;
margin-left: 0;
.span4();
}
.ctr-panel {
span12();
}
I've tried
specifying a top and left attribute with value 0 for the C div,
specifying float: left in the media query for the rt-side-pnl class
...but it leaves me with a layout like:
*---*-----*
| A | |
*---| B |
| |
*---*-----*
| C |
*---*
Question: What am I missing to achieve a 2-column layout with A and C on top of each other, and B off to the side? I have a feeling the solution is right under my nose, but I'm just not seeing it. If possible, I must preserve the structure of the markup; if I must re-order things slightly, that can work too.
Check out this fiddle http://jsfiddle.net/s756e/3/
I set .rt-side-panel, .lft-side-panel { float:left; width=25%;} (needed to convert your 4 of 16 bootstrap to percent and added some demo colors and heights) and set .ctr-panel {float:right; width=75%;}
This seems to be, what you are looking for. Right!?
Related
I want to preserve white space to keep every column align properly.
But sidebar auto remove any extra space, could someone give me some advise on this.
Google Sidebar
function Test1() {
var lineBrk = "<br />"
var aValues = "```"+lineBrk+
"BLB001| APPLE | O/B | 100.00"+lineBrk+
"AG010 | ORANGE| O/B | 125.25"+lineBrk+
"B123 | KIWI | O/B | 95.00"+lineBrk+
"```"
// Display a modal dialog box with custom HtmlService content.
var htmlOutput = HtmlService
.createHtmlOutput(aValues);
SpreadsheetApp.getUi().showSidebar(htmlOutput);
}
Sidebars are created using the Google Apps Script HTML service, that means that they use html and that is why Serge included a link to a question regarding the use of . Another alternative is to enclose the text lines on <pre> tags.
Below is an adaptation of the code that builds the html output to work on the stack snippet.
var lineBrk = "</pre><br />"
var aValues =
"<pre>BLB001| APPLE | O/B | 100.00"+lineBrk+
"<pre>AG010 | ORANGE| O/B | 125.25"+lineBrk+
"<pre>B123 | KIWI | O/B | 95.00"+lineBrk;
document.write(aValues);
If you're looking to display plaintext, Ruben's answer above would work. If you want some kind of formatting, using simple HTML layout styles will help.
You could interpret your table example as the following HTML:
<div id="table">
<div class="row">
<div class="col">BLB001</div>
<div class="col">Apple</div>
<div class="col">0/B</div>
<div class="col">100.00</div>
</div>
<div class="row">
<div class="col">AG010</div>
<div class="col">Orange</div>
<div class="col">0/B</div>
<div class="col">125.25</div>
</div>
<div class="row">
<div class="col">B123</div>
<div class="col">Kiwi</div>
<div class="col">0/B</div>
<div class="col">95.00</div>
</div>
</div>
Then, either in a style tag or a linked CSS file, set the display:
#table {
display: table;
table-layout:fixed;
width: 300px; /* This could be any width you'd like */
font-family:monospace;
}
.row { display: table-row; }
.col { display: table-cell; }
You can also set borders, if you want them. The nice thing about using this method is that you can populate any number of rows or cells using an apps script loop if your data is variable.
Here's a very simple CodePen demo showing the layout only.
I have a figcaption that I want to position divs inside. I'm new to css and can't figure out how to do this. I know there's a float method but can't get my head around it. I've been at this for days now and am really stuck :(
Here's the fiddle(I know it doesn't work but I don't have a way of linking the external css): http://jsfiddle.net/dottsie/6uhw8c1p/
<link rel="stylesheet" type="text/css" href="css/component.css" />
<header>
<h1>Caption Hover Effects</h1>
</header>
<ul class="grid cs-style-2">
<li>
<figure>
<img src="http://www.ruggit.dk/media/catalog/product/cache/1/image/650x/040ec09b1e35df139433887a97daa66f/_/m/_mg_9746_1.jpg" alt="img04">
<figcaption>
<h3></h3>
<div> <div id="share-buttons> <div id="facebook share-buttons"></div>
<div id="twitter share-buttons"></div>
<div id="pinterest share-buttons"></div>
<div id="google_plus share-buttons"></div>
</div>
</figcaption>
</figure>
</li>
The first thing to notice is that you have used id's for your buttons. ID attributes are normally unique, it looks as though you meant class instead though owing to your CSS calling them by . instead of #
<div id="facebook">
// This is accessed in css by #facebook{float:left}
<div class="facebook">
// This is accessed in css by .facebook{float:left}
If you are ever going to have more than one of an item on a page it is a class of item. Remember ID is unique.
Following that you can use float to get your objects to try and position themselves as far to one side as possible:
_________________________________________________
| A | B | C | D | |
|____|____|____|____| |
|_______________________________________________|
Here A B C and D are all floated left float:left, and push up as tight as the can.
_________________________________________________
| | Z | Y | X | W |
| |____|____|____|____|
|_______________________________________________|
Here W X Y and Z are all floated right float:right, and push up as tight as the can.
If you want them stacked vertically we can use clear. Clear stops there from being any floated items that are on the side that is stated, the upshot of that is that it will push things down below if its not allowed to have something on that side:
_________________________________________________
| A | |
|____| | |
| B | <-' |
|____| | |
| c | <-' |
|____| | |
| D | <-' |
|____| |
| |
|_______________________________________________|
So in this case using clear:left on B forces it onto a new line below, clearing C forces D down etc. We don't want anything unexpected happening with wrapping so it is worth clearing both sides just for completeness so using clear:both will ensure that no two floated buttons are on the same line.
When your code has been condensed, it would look like this.
<header>
<h1>Caption Hover Effects</h1>
</header>
<ul class="grid cs-style-2">
<li>
<figure>
<img src="http://domain/imagefile.jpc"/>
<figcaption>
<div>
<div class="facebook share-buttons"></div>
<div class="twitter share-buttons"></div>
<div class="pinterest share-buttons"></div>
<div class="google_plus share-buttons"></div>
</div>
</figcaption>
</figure>
</li>
</ul>
With this CSS for all share-buttons
.share-buttons{
float:left;
clear:both;
height:32px;
padding:2px;
width:32px;
}
and the individual buttons as such
.share-buttons.facebook {
background: url('images/facebook.png') no-repeat;
}
.share-buttons.twitter {
background: url('images/twitter.png') no-repeat;
}
.share-buttons.pinterest {
background: url('images/pinterest.png') no-repeat;
}
.share-buttons.google_plus {
background: url('images/google_plus.png') no-repeat;
}
First off, ids need to be unique, so I would change "share-buttons" to a class instead. Next, I see that you have three divs for social media icons, each with "share-buttons", but they are also wrapped in a wrapper with the same "share-buttons". I would remove that wrapper since you already have a wrapper div around all of that. Finally, give the newly created class "share-buttons" a "float: left;" and your images should align themselves like you're looking for. Also, make sure you clear your float "clear:both;" after this div.
I'm going to standardize some picture galleries at some non-public wiki using pure templates. The legacy wiki picture/thumbnail galleries are specified with a lot of boilerplate code (it renders a gallery of pictures with thumbnails underneath):
<center>
<gallery widths="120px" heights="170px" perrow="5">
Image:Pic1.jpg|<center>1</center>
Image:Pic2.jpg|<center>2</center>
Image:Pic3.jpg|<center>3</center>
Image:Pic4.jpg|<center>4</center>
Image:Pic5.jpg|<center>5</center>
Image:Pic6.jpg|<center>6</center>
Image:Pic7.jpg|<center>7</center>
</gallery>
</center>
This is scary. There is an idea of re-implementing the above code with the following template:
{{Photos
| Picture1.jpg = 1
| Picture2.jpg = 2
| Picture3.jpg = 3
| Picture4.jpg = 4
| Picture5.jpg = 5
| Picture6.jpg = 6
| Picture7.jpg = 7
|}}
The template is mostly as follows:
... var definitions, etc ...
<center>
{{#tag:gallery
| {{#forargs: | K | V |
Image:{{#var: K}} {{!}} <center>'' {{#var: V}} ''</center>
}}
| widths = {{#var:WIDTHS}}
| heights = {{#var:HEIGHTS}}
| perrow = {{#var:PERROW}}
}}
</center>
But the problem is that only the first image is rendered, and the whole rest Picture 2... Picture 7 is rendered under the first image thumbnail. And I suspect that the reason possibly is a missing new line character so the gallery tag may be rendered like this producing wrong 1-picture gallery:
<gallery widths="120px" heights="170px" perrow="5">
Image:Pic1.jpg|<center>1</center>Image:Pic2.jpg|<center>2</center>Image:Pic3.jpg|<center>3</center>...
It's only an assumption, but I guess it may have strong background. So the question is:
is there any way of forcing a new line break so the <gallery> tag could be rendered as expected?
You can force a newline by adding <nowiki />like this:
{{#tag:gallery
| {{#forargs: | K | V |<nowiki />
Image:{{#var: K}} {{!}} <center>'' {{#var: V}} ''</center>
}}
| widths = {{#var:WIDTHS}}
| heights = {{#var:HEIGHTS}}
| perrow = {{#var:PERROW}}
}}
I have this markup:
<div class="wrapper">
<article>A</article>
<article>B</article>
<article>C</article>
<article>D</article>
<article>E</article>
<article>F</article>
<article>G</article>
<article>H</article>
</div>
which is floated and forms a two-column list. Each article has a variable height due to its contents.
What I want is each pair should have the same height based on which of the two has the tallest height. I have found variations of equalHeights plugin but all of them force equal heights to all elements. I just need each pair to be the same height, not all elements. Is this possible or are there any existing plugin for this?
Note: Can't change the article markup because it's outputted by the CMS.
My expected output:
|-------|---------|
| A | B |
|-------|---------|
| | |
| C | D |
| | |
| | |
| | |
|-------|---------|
| | |
| E | F |
| | |
|-------|---------|
Here is a little bit of code that will set the height to the max height, splitting a block of articles by a column count, rather than any other structural method.
Demo: http://jsfiddle.net/bgWaw/
var articles = $('.wrapper article');
var columns = 2;
var cIndex = 0;
while (cIndex < articles.size()) {
var cMaxHeight = 0;
for (cColumn = 0; cColumn < columns; cColumn++) {
var cArticle = articles.eq(cIndex + cColumn);
if (cArticle.size() > 0) {
cMaxHeight = (cArticle.height() > cMaxHeight ? cArticle.height() : cMaxHeight);
}
}
articles.slice(cIndex, cIndex + columns).height(cMaxHeight);
cIndex += columns;
}
This could easily be turned in to a plugin if needed. Just a matter of making it a function in the $.fn object and using this rather than articles and passing in columns as a parameter to the function.
jQuery Plugin Version Demo: http://jsfiddle.net/bgWaw/2/
$.fn.maxSliceHeight = function(columns) {
var cIndex = 0;
while (cIndex < this.size()) {
var cMaxHeight = 0;
for (cColumn = 0; cColumn < columns; cColumn++) {
var cElem = this.eq(cIndex + cColumn);
if (cElem.size() > 0) {
cMaxHeight = (cElem.height() > cMaxHeight ? cElem.height() : cMaxHeight);
}
}
this.slice(cIndex, cIndex + columns).height(cMaxHeight);
cIndex += columns;
}
return this;
}
Example call:
$('.wrapper article').maxSliceHeight(2);
Contrary to my comment here is another method you can use:
Turn that markup into rows:
<div class="row">
<article>A</article>
<article>B</article>
</div>
<div class="row">
<article>C</article>
<article>D</article>
</div>
<div class="row">
<article>E</article>
<article>F</article>
</div>
Float the <article> elements again, but make sure each .row div has clear: both in the CSS.
That way every "row" will be the same height has the tallest content within it.
Separating by divs is a good solution if you really want always two columns, but I assume that you might want to change to three columns if the browser is wide enough. Have you looked at isotope? http://isotope.metafizzy.co/
I have found a solution for this without changing the markup: http://css-tricks.com/equal-height-blocks-in-rows/
I have a table an done column is just checkboxes.
In the <th> I have a prompt "include?" and would now like to add some JS for a checkbox in that <th>, with maybe some "all/none" text.
Bad ascii art follows:
------------ ------------
| include? | | include? |
| [] | | [] all |
------------ ------------
| [] | or, maybe | [] |
------------ ------------
| [] | | [] |
------------ ------------
in either case, what style should I use to centre that checkbox?
Easiest is with text-align:center;
http://jsfiddle.net/jasongennaro/rhUjP/1/
EDIT
Just saw your other requirements, namely I need the text to be left aligned, but the checkbox to be centered
In that case, put the input in a span
span{display:inline-block; text-align:center; width:100px;}
Have the width match the width of the th.
http://jsfiddle.net/jasongennaro/rhUjP/3/
.checkbox {
display: block;
margin: auto;
}
Or you can set:
th {
text-align: center;
}
And specify which class or id of <th> to include if you want the entire <th> to be centered, like: http://jsfiddle.net/minitech/pJxgc/.
try this one jsFiddle
<table>
<tbody>
<tr><th><input type="checkbox" class="checkbox" /> Hello</th></tr>
<tr><td>My Table Data!</td></tr>
</tbody>
</table>
th {
text-align: center;
}
Do you mean something like this fiddle?