Is there a way to have a list of elements always clear the row above them without putting CSS on individual li elements?
Situation: Im building a site that's using the Business Catalyst CMS. I have a list of products which are built using lists. It all works fine except when you move the screen in and one of the product headings goes over three lines it makes the row under jump and only show one or two products instead of three.
See sample:
http://sklzaustralia.businesscatalyst.com/baseball-softball
Move the screen in until there is a gap on one of the rows. This gap is what I'm trying to avoid.
The products are imported with a module so I can add css to individual list items. It needs to be a general or solution.
I also know if I add a height to the it will solve this but that makes the responsive aspect messy as I need to pick a height that works across all screen sizes. So if its right for large screen, the gap is too large for small screen layout.
An ideas on fixing this problem...?
I ran into the same issue with an ecommerce site where product titles ranged from 2 words to 6 or more, and also included a short description underneath the product image.
You need to evaluate the elements within the
<div class="shop-product-small clear">
...and unfortunately define heights and min-heights to make sure each product div is always the same height. Play with font-size as well at a smaller #media width.
Set the width for li to be 50% when it falls below a breakpoint (when the gap appears).
Or just add .col-xs-6 to your li if you are using bootstrap.
Related
How can I create simple image carousel. Let's say I have GridView with two rows and one column. I want to create image carousel in upper row. Can I do that with ScrollView. Any sugestions?
You have the right idea. You can use gridLayout just to keep your sizing in line, and using scrollView is perfectly fine.
I do not know exactly how you imagine such a carousel working, but one option to be aware of in scrollview is the 'paginated' option. This allows you to easily define target positions for scrollview to stop and snap to, similar to a scroll picker on native. Or if you want the sources definition..
* #param {Boolean} [paginated=false] A paginated scrollview will scroll through items discretely
* rather than continously.
The next thing you may want to think about is how a carousel goes round and round and never reaches an end like scrollview would. There is no option for this by default, but I found a way it can easily be done. It may be a bit trickier with smaller images, but here is an example I did for a infinite panorama.
Transforming Panoramas for Virtual Tours with famo.us, has it been done?
The trick was to use a second duplicate image trailing the scrollview and when scrollview was in the right position, we could jump it back to the beginning, with no visual evidence to the user.
Here is the live example..
http://higherorderhuman.com/examples/infinite.html
Hope this helps you get started!
I have a page that creates a table dynamically. Sometimes the table can be very wide, but not very tall. When converting to PDF, I would like it to span multiple pages, instead of shrinking down to fit on a single page, which is what it does now. When shrunk, it is so small, the text is pretty much unreadable.
So, basically I need to somehow make a 'horizontal' page break if that makes any sense. Any ideas?
Add the page-break-before:always style on the elements where you want to start with a new page.
I am new to wp7. I want to add three images to my page. But not on a single page. It should be on three pages. When i move the image, at that time, the image is changed and i am on the secong page keeping my header and footer fixed.
So how to add three image in one page?
Why do you want to use scroll-viewer?
1) Try using a pivot control without any pivot headers. Add your images to three different pivot items. In pivot the header and footer you specify will remain fixed, only the content will change.
2) Also you can create a single page. Add three images to a list. Bind it to your image control. On flick gesture, change the image URL hence changing the image being displayed but keeping every thing else constant.
I gave you two approaches, try using any one of them which suits you the best. For further information try studying pivots and flick gestures.
We want to use slickgrid to overlay clunky and inflexible tables of data on hundreds of existing web pages built from business forms. Some tables are for display only, others are for user input/update. Thus, the real estate (and column/row counts) is set in concrete. To avoid conflict with the parent page styles, the grid is placed in an iframe. The approach has to take into account a caption bar, optional filter bar on inquiry-only tables, column header bar, and footing pager bar (only if required). Getting the ovarall height correct is the most difficult. It looks like the available tools are:
the geometry of the iframe
the geometry of the grid-container div in the iframe
options.rowHeight
options.headerRowHeight (if inquiry)
line-height css style
Font-size css style.
It seems that there is some mysterious arithmetic going on to calculate the number of rows displayed, the canvas size and the viewport size; and setting some of these items directly with script breaks the grid.
As a simple example, assume the height available is H pixels and must contain R rows of data. Are there any formulas or guidelines that give values to the items listed above? Or must we struggle with trial and error to make a good fit?
I have a series of images, all of which have width:400px, but have varying heights. They are in the following container:
#content {width:808px;margin:0 auto;margin-top:100px}
All the ODD images have the following code:
{float:left;clear:left;margin:2px}
All the EVEN images have the following code:
{float:right;clear:right;margin:2px}
In theory shouldn't every ODD image be on the left, stacked ontop of each other and every EVEN image should be on the right stacked on top of each other.
Instead I get this:
It's as though some of the images on the right are clear:left or clear:both, right?
Any thoughts?
Thanks
take, for example, this code:
<div>Airplane</div>
<div style="float: left;">Symba</div><div style="float:right;">Chewbacca(?)</div>
you wouldn't expect the top of Chewbacca(?) to line up with the top of Airplane! it will line up with the top of Symba.
Symba has float: left, so is forced below the Airplane. whether Airplane happens to be floating or not doesn't matter anymore.
I've seen layouts that do what you want, by applying float:left to ALL the elements, and then using some Javascript to tidy up the white space once the page is done loading (float: left on its own won't do it, as you may have already noticed). I don't like that solution myself, but the only other alternative I can think of is to pre-sort the images in to two columns, and split them accordingly:
<div style="float:left">
<div>Myst(?)</div>
<div>Airplane</div>
<div>Symba</div>
</div>
<div style="float:right">
<div>Coastline</div>
<div>Painter</div>
<div>Chewbacca(?)</div>
</div>
but if you want the columns to always be equal height, that may not work for you, unless you know the heights of the images in advance, and can put things into columns based on that. (loop over, keeping a tally of the current height, and always adding to the shorter column; something like that.)