Stack Overflow
Stack Overflow

Questions tagged [html-tag-details]

Use this tag for question about HTML5

tag.

The <details> tag is one of the HTML5 elements. It creates a disclosure widget and contains additional details, that the user can open and view. By default, the content of the tag is not displayed. In order to display the contents, you must apply the open attribute. A disclosure widget is commonly presented with a small triangle that twists (or rotates) to show open/closed state.

It is often used with <summary> tag.

63 questions
0
votes
1 answer

How to Highlight "Opened" items in
implementation in HTML with CSS? (a layout coloring problem)

I've spent quite some time designing my ultimate details/summary HTML FAQ in CSS. One thing that I cannot get right is the orange background color on opened topics: Once an item is clicked, I would like the selected topic to be highlited as orange,…
Sam
  • 15,254
  • 25
  • 90
  • 145
0
votes
4 answers

Details element, fit to content whilst inside a flex box, even when collapsed

When placing an
element inside a
with display: flex the width of the
element will equal the element when collapsed and will grow when uncollapsed to fit its content. Example: .flex { display: flex; } details…
Sam Coutteau
  • 357
  • 2
  • 15
0
votes
2 answers

Add padding to
without decreasing width of

I'm trying to add left & right padding to the details text when the details block is open, without the padding the text runs right up to the edge of the background and looks crowded. However, when adding the left & right padding, the summary section…
chad
  • 5
  • 1
0
votes
1 answer

Details summary h4 hover color

I am trying to color the h4 text inside a details summary upon hover, but the color change only takes effect when hovering DIRECTLY OVER the actual h4 text, how can I modify my CSS to change the h4 text color when hovering over other parts of the…
chad
  • 5
  • 1
0
votes
4 answers

Create Eventlisteners for detailstag dynamically?

Why is this working: const details = document.querySelector('details') document.getElementById("details1").addEventListener("toggle", event => { if (details1.open) { changeText1("open"); } else { changeText1("closed"); …
Stefanovici
  • 51
  • 5
0
votes
2 answers

How can I move an element to the last position in its flexbox container?

I have a flexbox-container that includes several details-elements. They follow the flex-wrap behaviour. I want a details-element to jump below the other elements of the container, when it is opened. So, it should go from this: to this: All details…
Spock
  • 1
  • 1
0
votes
1 answer

When appending a
element to a div with innerHTML the div goes "down" too

The problem is easily pictured with an example here. The code goes like this: HTML:
Hello
JS: document.getElementById('example').innerHTML += '
Trufa
  • 39,971
  • 43
  • 126
  • 190
0
votes
1 answer

Border of multiple details tags in one html row are not working responsive

I have a problem on my website: https://www.ars-neurochirurgica.com/ . I have several accordion menus which I made with pure css without any javascript and everything works perfect, except for one problem: When I click on the categories to expand…
neur_11
  • 3
  • 1
0
votes
2 answers

How to select and layout the contents of
without selecting using only CSS

I'm trying to add 10px padding to the Story box using CSS, without adding any new extra HTML elements to the website code. Is there any way to add the padding to the Story box, without adding a new extra HTML element? In other words: How to select…
Sam
  • 15,254
  • 25
  • 90
  • 145
0
votes
0 answers

Details elements with iframes inside

I have a web page with several details elements. Inside one of them there is an iframe. In all browsers except Firefox (either desktop or mobile) the iframe contents are displayed correctly. In Firefox they don't show up. If I move the iframe…
jmatos
  • 123
  • 1
  • 2
  • 8
0
votes
1 answer

How to show form required warning in collapsed details?

I have a form with a required checkbox inside a details tag. When the user tries to submit the site without checking the checkbox a warning is displayed. But when the user has collapsed the details no warning is shown and the submit just doesn't…
hoanns
  • 23
  • 5
0
votes
0 answers

Can we set the summary and details tags so that the details appear ABOVE the summary (rather than below)?

By default in HTML5, when the user hits the summary box, the details are shown below the summary box. Is it possible to reverse the order, so that the details are shown above the summary? Similarly, is is possible for the details to appear to the…
SugarCoding
  • 11
  • 4
0
votes
1 answer

Details tag text doesn't respond to css margin

Not matter what I try and add the text of the details tag won't respect the margin-left style. Some of the html text that isn't working p1 { text-align: center; color: silver; font-size: 100%; font-family: "Times New Roman", Times,…
Xavi
  • 11
  • 2
0
votes
2 answers

Wordpress creates wierd spacing with details tags

I am creating an indented menu for accessing resources on my robotics team's website. It works perfectly when it runs as an isolated HTML page with the "custom.css" file. When I paste the code in Wordpress the details are about an inch apart…
Brendan Jackson
  • 93
  • 1
  • 10
0
votes
2 answers

Update Knockout `attr` binding from DOM instead of from ViewModel

I am using Knockout.js to populate a set of HTML5
elements. Here is the structure:
Moshe Katz
  • 15,992
  • 7
  • 69
  • 116
1 2 3
4
5