problem input css #716

New Issue

OVERLORD · 2026-02-04T22:02:14+03:00

OVERLORD commented

2026-02-04 22:02:14 +03:00

Originally created by @Guims on GitHub (Jun 14, 2018).

Hello, I would like to add an accordion in the wiki in pure css so that the wiki remains fluid in the navigation, see this topic ==> https://wiki-mafia-weed.tk/books/3-les-challenges/page/challenge-1-termine-le-tuto-daide

the code uses the input property, and I think it conflicts with your script, because when I want to edit a page or chapter, the title is no longer displayed.

here is the code I use:

.accordeon {
  float: left;
  width: 98%;
  padding: 0 1em;
}
/* Acordeon styles */
.accordeon-tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  overflow: hidden;
}
input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: #566C9B;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}
.blue label {
  background: #f2f2f2;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  background: #f2f2f2;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.blue .tab-content {
  background: #3498db;
}
.tab-content p {
  margin: 1em;
}
/* :checked */
input:checked ~ .tab-content {
  max-height: 200em;
}
/* Icon */
label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
input[type=checkbox] + label::after {
  content: "+";
}
input[type=radio] + label::after {
  content: "\25BC";
}
input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}
.span-accordeon { color:white}

Could you help me please, I would like to use the accordion for my users.

Cordially.

Originally created by @Guims on GitHub (Jun 14, 2018). Hello, I would like to add an accordion in the wiki in pure css so that the wiki remains fluid in the navigation, see this topic ==> https://wiki-mafia-weed.tk/books/3-les-challenges/page/challenge-1-termine-le-tuto-daide the code uses the input property, and I think it conflicts with your script, because when I want to edit a page or chapter, the title is no longer displayed. here is the code I use: ``` .accordeon { float: left; width: 98%; padding: 0 1em; } /* Acordeon styles */ .accordeon-tab { position: relative; margin-bottom: 1px; width: 100%; overflow: hidden; } input { position: absolute; opacity: 0; z-index: -1; } label { position: relative; display: block; padding: 0 0 0 1em; background: #566C9B; font-weight: bold; line-height: 3; cursor: pointer; } .blue label { background: #f2f2f2; } .tab-content { max-height: 0; overflow: hidden; background: #f2f2f2; -webkit-transition: max-height .35s; -o-transition: max-height .35s; transition: max-height .35s; } .blue .tab-content { background: #3498db; } .tab-content p { margin: 1em; } /* :checked */ input:checked ~ .tab-content { max-height: 200em; } /* Icon */ label::after { position: absolute; right: 0; top: 0; display: block; width: 3em; height: 3em; line-height: 3; text-align: center; -webkit-transition: all .35s; -o-transition: all .35s; transition: all .35s; } input[type=checkbox] + label::after { content: "+"; } input[type=radio] + label::after { content: "\25BC"; } input[type=checkbox]:checked + label::after { transform: rotate(315deg); } input[type=radio]:checked + label::after { transform: rotateX(180deg); } .span-accordeon { color:white} ``` Could you help me please, I would like to use the accordion for my users. Cordially.

OVERLORD added the 🐕 Support label 2026-02-04 22:02:14 +03:00

OVERLORD closed this issue

2026-02-04 22:02:18 +03:00

OVERLORD commented

2026-02-04 22:02:22 +03:00

@8bitgentleman commented on GitHub (Jun 17, 2018):

I would be very interested to learn how to creat an accordion within bookstack as well!

@8bitgentleman commented on GitHub (Jun 17, 2018): I would be very interested to learn how to creat an accordion within bookstack as well!

OVERLORD commented

2026-02-04 22:02:26 +03:00

@ssddanbrown commented on GitHub (Jun 18, 2018):

Hi @Guims,

Many of your styles there are very generic so will effect other BookStack elements. You can scope each rule to only take action when in page content. Try these modified styles:

.page-content .accordeon {
  float: left;
  width: 98%;
  padding: 0 1em;
}
/* Acordeon styles */
.page-content  .accordeon-tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  overflow: hidden;
}
.page-content  input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.page-content label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: #566C9B;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}
.page-content .blue label {
  background: #f2f2f2;
}
.page-content .tab-content {
  max-height: 0;
  overflow: hidden;
  background: #f2f2f2;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.page-content .blue .tab-content {
  background: #3498db;
}
.page-content .tab-content p {
  margin: 1em;
}
/* :checked */
.page-content input:checked ~ .tab-content {
  max-height: 200em;
}
/* Icon */
.page-content label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.page-content input[type=checkbox] + label::after {
  content: "+";
}
.page-content input[type=radio] + label::after {
  content: "\25BC";
}
.page-content input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
.page-content input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}
.page-content .span-accordeon { color:white}

Let me know if that works for you.

@8bitgentleman @Guims The request for this built in has already been requested under #78. Please thumbs-up the top comment there to show support.

@ssddanbrown commented on GitHub (Jun 18, 2018): Hi @Guims, Many of your styles there are very generic so will effect other BookStack elements. You can scope each rule to only take action when in page content. Try these modified styles: ```css .page-content .accordeon { float: left; width: 98%; padding: 0 1em; } /* Acordeon styles */ .page-content .accordeon-tab { position: relative; margin-bottom: 1px; width: 100%; overflow: hidden; } .page-content input { position: absolute; opacity: 0; z-index: -1; } .page-content label { position: relative; display: block; padding: 0 0 0 1em; background: #566C9B; font-weight: bold; line-height: 3; cursor: pointer; } .page-content .blue label { background: #f2f2f2; } .page-content .tab-content { max-height: 0; overflow: hidden; background: #f2f2f2; -webkit-transition: max-height .35s; -o-transition: max-height .35s; transition: max-height .35s; } .page-content .blue .tab-content { background: #3498db; } .page-content .tab-content p { margin: 1em; } /* :checked */ .page-content input:checked ~ .tab-content { max-height: 200em; } /* Icon */ .page-content label::after { position: absolute; right: 0; top: 0; display: block; width: 3em; height: 3em; line-height: 3; text-align: center; -webkit-transition: all .35s; -o-transition: all .35s; transition: all .35s; } .page-content input[type=checkbox] + label::after { content: "+"; } .page-content input[type=radio] + label::after { content: "\25BC"; } .page-content input[type=checkbox]:checked + label::after { transform: rotate(315deg); } .page-content input[type=radio]:checked + label::after { transform: rotateX(180deg); } .page-content .span-accordeon { color:white} ``` Let me know if that works for you. @8bitgentleman @Guims The request for this built in has already been requested under #78. Please thumbs-up the top comment there to show support.

OVERLORD commented

2026-02-04 22:02:31 +03:00

@Guims commented on GitHub (Jun 20, 2018):

@ssddanbrown : Hi and thank you.

It works well now, thank you again.
Here is the html code to put on your page in addition to the css modified by @ssddanbrown

https://pastebin.com/zUEMhZpz

@Guims commented on GitHub (Jun 20, 2018): @ssddanbrown : Hi and thank you. It works well now, thank you again. Here is the html code to put on your page in addition to the css modified by @ssddanbrown https://pastebin.com/zUEMhZpz

OVERLORD commented

2026-02-04 22:02:43 +03:00

@8bitgentleman commented on GitHub (Jun 20, 2018):

@Guims Where do you put that CSS? If I try and put it under source code in a page it doesn't work

@8bitgentleman commented on GitHub (Jun 20, 2018): @Guims Where do you put that CSS? If I try and put it under source code in a page it doesn't work

OVERLORD commented

2026-02-04 22:02:48 +03:00

@Guims commented on GitHub (Jun 24, 2018):

@8bitgentleman
Hello, the code css is to put in the parameters, in the part "Custom HTML in the header" and to put between the tags <style>code here</style>

@Guims commented on GitHub (Jun 24, 2018): @8bitgentleman Hello, the code css is to put in the parameters, in the part "Custom HTML in the header" and to put between the tags <style>code here</style>

OVERLORD commented

2026-02-04 22:02:52 +03:00

@ssddanbrown commented on GitHub (Aug 19, 2018):

Since the core issue here is now solved I will close this.

@ssddanbrown commented on GitHub (Aug 19, 2018): Since the core issue here is now solved I will close this.

OVERLORD referenced this issue

2026-02-05 10:14:34 +03:00

[PR #716] [MERGED] fix markdown editor resizing with long strings #5697

Sign in to join this conversation.