Databases
StackOverflow2013
Postsdbo
POImplementing weighted flexible layout with CSS
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POImplementing weighted flexible layout with CSS
    primarykey
    data
    text
    <p>Please take a look at <a href="http://jsfiddle.net/arasbm/chREp/2/" rel="nofollow">this jsFiddle</a> and press the only button to fill the list up. As you can see <code>DIV</code> elements inside the list are resized to fill the parent contained. This code does exactly what I want to do, but I think the way I implement this is too complex for such a seemingly simple task. Here is the code for the algorithm to assign height to inner elements:</p> <pre><code>fill = function() { //Loop through all elements once to get total weight var totalWeight = 0; var totalHeight = $("#container").height() - 15; //need a little extra empty space at the buttom $(".list").each(function(i) { totalWeight += parseInt($(this).attr('weight')); totalHeight -= parseInt($(this).css('margin')); }); //Loop though the element a second time to set the relative height $(".list").each(function(i) { var element = $(this); element.css("height", (element.attr("weight") / totalWeight) * totalHeight); }); } </code></pre> <p>My question is, is the best we can do? Are there any other - hopefully faster or more elegant -- ways to achieve this functionality with reasonable cross-browser compatibility? I need to support newer Firefox, Chrome, and Safari only. I was reading about flex-box <a href="http://css-tricks.com/old-flexbox-and-new-flexbox/" rel="nofollow">here</a> and looking at its <a href="http://www.w3.org/TR/css3-flexbox/" rel="nofollow">promising specs</a>, but it does not look like flex-box can do weighted flexible layout consistently across browsers. If I am wrong, please show me a simple example of how this could be achieved.</p> <p>This type of weighted flexible linear layout is not uncommon, for example it is available in Android SDK as one of the layout options. What is the recommended way to resize elements to fill their parent container, relative to a weight value assigned to them? A pure CSS solution would be wonderful, if at all possible.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAras
    1. USAras
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POImplementing weighted flexible layout with CSS
      1. This table or related slice is empty.
      1. VTUpMod
    1. COFlexbox is usable. You might have to write a few repetitive rules for the new and the old styles, but it works.
      singulars
      1. POImplementing weighted flexible layout with CSS
      1. USBlender
    2. COI couldnt find a good example of how to do this with flebox. Can you provide a flexbox solution based on my jsFiddle above?
      singulars
      1. POImplementing weighted flexible layout with CSS
      1. USAras
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload