Front End, HTML/CSS, Uncategorized

Flexbox CSS Part (8) – Arabic || flex-grow

  • The css flexbox makes it easier to design flexible responsive layout structure without using float or positioning.
  • The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the parent container.
  • Default value is 0

Continue reading “Flexbox CSS Part (8) – Arabic || flex-grow”

Front End, HTML/CSS, Uncategorized

Flexbox CSS Part (7) – Arabic || order

  • The css flexbox makes it easier to design flexible responsive layout structure without using float or positioning.
  • The order CSS property specifies the order used to layout the items in the container.
  • The default value is zero (0).

Continue reading “Flexbox CSS Part (7) – Arabic || order”

Front End, HTML/CSS, Uncategorized

Flexbox CSS Part (6) – Arabic || align-content

 

  • The css flexbox makes it easier to design flexible responsive layout structure without using float or positioning.
  • It is similar to align-items, but it aligns flex lines.
  • It should be used with wrapping.
  • align content values are: – stretch (default) – flex-start – flext-end – center – space-between – space around

Continue reading “Flexbox CSS Part (6) – Arabic || align-content”

Front End, HTML/CSS, Uncategorized

Flexbox CSS Part (5) || align-itmes: baseline

  • The css flexbox makes it easier to design flexible responsive layout structure without using float or positioning.
  • The align-items property specifies the default alignment for items inside the flexible container.
  • align items values are: – stretch (default) – flex-start – flex-end – center – baseline

Continue reading “Flexbox CSS Part (5) || align-itmes: baseline”

Front End, HTML/CSS, Uncategorized

Flexbox CSS – Part (4) || align-items

  • The css flexbox makes it easier to design flexible responsive layout structure without using float or positioning.
  • The align-items property specifies the default alignment for items inside the flexible container.
  • align items values are: – stretch (default) – flex-start – flex-end – center – baseline

Continue reading “Flexbox CSS – Part (4) || align-items”

Front End, HTML/CSS, Uncategorized

Flexbox CSS Part (1) – display, flex-direction, justify-content

  • The flexible box makes it easier to design flexible responsive layout structure without using float or positioning.
  • The parent container should take flex display property, display:flex.
  • flex-direction: to define the stack of the flex items.
  • flext direction could be: row, row-reverse, column, column-reverse.
    1. Row: the default (LTR).
    2. Row-reverse: (RTL).
    3. column: Top to bottom (TTB).
    4. column-reverse: (BTT).

Continue reading “Flexbox CSS Part (1) – display, flex-direction, justify-content”

Front End, IT, javascript, Uncategorized

(17) AngularJs Sorting by Column Header

AngularJs Tutorial
AngularJs Tutorial
  • The data will be sorted when clicking on one of the columns headers.
  • The user should be able to sort in both the directions (ascending and descending).
  • Clicking on the column for the first time will sort the data in ascending order.
  • on the same column again will sort data in descending order.
  • An arrow (up/down) will be displayed next to the column showing the sort column and direction.

Continue reading “(17) AngularJs Sorting by Column Header”

Front End, IT, javascript, Uncategorized

(16) AngularJs Sorting using DropDown List

AngularJs Tutorial
AngularJs Tutorial
  • The data will be sorted according to the selected option in the ddl.
  • The orderBy filter allow the array sorting.
  • Some columns will be sorted descending and others will be sorted ascending, as:
  • minus sign (-) allows the descending sorting.
  • plus sign (+) allows the ascending sorting. It is the default.

 

Related posts:

(15) AngularJs Filters Example (Uppercase, Lowercase, and Date)

(14) What are the AngularJs Filters?

(13) AngularJs ng-repeat example (using module and controller)