Web part zone - Container setting

Trevor Chinn asked on August 8, 2016 06:41

Hi there. On my first week of using Kentico at my company and thus I am a bit fresh. I asked my coworkers but they've never seen this issue nor could they figure it out, so I am posting here to try and grasp what exactly is going wrong.

Situation Background

There is a navigation bar at the top of the site (displayed on every page, thus in the master template). It is setup in kentico to be a web part zone [ZoneNavigation] containing two web parts (Static HTML and a CSSListMenu)

The problem

When I assign a container to the parent web part zone [ZoneNavigation], it works fine and the container's css and HTML is applied on the live site... but the kentico UI freaks out and throws the inner parts of the ZoneNavigation into a floating area above the normal template. This can be seen at the top of this image:

Image Text

If I set the container to "none" on the zone, it displays normally

Image Text

The content of the container is as follows, although I don't think that should matter given it is the kentico UI and not the front-end that is being affected

Image Text

The only thing that I can think of is that the class "container" within the code above is messing with the styling of the kentico UI, which would surprise and sadden me a little inside

Correct Answer

Dawid Jachnik answered on August 8, 2016 08:32

Hi Trevor,

You're right, the problem can be with classes, because Kentico uses the Bootstrap and JQuery for styling. If you turn off your css it should display correct, right?

You can override this, by adding special preceding class (this classes Kentico adds to the body, depending where you are):

.DesignMode - for hte Desing tab
.EditMode - for the Page tab

Browser specific classes

1 votesVote for this answer Unmark Correct answer

Recent Answers

Jan Hermann answered on August 8, 2016 08:33

Yes, both .navbar and .container classes are used in /App_Themes/Default/bootstrap.css stylesheet that gets loaded in design mode since the design mode uses bootstrap. You can wrap your container to extra div with some class and then define your styles within this specific class or you can use different names for your classes to avoid style issues in the design mode.

1 votesVote for this answer Mark as a Correct answer

Trevor Chinn answered on August 8, 2016 08:52 (last edited on August 8, 2016 08:52)

Thank you, gentlemen! I shall rectify the CSS issues. Have a nice day!

Edit: Oops, This became an answer, not a comment

0 votesVote for this answer Mark as a Correct answer