atk4 / ui

Robust and easy to use PHP Framework for Web Apps
https://atk4-ui.readthedocs.io
MIT License
440 stars 105 forks source link

Immediately closed form it breaking `:first-child` header CSS rule #1970

Closed mvorisek closed 1 year ago

mvorisek commented 1 year ago

Steps to reproduce:

  1. open https://dev.agiletoolkit.org/demos/form/form.php
  2. click Layout Control

image

current result: image

expected result: image (achived by deleting <form id="atk_layout_maestro_tabs_tabssubview_5_form_form"></form> tag)

mvorisek commented 1 year ago

here is a solution: https://jsfiddle.net/fg3kcn85/

mvorisek commented 1 year ago

some filtered non-input/table related selectors based on :first search:

    Line   486: h1:first-child,
    Line   487: h2:first-child,
    Line   488: h3:first-child,
    Line   489: h4:first-child,
    Line   490: h5:first-child {
    Line   511: p:first-child {
    Line  7453: .ui.header:first-child {
    Line  7734: .ui.icon.header:first-child {

    Line 19701: .ui.label:first-child {

    Line 24760: .ui.segment:first-child {
    Line 24781: .ui.vertical.segment:first-child {
    Line 24934: .ui.piled.segment:first-child {
    Line 24985: .ui.piled.segment[class*="top attached"]:first-child {
    Line 25137: .ui.segments:first-child {
    Line 25158: .ui.segments:not(.horizontal) > .segment:first-child {
    Line 25191: .ui.segments > .segments:first-child {
    Line 25246: .ui.segments > .horizontal.segments:first-child {
    Line 25250: .ui.horizontal.segments:not(.stackable):not(.wrapping) > .segment:first-child {
    Line 25254: .ui.horizontal.segments > .segment:first-child {
    Line 25671: .ui.segment[class*="top attached"]:first-child {

    Line 27334: .ui.form .message:first-child {

https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child has same problem, but it seems no selector is critical for our usage with immediately closed form tag.