Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Elements with display: none should not affect the layout of other elements #73

Open
soundasleep opened this issue Mar 18, 2022 · 0 comments
Open

Elements with display: none should not affect the layout of other elements #73

soundasleep opened this issue Mar 18, 2022 · 0 comments

Comments

@soundasleep
Copy link
Contributor

soundasleep commented Mar 18, 2022 •
edited
Loading

Given the following HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="base.css">
</head>
<body>
  <label type="toggle-button">
    <input type="radio" name="elementx">
    Hello
  </label>
</body>
</html>

And the following CSS:

label[type="toggle-button"] {
  border: 1px solid white;
  color: white;
  display: inline-block;
  margin: 0;
  padding: 16px;
}

label[type="toggle-button"] > input[type="radio"] {
    display: none;
}

The <input> should not be displayed (and thus not affecting the layout of the parent <label>), but it seems to be affecting layout:

image

In fact you can change the properties of the display: none; input, for example:

label[type="toggle-button"] > input[type="radio"] {
    display: none;
    padding: 64px;
    margin: 64px;
}

This renders as:

image

(This might be an issue in jStyleParser, not sure)

EDIT: An ugly workaround is to set the margin/padding to negative values:

label[type="toggle-button"] > input[type="radio"] {
    display: none;
    padding: -10px;
    margin: -10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@soundasleep