I'm using Bootstrap 3 and I'm trying to craft up a grid of photos and captions that scales down in the number of columns as screen width gets smaller and maintains a proper height for the tallest element on a "row". I put row in quotes here. I can't use the row class because the row break changes depending upon screen width (3, 2 or 1 column per "row").
Here's a general idea of what each cell looks like in HTML.
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="..."/>
<div class="caption">...</div>
</div>
</div>
Here's what I'm seeing on screen. At medium screen width we have three photos across and it looks fine. Note the second "line" of photos starts on the far left:
When the screen is scaled down to a small size the column count properly goes to 2. However, due to the varying "cell" heights subsequent photos do not return to the leftmost spot:
Does Bootstrap have a way of maintaining a consistent height for all cells in a "row" and ensure that cells starting on a new "row" clear all of the previous cells and starts from the leftmost spot?
Related
I have converted the pdf into html using pdf2htmlEX. While selecting more than one lines, when cursor goes between two lines the selection jumps upwards. Some one please help to get this fixed.
The issue is already raised here https://github.com/coolwanglu/pdf2htmlEX/issues/62 but the solutions didn't solve the problem. Need help to fix this.
As workaround I have created this styling:
.t {
/* making selection to behave nicer when selecting text between multiple text lines (to avoid element gaps which can cause weird selection behavior) */
padding-bottom: 100px;
margin-bottom: -25px;
/* making selection to behave nicer when selecting text between multiple columns (useful for pages with 2 or more text columns) */
padding-right: 2000px;
}
Problem is that all text elements are absolute positioned and whenever mouse (during selection) leaves text element it fires mouse events on page element (which causes to select text from beginning of page to the starting point) until other text element is reached.
This styling/workaround "fills" those gaps so mouse never reaches page element.
Document should look the same.
Edit: Be aware that this solution relies on proper DOM structure (text elements are ordered). In some scenarios text can become unselectable (eg. when page contains 2 text columns and first text block is actually placed as last child in DOM).
If you get into such problem, try adjusting values to fit nicely in your document, like below:
.t {
/* making selection to behave nicer when selecting text between multiple text lines (to avoid element gaps which can cause weird selection behavior) */
padding-bottom: 40px;
margin-bottom: -10px;
/* making selection to behave nicer when selecting text between multiple columns (useful for pages with 2 or more text columns) */
padding-right: 0px;
}
Selection might jump here and there (again depends on document structure and used values), but still it will be a lot better compared to original state.
my single page bootstrap site has some simple dashed-line horizontal dividers
I've been editing/copy & pasting the code but i cant figure out how to place them where I want.
There is one I don’t want on top of the “our mattresses’ section.
id also like to place a divider between the Oisin & Lir mattresses.
http://www.homecollection.ie/darcy/
There is a block, <div class="divider"></div> that puts in the dashed lines.
If you remove it where you don't want it, they'll go away.
You can also add it where you want them to be added.
I am new to this so I hope my question is relevant and useful to others.
I have a bigcommerce store and I removed the side category display panel from the category page (I did not want a side category to dispay) but this has now left me with only 4 columns of products displayed on a page 5 columns wide. Could any kind person tell me how to add an extra column of products, so that the page width is full again, or how to alter the image size so that 4 columns of product images fills the space previously occupied by 4+sidecategory ?
To change the layout of your category page you require to do change in category.html. As per your requirement you need to remove the below code from the category.html (Any change in this file will reflect in all your category pages)
<div class="Left fleft">
%%SNIPPET_SubCategories%%
%%Panel.SideCategoryShopByPrice%%
</div>
I am saying to remove the entire side column div because you want the full page layout but you can just remove the particular snippets or panels which you don't want but with that sometime what happens is like any panel which is currently not active from admin panel but later whenever it will active then it shows the problem like your layout will display with side column having that particular panel and also your wide column (products column) with 5 products in a row.
After this you have to do change in css file named styles.css, In this file search for the .ProductList li in which you can see the width which is given in percentage to 25 so please make it to 20.
Please save the above files and you can see the changes.
Thanks.
I have several similar tables inside a page, and, using scriptaculous, I would like to drag and drop one row from one table to another. I can already do this with the code:
new Draggable('some-id').
Where 'some-id' is the table row id.
However, there is no visible drag, which is bad for user interaction...
Applying the same code to a simple div works fine, which makes me believe that it is a problem with dragging a table row.
Edit:
For example:
<table>
<tr id="drag_tr"><td>Drag</td></tr>
</table>
<div id="drag_div">some content</div>
<script type="text/javascript">
new Draggable("drag_tr")
new Draggable("drag_div")
</script>
In this code, the div will have a visual drag (i.e. the div will follow the cursor), while the table row won't, even though I know it's being dragged.
So this is a problem with <div>s vs <tr>'s
a <div> can have an absolute position which allows the div to move wherever the mouse is but a tr lives within a table and thus cannot be moved about on the page
here is a jsfiddle to illustrate (tr is green, div is red)
http://jsfiddle.net/PUHPH/
no matter what coordinates you put in for the tr it will not move from the top left corner of the page - but the div will go where ever you put it
I'm trying to implement the AQGridView in my iPad app. Please see my below image -- sorry for the strong colors, but I think it would help you understand my problem.
Each cell (the blue box) has a margin left and right (yellow color), i.e. 8 pixels. This means that the first yellow coloum has a width of 8px, the second 16px, third 16px, and the last 8px. That's maybe fine in some situations, but I would like the yellow columns to have the same width. In my example the total width of the columns are 48 (8+16+16+8) so instead I would like each column to have a width of 12 (48/4). How can I change the AQGridView to do this?
I've tried to change the frame and bounce the AQGridView, but that did not do anything.
AQGridView actually takes the container view's coordinates and creates a strictly-defined grid from that. So when you have a 768px-wide grid view, and items which are a little under 1/3 of that in width, then it will create a rigid grid in which to place these items. By default your AQGridViewCell views will be centred within each grid square (although you can call -setResizesCellWidthToFit:YES to change that); you can adjust that positioning by implementing -gridView:adjustCellFrame:withinGridCellFrame: in your AQGridViewDelegate implementation.
In your case, every single cell has a margin of 8px on its left and right sides. On the outer edges this is seen alone, but in between pairs it appears doubled to 16px (8px from each cell).
What you want, then, is for each cell to have a 6px margin, and for the grid itself to have another 6px of margin space to the left & right of all cells. There's an API for this:
#property (nonatomic, assign) CGFloat leftContentInset;
#property (nonatomic, assign) CGFloat rightContentInset;
What you should be able to do is set myGridView.leftContentInset = 6.0; and myGridView.rightContentInset = 6.0;. The grid view will then lay out cells with a content width of 756px instead of 768px, which should give you a 6px margin around each cell. Combine that with the 6px left & right content insets and you'll have a clean 12px visible margin between every cell and the outer edges of the grid view.
Side note: the content inset properties were actually created to assist with laying out a certain number of cells per row. For instance, 1024 doesn't divide by 5, so it could end up with some fairly small cells being quite spread out since the layout grid would only contain 4 items in width. However, by adding left & right content insets of 2px each, the view would use a width of 1020 to calculate its layout grid, resulting in 5 cells per row. This is, in fact, exactly what we do in the Kobo iPad app when rotated to landscape mode; without that change, our portrait-mode 4 items per row just got spread out & it looked a little too sparse.
I managed to gain more control on the horizontal and vertical spacing by using the portraitGridCellSizeForGridView method and returning a slightly large CGRect compared to the one I used to initialise the cell in the gridView:cellForItemAtIndex: method.
I hope this helps.