Sass

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Great work on this one.

  • Though an issue is that, your container gets resized when I select an accordion. Refactoring them will be a great idea.

  • I think it will be better if a user can select only one accordion per time, since right now I can select multiple. Or it is fine, but, keep in mind of the first one, the issue of container being resized.

  The layout is good and the mobile state is fine as well. But remember to change the id of your input since right now, they are all the same and is prompting a warning in the console ^

  1

  ---

  

  Okoroji Victor Ebube•125

  @vickymarzPosted over 3 years ago

  @pikamart Thank you for your observation. You have drawn my attention of selecting multiple accordion per time. It is actually messing up the layout. I will look into it.

  Concerning the container that is resizing, please do you know how I can quickly fix it.

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @vickymarz Oh yes, I could definitle help with that. A bit of a hack, well, what you should do

  1. Add a max-height on your faq__section selection, to know what is the max-height that you are needing, try to look at the height or the container itself, looking it at developer tools will give you a good idea. But I already did it using a max-height: 479px for desktop.

  2. Add an overflow-y: scroll in the faq__section selector. Remember that max-height? It caps the element right, and any element that goes that will be scrollable. Adding this overflow: scroll will make your whole container be have its fixed size and will not be resized even if a user clicks multiple accordion

  3. Already done. But keep in mind, if you do this, there will be a scrollbar appearing right. To remove this, simple add this line, change only the first selector

  .example::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .example {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  

  just change the selector and apply that. That is from w3schools. Applying that will remove the scrollbar but still having its functionality

  A bit of a hack right haha if you need more help just drop it here^

  1

  

  Okoroji Victor Ebube•125

  @vickymarzPosted over 3 years ago

  @pikamart thank you very much . It worked!

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @vickymarz Your welcome and glad that it worked^^

  0