You are here

Home » API reference » Webform Layout Container 8

webform.element.layoutcontainer.css in Webform Layout Container 8 

@media (min-width: 768px) {
  .webform-layoutcontainer--horiz,
  .webform-layoutcontainer--equal {
    word-spacing: -1em; /* remove the space between inline-blocks */
  }


  .webform-layoutcontainer--horiz > *,
  .webform-layoutcontainer--equal > * {
    display: inline-block;
    vertical-align: top;
    word-spacing: normal;
    /* hack for IE 6&7 */
    zoom: 1;
    *display: inline;
  }
}

.webform-layoutcontainer--equal .webform-layoutcontainer--vert .form-item {
  float: none;
  clear: both;
  display: block;
  width: 100%;
  margin: 0;
}


.webform-layoutcontainer--vert > .form-item {
  display: block;
}


.webform-layoutcontainer--horiz > * + * {
  margin-left: 1em; /* add space between variable-width blocks */
}

.webform-layoutcontainer > .form-item input {
  max-width: 100%;
}

.webform-layoutcontainer > .form-item input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.webform-layoutcontainer > .form-item select {
  width: 100%;
}

.webform-layoutcontainer > .form-item input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]),
.webform-layoutcontainer > .form-item textarea {
  margin: 0;
}

/* one item */
.webform-layoutcontainer--equal > .webform-layoutcontainer--vert:first-child:nth-last-child(1),
.webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(1) {
  width: 100%;
}

@media (min-width: 768px) {
  /* two items */
  .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(2),
  .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(2) ~ .webform-layoutcontainer--vert,
  .webform-layoutcontainer--equal > .form-item:nth-last-child(2),
  .webform-layoutcontainer--equal > .form-item:nth-last-child(2) ~ .form-item {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 48.5%;
    margin-left: 0%;
    margin-right: 3%;
  }

  /* three items */
  .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(3),
  .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(3) ~ .webform-layoutcontainer--vert,
  .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(3),
  .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(3) ~ .form-item {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 31.3333333333%;
    margin-left: 0%;
    margin-right: 3%;
  }

  /* four items */
  .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(4),
  .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(4) ~ .webform-layoutcontainer--vert,
  .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(4),
  .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(4) ~ .form-item {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 22.75%;
    margin-left: 0%;
    margin-right: 3%;
  }

  /* five items */
  .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(5),
  .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(5) ~ .webform-layoutcontainer--vert,
  .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(5),
  .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(5) ~ .form-item {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 17.6%;
    margin-left: 0%;
    margin-right: 3%;
  }

  /* six items */
  .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(6),
  .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(6) ~ .webform-layoutcontainer--vert,
  .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(6),
  .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(6) ~ .form-item {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 14.1666666667%;
    margin-left: 0%;
    margin-right: 3%;
  }

  /* seven items */
  .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(7),
  .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(7) ~ .webform-layoutcontainer--vert,
  .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(7),
  .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(7) ~ .form-item {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 11.7142857143%;
    margin-left: 0%;
    margin-right: 3%;
  }

  /* eight items */
  .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(8),
  .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(8) ~ .webform-layoutcontainer--vert,
  .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(8),
  .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(8) ~ .form-item {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 9.875%;
    margin-left: 0%;
    margin-right: 3%;
  }

  /* nine items */
  .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(9),
  .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(9) ~ .webform-layoutcontainer--vert,
  .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(9),
  .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(9) ~ .form-item {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 8.4444444444%;
    margin-left: 0%;
    margin-right: 3%;
  }

  .webform-layoutcontainer--equal {
    *zoom: 1;
  }

  .webform-layoutcontainer--equal:before,
  .webform-layoutcontainer--equal:after {
    content: '';
    display: table;
  }

  .webform-layoutcontainer--equal:after {
    clear: both;
  }

  .webform-layoutcontainer--equal .webform-layoutcontainer--vert:before,
  .webform-layoutcontainer--equal .webform-layoutcontainer--vert:after,
  .webform-layoutcontainer--equal .form-item:before,
  .webform-layoutcontainer--equal .form-item:after {
    content: '';
    display: table;
  }

  .webform-layoutcontainer--equal .webform-layoutcontainer--vert:after,
  .webform-layoutcontainer--equal .form-item:after {
    clear: both;
  }

  .webform-layoutcontainer--equal .webform-layoutcontainer--vert:last-child,
  .webform-layoutcontainer--equal .form-item:last-child {
    margin-right: 0% !important;
  }

  .webform-layoutcontainer--equal .webform-layoutcontainer--vert .form-item:first-child,
  .webform-layoutcontainer--equal .webform-layoutcontainer--vert .form-item:first-child ~ .form-item {
    float: none;
    clear: both;
    display: block;
    width: 100%;
    margin: 0;
  }

  .form-item.form-type-datetime .container-inline {
    *zoom: 1;
    margin: 0;
  }
  .form-item .container-inline > .form-item {
    display: inline-block;
  }

  .form-item.form-type-datetime .container-inline:before,
  .form-item.form-type-datetime .container-inline:after {
    content: '';
    display: table;
  }

  .form-item.form-type-datetime .container-inline:after {
    clear: both;
  }

  .form-item.form-type-datetime .container-inline .form-item.form-item-date-and-time-date,
  .form-item.form-type-datetime .container-inline .form-item.form-item-date-and-time-time {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 48.5%;
    margin-left: 0%;
    margin-right: 3%;
  }
}
.form-item.form-type-datetime .container-inline .form-item.form-item-date-and-time-time {
  margin-right: 0;
}

.form-item.form-type-datetime .container-inline .form-item:before,
.form-item.form-type-datetime .container-inline .form-item:after {
  content: '';
  display: table;
}

.form-item.form-type-datetime .container-inline .form-item:after {
  clear: both;
}

.form-item > .form-type-select {
  margin: 0;
}

File

css/webform.element.layoutcontainer.css
View source 
  1. @media (min-width: 768px) {

  2.   .webform-layoutcontainer--horiz,

  3.   .webform-layoutcontainer--equal {

  4.     word-spacing: -1em; /* remove the space between inline-blocks */

  5.   }

  6. 

  7. 

  8.   .webform-layoutcontainer--horiz > *,

  9.   .webform-layoutcontainer--equal > * {

  10.     display: inline-block;

  11.     vertical-align: top;

  12.     word-spacing: normal;

  13.     /* hack for IE 6&7 */

  14.     zoom: 1;

  15.     *display: inline;

  16.   }

  17. }

  18. 

  19. .webform-layoutcontainer--equal .webform-layoutcontainer--vert .form-item {

  20.   float: none;

  21.   clear: both;

  22.   display: block;

  23.   width: 100%;

  24.   margin: 0;

  25. }

  26. 

  27. 

  28. .webform-layoutcontainer--vert > .form-item {

  29.   display: block;

  30. }

  31. 

  32. 

  33. .webform-layoutcontainer--horiz > * + * {

  34.   margin-left: 1em; /* add space between variable-width blocks */

  35. }

  36. 

  37. .webform-layoutcontainer > .form-item input {

  38.   max-width: 100%;

  39. }

  40. 

  41. .webform-layoutcontainer > .form-item input:not([type=checkbox]):not([type=radio]):not([type=submit]),

  42. .webform-layoutcontainer > .form-item select {

  43.   width: 100%;

  44. }

  45. 

  46. .webform-layoutcontainer > .form-item input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]),

  47. .webform-layoutcontainer > .form-item textarea {

  48.   margin: 0;

  49. }

  50. 

  51. /* one item */

  52. .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:first-child:nth-last-child(1),

  53. .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(1) {

  54.   width: 100%;

  55. }

  56. 

  57. @media (min-width: 768px) {

  58.   /* two items */

  59.   .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(2),

  60.   .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(2) ~ .webform-layoutcontainer--vert,

  61.   .webform-layoutcontainer--equal > .form-item:nth-last-child(2),

  62.   .webform-layoutcontainer--equal > .form-item:nth-last-child(2) ~ .form-item {

  63.     *zoom: 1;

  64.     float: left;

  65.     clear: none;

  66.     text-align: inherit;

  67.     width: 48.5%;

  68.     margin-left: 0%;

  69.     margin-right: 3%;

  70.   }

  71. 

  72.   /* three items */

  73.   .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(3),

  74.   .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(3) ~ .webform-layoutcontainer--vert,

  75.   .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(3),

  76.   .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(3) ~ .form-item {

  77.     *zoom: 1;

  78.     float: left;

  79.     clear: none;

  80.     text-align: inherit;

  81.     width: 31.3333333333%;

  82.     margin-left: 0%;

  83.     margin-right: 3%;

  84.   }

  85. 

  86.   /* four items */

  87.   .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(4),

  88.   .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(4) ~ .webform-layoutcontainer--vert,

  89.   .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(4),

  90.   .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(4) ~ .form-item {

  91.     *zoom: 1;

  92.     float: left;

  93.     clear: none;

  94.     text-align: inherit;

  95.     width: 22.75%;

  96.     margin-left: 0%;

  97.     margin-right: 3%;

  98.   }

  99. 

  100.   /* five items */

  101.   .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(5),

  102.   .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(5) ~ .webform-layoutcontainer--vert,

  103.   .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(5),

  104.   .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(5) ~ .form-item {

  105.     *zoom: 1;

  106.     float: left;

  107.     clear: none;

  108.     text-align: inherit;

  109.     width: 17.6%;

  110.     margin-left: 0%;

  111.     margin-right: 3%;

  112.   }

  113. 

  114.   /* six items */

  115.   .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(6),

  116.   .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(6) ~ .webform-layoutcontainer--vert,

  117.   .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(6),

  118.   .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(6) ~ .form-item {

  119.     *zoom: 1;

  120.     float: left;

  121.     clear: none;

  122.     text-align: inherit;

  123.     width: 14.1666666667%;

  124.     margin-left: 0%;

  125.     margin-right: 3%;

  126.   }

  127. 

  128.   /* seven items */

  129.   .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(7),

  130.   .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(7) ~ .webform-layoutcontainer--vert,

  131.   .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(7),

  132.   .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(7) ~ .form-item {

  133.     *zoom: 1;

  134.     float: left;

  135.     clear: none;

  136.     text-align: inherit;

  137.     width: 11.7142857143%;

  138.     margin-left: 0%;

  139.     margin-right: 3%;

  140.   }

  141. 

  142.   /* eight items */

  143.   .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(8),

  144.   .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(8) ~ .webform-layoutcontainer--vert,

  145.   .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(8),

  146.   .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(8) ~ .form-item {

  147.     *zoom: 1;

  148.     float: left;

  149.     clear: none;

  150.     text-align: inherit;

  151.     width: 9.875%;

  152.     margin-left: 0%;

  153.     margin-right: 3%;

  154.   }

  155. 

  156.   /* nine items */

  157.   .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(9),

  158.   .webform-layoutcontainer--equal > .webform-layoutcontainer--vert:nth-last-child(9) ~ .webform-layoutcontainer--vert,

  159.   .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(9),

  160.   .webform-layoutcontainer--equal > .form-item:first-child:nth-last-child(9) ~ .form-item {

  161.     *zoom: 1;

  162.     float: left;

  163.     clear: none;

  164.     text-align: inherit;

  165.     width: 8.4444444444%;

  166.     margin-left: 0%;

  167.     margin-right: 3%;

  168.   }

  169. 

  170.   .webform-layoutcontainer--equal {

  171.     *zoom: 1;

  172.   }

  173. 

  174.   .webform-layoutcontainer--equal:before,

  175.   .webform-layoutcontainer--equal:after {

  176.     content: '';

  177.     display: table;

  178.   }

  179. 

  180.   .webform-layoutcontainer--equal:after {

  181.     clear: both;

  182.   }

  183. 

  184.   .webform-layoutcontainer--equal .webform-layoutcontainer--vert:before,

  185.   .webform-layoutcontainer--equal .webform-layoutcontainer--vert:after,

  186.   .webform-layoutcontainer--equal .form-item:before,

  187.   .webform-layoutcontainer--equal .form-item:after {

  188.     content: '';

  189.     display: table;

  190.   }

  191. 

  192.   .webform-layoutcontainer--equal .webform-layoutcontainer--vert:after,

  193.   .webform-layoutcontainer--equal .form-item:after {

  194.     clear: both;

  195.   }

  196. 

  197.   .webform-layoutcontainer--equal .webform-layoutcontainer--vert:last-child,

  198.   .webform-layoutcontainer--equal .form-item:last-child {

  199.     margin-right: 0% !important;

  200.   }

  201. 

  202.   .webform-layoutcontainer--equal .webform-layoutcontainer--vert .form-item:first-child,

  203.   .webform-layoutcontainer--equal .webform-layoutcontainer--vert .form-item:first-child ~ .form-item {

  204.     float: none;

  205.     clear: both;

  206.     display: block;

  207.     width: 100%;

  208.     margin: 0;

  209.   }

  210. 

  211.   .form-item.form-type-datetime .container-inline {

  212.     *zoom: 1;

  213.     margin: 0;

  214.   }

  215.   .form-item .container-inline > .form-item {

  216.     display: inline-block;

  217.   }

  218. 

  219.   .form-item.form-type-datetime .container-inline:before,

  220.   .form-item.form-type-datetime .container-inline:after {

  221.     content: '';

  222.     display: table;

  223.   }

  224. 

  225.   .form-item.form-type-datetime .container-inline:after {

  226.     clear: both;

  227.   }

  228. 

  229.   .form-item.form-type-datetime .container-inline .form-item.form-item-date-and-time-date,

  230.   .form-item.form-type-datetime .container-inline .form-item.form-item-date-and-time-time {

  231.     *zoom: 1;

  232.     float: left;

  233.     clear: none;

  234.     text-align: inherit;

  235.     width: 48.5%;

  236.     margin-left: 0%;

  237.     margin-right: 3%;

  238.   }

  239. }

  240. .form-item.form-type-datetime .container-inline .form-item.form-item-date-and-time-time {

  241.   margin-right: 0;

  242. }

  243. 

  244. .form-item.form-type-datetime .container-inline .form-item:before,

  245. .form-item.form-type-datetime .container-inline .form-item:after {

  246.   content: '';

  247.   display: table;

  248. }

  249. 

  250. .form-item.form-type-datetime .container-inline .form-item:after {

  251.   clear: both;

  252. }

  253. 

  254. .form-item > .form-type-select {

  255.   margin: 0;

  256. }