Search Posts

Category: flexbox

Table with Gap in Material and Angularjs

I am trying to make a table with a gap and a scroll wheel in Material and Angularjs. The data is not fixed and will change dinamically. I tried to make one with flex, css grid and a normal tables. The problem with flex was that when I set the flex elements with the properties: flex-shrink: 0; flex-basis: 0; flex-grow: 1; the table rows did not align. When I set a flex propert the elements […]

flexbox table, all divs aligned but one, the borders don’t match, don’t know why

I’m doing this table using flexbox, every border matches, but as you see in the fiddle, the second table, the cell with the text: RIGHT SIDE NOT ALIGNED has the border which is not perfectly aligned with the border of the row below! Tried everything, going crazy, any solution? I did the exact same thing as for the upper table, and there it works without problems, no idea what changes between the 2 tables.. […]

angularJS using constructor in ng-repeat but css style and position won’t get applied?

I’ve been using ng-repeat to construct tables for a while now, and this is the first time I have this problem, ng-repeat=”users in [].constructor(10) track by $index” basically all the elements generated by the ng-repeat get ignored by some css (borders of the container) and the DIVS below, which have position relative, ignore the newly generated elements, and position themselves just after the original element that gets repeated with ng-repeat. why is that? I used […]

Calculate the number of flexbox items in a wrapped row

Is there a way to determine how many items would be laid out in a row by flexbox (wrap) given the number of elements in it, the size of the view port and the min width I’ve specified? I want to dynamically add empty boxes at the end of the flexbox layout on resize (I’ve given up on a CSS solution). Reason: I have a series of flexbox layouts with a “break” in between. – […]

AngularJS + Bootstrap flexBox incompatible?

Attempting to have “flex” as the display should line the elements together, but it does not for some odd reason. I tested my work for the past 4 days on simple syntax. Double checked for syntax error, misspellings, and broke down all css to core html elements when testing this. Decided to open a new directory to test my base knowledge of flex box, same setup with parent and children divs, and it works. The […]