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

Wrong styles of summary and details tags #17

Closed
beatrizsmerino opened this issue Mar 9, 2024 · 4 comments
Closed

Wrong styles of summary and details tags #17

beatrizsmerino opened this issue Mar 9, 2024 · 4 comments
Assignees
@beatrizsmerino
Labels
bug Something isn't working

Comments

@beatrizsmerino
Copy link
Owner

beatrizsmerino commented Mar 9, 2024 •
edited

Error

In the dropdown, created with the HTML tags details and summary, the arrow, icon and title must be aligned horizontally on the same line.

It is... It must be...
image image

References
@beatrizsmerino beatrizsmerino self-assigned this Mar 9, 2024
@beatrizsmerino beatrizsmerino added the bug Something isn't working label Mar 9, 2024
@beatrizsmerino beatrizsmerino pinned this issue Mar 9, 2024
beatrizsmerino added a commit that referenced this issue Mar 9, 2024
@beatrizsmerino
fix(readme): wrong styles in the summary tag
a9b9462 
Error:
- The arrow and the title of the `summary` tag must be on the same line.

Solution:
- To prevent the title from appearing on the line following the arrow, remove the `h2` and `h3` tags used inside the `summary` tag.
This is a temporary solution, as it corrects the problem, but loses the styles (`font-size`) provided by the `h2` and `h3` tags.

Reference:
- Issue #17
beatrizsmerino added a commit that referenced this issue Mar 9, 2024
@beatrizsmerino
fix(readme): wrong styles in the summary tag
27cd029 
Error:
- The arrow and the title of the `summary` tag must be on the same line.

Solution:
- To prevent the title from appearing on the line following the arrow, remove the `h2` and `h3` tags used inside the `summary` tag.
This is a temporary solution, as it corrects the problem, but loses the styles (`font-size`) provided by the `h2` and `h3` tags.

Reference:
- Issue #17
beatrizsmerino added a commit that referenced this issue Mar 9, 2024
@beatrizsmerino
fix(readme): wrong styles of headings in the summary tag
28dd756 
Error:
- As the `h2` and `h3` tags used within the `summary` tag have been removed to correct the above problem, the text size has changed.
The font size of the `summary` tag should be `h2` or `h3` as appropriate.

Solution:
- Use another tags instead `h2` or `h3` to change the `font-size`.

Reference:
- Issue #17
beatrizsmerino added a commit that referenced this issue Mar 9, 2024
@beatrizsmerino
fix(readme): wrong styles of headings in the summary tag
62089cd 
Error:
- As the `h2` and `h3` tags used within the `summary` tag have been removed to correct the above problem, the text size has changed.
The font size of the `summary` tag should be `h2` or `h3` as appropriate.

Solution:
- Use another tags instead `h2` or `h3` to change the `font-size`.

Reference:
- Issue #17
beatrizsmerino added a commit that referenced this issue Mar 9, 2024
@beatrizsmerino
fix(readme): wrong styles of headings in the summary tag
565a9a6 
Error:
- As the `h2` and `h3` tags used within the `summary` tag have been removed to correct the above problem, the text size has changed.
The font size of the `summary` tag should be `h2` or `h3` as appropriate.

Solution:
- Transform icon and text of the headings into images using the online tool:
https://readme-typing-svg.demolab.com

Reference:
- Issue #17
beatrizsmerino added a commit that referenced this issue Mar 9, 2024
@beatrizsmerino
fix(readme): wrong styles of headings in the summary tag
1c51925 
Error:
- As the `h2` and `h3` tags used within the `summary` tag have been removed to correct the above problem, the text size has changed.
The font size of the `summary` tag should be `h2` or `h3` as appropriate.

Solution:
- Transform icon and text of the headings into images using the online tool:
https://readme-typing-svg.demolab.com

Reference:
- Issue #17
beatrizsmerino added a commit that referenced this issue Mar 9, 2024
@beatrizsmerino
fix(readme): wrong styles of headings in the summary tag
0c0ad99 
Error:
- As the `h2` and `h3` tags used within the `summary` tag have been removed to correct the above problem, the text size has changed.
The font size of the `summary` tag should be `h2` or `h3` as appropriate.

Solution:
- Transform icon and text of the headings into images using the online tool:
https://readme-typing-svg.demolab.com

Reference:
- Issue #17
beatrizsmerino added a commit that referenced this issue Mar 9, 2024
@beatrizsmerino
fix(readme): wrong styles of headings in the summary tag
d40a349 
Error:
- As the `h2` and `h3` tags used within the `summary` tag have been removed to correct the above problem, the text size has changed.
The font size of the `summary` tag should be `h2` or `h3` as appropriate.

Solution:
- Transform icon and text of the headings into images using the online tool:
https://readme-typing-svg.demolab.com

Reference:
- Issue #17
beatrizsmerino added a commit that referenced this issue Mar 9, 2024
@beatrizsmerino
fix(readme): wrong styles of headings in the summary tag
a3b4530 
Error:
- As the `h2` and `h3` tags used within the `summary` tag have been removed to correct the above problem, the text size has changed.
The font size of the `summary` tag should be `h2` or `h3` as appropriate.

Solution:
- Transform icon and text of the headings into images using the online tool:
https://readme-typing-svg.demolab.com

Reference:
- Issue #17
@beatrizsmerino
Copy link
Owner Author

beatrizsmerino commented Mar 9, 2024 •
edited

Reason

The problem is when HTML tags of block type (h1, h2, h3, ..., div...) are used instead of inline type (span) tags, since they are occupying 100% of their size and when they do not enter the content is moved to the next line.

Read more about: HTML Block and Inline Elements

Using HTML Block elements
image 
<details id="presentation" open="true">
	<summary>
		<span>👋_Presentation</span>
	</summary>
	<div>Content ...</div>
</details>
Using HTML Inline elements
image 
<details id="presentation" open="true">
	<summary>
		<div>👋_Presentation</div>
	</summary>
	<div>Content ...</div>
</details>

beatrizsmerino added a commit that referenced this issue Mar 9, 2024
@beatrizsmerino
fix(readme): wrong styles of headings in the summary tag
8cbc782 
Error:
- As the `h2` and `h3` tags used within the `summary` tag have been removed to correct the above problem, the text size has changed.
The font size of the `summary` tag should be `h2` or `h3` as appropriate.

Solution:
- Transform icon and text of the headings into images using the online tool:
https://readme-typing-svg.demolab.com

Reason:
- When HTML block tags (`h2`, `div`) are used instead of inline tags (`span`, `b`), they take up 100% of their size, so when they do not fit, the content is moved to the next line.

Reference:
- Issue #17
@beatrizsmerino
Copy link
Owner Author

beatrizsmerino commented Mar 9, 2024 •
edited

Solution

This could solve the problem but no styles can be applied in any way.

summary > * {
    display: contents;
}

I have converted the text and icon to fixed-width SVG images with the online tool: https://readme-typing-svg.demolab.com.

Commit with the solution: ba8980d

beatrizsmerino added a commit that referenced this issue Mar 9, 2024
@beatrizsmerino
fix(readme): wrong styles of headings in the summary tag
ba8980d 
Error:
- As the `h2` and `h3` tags used within the `summary` tag have been removed to correct the above problem, the text size has changed.
The font size of the `summary` tag should be `h2` or `h3` as appropriate.

Solution:
- Transform icon and text of the headings into SVG images with fixed-width using the online tool:
https://readme-typing-svg.demolab.com

Reason:
- When HTML block tags (`h2`, `div`) are used instead of inline tags (`span`, `b`), they take up 100% of their size, so when they do not fit, the content is moved to the next line.

Reference:
- Issue #17
@webdev23
Copy link

Yes there is many ways to solve that with CSS, unfortunately we can't use CSS.

Those little details bugs me out too :)

@beatrizsmerino
Copy link
Owner Author

beatrizsmerino commented Mar 10, 2024 •
edited

Solved issue!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@beatrizsmerino beatrizsmerino

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

When branches are created from issues, their pull requests are automatically linked.

hotfix/2.4.4 beatrizsmerino/beatrizsmerino
2 participants
@webdev23 @beatrizsmerino