Horizontal scrollbar appearing on container fluid page


Topic: Horizontal scrollbar appearing on container fluid page

deepdev asked 6 years ago

Hi

I want to have full width menu on page and I am using container-fluid which add padding-left and padding-right both 15px. When I remove those padding I get a horizontal scrollbar on page as shown on below screenshot. 

https://gyazo.com/492533d01e993cb53eb932f9599fd8bf

When I don't set the padding left, right to 0px the horizontal scrollbar disappear but menu is not full width as shown on below screenshot

https://gyazo.com/64851a46238fbbf8980b70a16579ea0c

 

even when I remove container-fluid, the page still have horizontal scrollbar. How can I remove this horizontal scrollbar


Piotr Glejzer staff answered 6 years ago

Hi,

May you use our snippets to show a problem? With code will be easier to help you.

https://mdbootstrap.com/snippets/

Which version of mdb do you use?

Best,

Piotr


deepdev commented 6 years ago

I am using angular pro version.  I don't see angular as a option on snippets page.


Arkadiusz Idzikowski staff commented 6 years ago

The mdb-navbar component should take full width by default, you don't need to place it in the container-fluid. If you need to remove inner container from the navbar, just add [containerInside]="false". For example:

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo" [containerInside]="false">

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: PC
  • Browser: chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No