I am currently developing a page for mobile.
It requires a form that divides into two columns in landscape mode. Above the form I would like to place two divs where both have different heights.
I would like to adjust each column's y-position according to those divs.
Can I use CSS3-columns in this scenario?
The technologies I can use are HTML, SASS, JQuery Mobile and Javascript.
Related
I'm looking recommendations for something similar to a table of four columns that would collapse into a dropdown on mobile devices. My original code is a bootstrap table but the table at it's smallest size is still too big for mobile devices. I'm thinking I could collapse into a drop down because really all that needs to be seen on mobile devices is the first row which contains a clickable link to an expanded detail view.
The simplest approach may be to use two different controls - a table for bigger screens and a dropdown for smaller screens - and include both in your page.
Then hide the control that is not required based on the screen size. Since you're using Bootstrap already, look into its responsive utilities. You will find predefined CSS classes like .hidden-sm or .hidden-lg that help you with that.
I have to render up to 1500 row using jquery plugin Datatables and twitter bootstrap css. In each row, there is a table that can contain up to 50 row.
Using chrome developper tools profiler and testing, the rendering is a real problem. For example, i have for 250 items displayed 219861 selector match for .table th, .table td.
How can i optimize this ?
I retrieve twitter bootstrap from bootstrapcdn
I am a framework developer and I can share some of things I have faced and remember at this moment
When writing table inside table layout, don't use
'box-sizing:border-box'
Instead use 'content-box', otherwise it will create gaps between rows, not columns if you have specified or not specified borders. No style will help you to remove that.. This is very important while implementing nested table layout
Even if you are using DIV with table layout, take care 'max-width' does not work properly in some mozilla versions, for that you may have to maintain a "wrapper" DIV that is occupying the 100% width and 100% height of cell.
Maintain block lever wrappers inside cells and apply skins to it if it is table, because hover and focus will not apply properly.. Example: half filled hover skin observed in some modern browsers as well.
And while embedding those many elements dynamically instead of creating elements on fly and appending, prepare HTML string and append it, it does perform very well.. I have observed this. But modifying html renderer might look dirty, but all we need is performance
These are some things I remember at this point of time. If I am wrong somewhere please correct me..
Suggestion If you are targeting mobile browsers as well, then go for table layout until unless you have good expertise in dealing with div layout. Floats does not work properly in some mobile devices. And tables scaled properly with media Queries in mobiles as well.
I recently had a similar situation with waaaay too much table data and had to solve it with pagination. The HTML has to pull all that info and build that massive table before it will even start to render it, thus the horrible slowness.
Finally i will limit maximum number of rows displayed to 200. No "display all the stuff" allowed.
I will try to optimize css too. Seems that there is a lot of definition of bootstrap css i don't use.
I have a table that have important information in left column and in the top row, therefore these should always be visible, I then want to have Pages in the bottem for horizontal "scrolling" and a normal scroll for vertical scrolling.
Is there a Jquery script that supports this?
It would look something like this
If your requirement is to display basic data then you could use one of the Jquery plugins available for this purpose like Datatables. They are very flexible and you could do most of the basic things using one of their extra's.
If your requirement is more than just displaying data. It has complex edits, custom features for each column and stuff then your better of with a custom implementation. We've build such a table which has integrated autopopulates, calendar and other completely custom features by having a div float beside the table and using Jquery to control the scroll. The header and the frozen column on the left are usually separate tables/divs themselves and are just aligned as per the table using Jquery. They work quite well for IE 8+ and other browsers.
Does this work? (I used CSS, not jQuery, sorry)
http://jsfiddle.net/mAnQp/
Update: added pages
http://jsfiddle.net/mAnQp/3/
We're working on a web app that will deployed to mobile devices, iPad, iPhone, Android. Instead of trying to filter out user agents to display different views, I'd much rather just have my CSS change depending on the width of the screen (that's the only important thing here, really)
We've got something put together with jQuery, and I've changed the CSS for one part so that when the width shrinks, it doesn't take up too much vertical space (shown below)
How would I go about implementing something like that on buttons like this:
Ideally I should be able to change the CSS or something similar so the buttons are stacked up all in a row if width is narrow enough to knock even one button off. After that I can work on making the buttons look correct.
The simplest way to change CSS depending on the page width is to use Media Queries, which require no JavaScript.
Here's a great intro to Responsive Web Design from the guy who's considered the originator of the concept:
http://www.alistapart.com/articles/responsive-web-design/
If you want to actually change page content based on page width, you'll need something like RESS. Here's a simple script for that, but it requires cookies and doesn't adjust on screen resize, so unless you absolutely require it, media queries are a much better.
I have the following page using Dojo 1.3.1 javascript toolkit
Content Pane
HTML table two columns, N rows
Column 1 (left): text
Column 2 (right) Dojo widget (can be any, but mostly Grids, pullodwn, etc)
Problem:
When page loads, it renders Ok (the type of widget and the number per page are determined at runtime, so I cannot manage this with static CSS)
When I add rows to the grid, while it is embedded in the Table cell
<td> grid </td>
the the given row (where the grid is embedded) gets
proportionally taller and
everything below the grid disappears and there is no scroll bars on the Content Pane
to get to the the rows below.
I do not know how to solve it, I have set 100% or auto height and width on
everything around the page. That does not help.
I am wondering if my design approach is wrong and it is unsolveable.
I have read about people telling not to use Tables for layout, but
I do not know at design time the order and the type of controls that I will
be displaying.
How else can this be done?
I think the problem is that when a grid is within a Table cell,
and the grid expands, the cell expands, but the holding content pane is not aware
it so borders do not get redrawn.
You could use CSS for layout -- what is it that tables can do and CSS don't? Or, you could try using another dojo grid instead of that HTML table, depending on what you're after.
Dijit's widgets work like normal nodes as much as possible. But many widgets, especially ones that let the user define what size things are (as you can with column widths in the grid) need to know specific dimensions.
The good news is that with most of these widgets, you can get an instance of the widget, and call widget.resize();