search

Nambaseking01 / Scratch-Ultimate-Coding-Shop

This is the official website for the Scratch Ultimate Coding Shop on Scratch.
2 stars 0 forks source link

[Bug] Dropdown CSS positioning gets incorrect! #16

Open Nambaseking01 opened 5 years ago

Nambaseking01 commented 5 years ago

Describe the bug I added some CSS styling in the style.css file for creating a dropdown menu, but when I try to position the dropdown in the Bootstrap Jumbotron

at the left-hand corner of the screen, the dropdown button gets positioned above the "Scratch Ultimate Coding Shop" text and the menu falls to the left side when I hover over the button. I tested this in CodePen, this bug is not happening in the website.

Expected behavior I need the dropdown button and menu to be positioned to the left-hand side corner of the screen.

Additional context If you are a contributor or want to create a pull request, here is the dropdown code for the HTML (the CSS already exists): 

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
setiawanjeje commented 5 years ago

hi @Nambaseking01 can you provide some lofi design of the expected result?

Nambaseking01 commented 5 years ago

Hello @setiawanjeje! Unfortunately, I currently cannot create a lofi design but in details the Bootstrap CSS prevents the dropdown buttons CSS to render properly on the screen. I want it to show up at the right-hand side corner of the screen but the welcoming div (the jumbotron div in Bootstrap) positions the dropdown opening button above the welcoming text in the center ands aligns the list a little more to the left.

I don't think there is a way to get access to the Bootstrap official files, because it seems like they have 3 JavaScript files and one CSS stylesheet according to the reference code. The only thing I need to know now is how to change the Bootstrap code of the jumbotron div to my custom alignment.

Hopefully that clarified some stuff, -The SUCS Team-

VelocityDesign commented 4 years ago

Is this in the index.html file of the master branch, or is it in a different branch?

VelocityDesign commented 4 years ago

Hello @setiawanjeje! Unfortunately, I currently cannot create a lofi design but in details the Bootstrap CSS prevents the dropdown buttons CSS to render properly on the screen. I want it to show up at the right-hand side corner of the screen but the welcoming div (the jumbotron div in Bootstrap) positions the dropdown opening button above the welcoming text in the center ands aligns the list a little more to the left.

I don't think there is a way to get access to the Bootstrap official files, because it seems like they have 3 JavaScript files and one CSS stylesheet according to the reference code. The only thing I need to know now is how to change the Bootstrap code of the jumbotron div to my custom alignment.

Hopefully that clarified some stuff, -The SUCS Team-

Can you take a screenshot of what it looks like in codepen