Bootstrap displaying differently

michaelbukachi commented 7 years ago

For some strange reason bootstrap is displaying differently. screenshot from 2017-08-07 17-57-57 The first screenshot is the desired effect, however, when trying it on ObjectHub I get the second result. That is, the menu is already expanded and there is improper alignment. I copied the exact from local to Objecthub so there should be no editing differences.

Here's the html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Navbar Collapse</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css" >
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed pull-left text-center" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand hidden-md hidden-lg" href="#">
            <img class='img-responsive' data-embed='Logo2'>
        </a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
        <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">How can I help you?</a></li>
            <li><a href="#">How much will it cost you?</a></li>
            <li><a href="#">About the firm</a></li>
            <li><a href="#">Contact details</a></li>
        </ul>
    </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</body>
</html>

And here's the css:

.navbar-toggle {
    display: block;
    margin-left: 5px;
}

.navbar-collapse.collapse {
    display: none!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: hidden!important;
}

.navbar-nav {
    float: none!important;
    margin-top: 8px;
    text-align: center;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar-collapse.collapse.in {
    display: block!important;
    height: 500px;
}

objecthub-io commented 7 years ago

I think your CSS is overriding some of the bootstrap CSS.

Try this:

.navbar-toggle {
    /* display: block; */
    margin-left: 5px;
}

.navbar-collapse.collapse {
    /* display: none; */
    height: auto;
    padding-bottom: 0;
    overflow: hidden;
}

.navbar-nav {
    /* float: none;*/
    margin-top: 8px;
    text-align: center;
}
.navbar-nav>li {
    /* float: none; */
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar-collapse.collapse.in {
    display: block;
    height: 500px;
}

michaelbukachi commented 7 years ago

That's not the issue. I want to achieve the effect on the first screenshot. It works if i type it in a text editor. But it doesn't when I paste the code in Objecthub.

objecthub-io commented 7 years ago

So, essentially, you want to patch bootstrap so that it always shows the menu in the collapsed position, correct?

Try adding the CSS for this (which modify the bootstrap classes) to the wrapper page (after the reference to bootstrap). Does that work?

michaelbukachi commented 7 years ago

Yes it does!! :) Could you explain while it works when placed in the wrapper but in the css of the micro app??

objecthub-io commented 7 years ago

That's great!

Yes, the CSS in the Micro App is parsed in a different way than the CSS in the wrapper. The CSS in the wrapper is parsed by the browser (just like any CSS we normally use). However, the CSS in the Micro App should only apply to the HTML elements of the Micro App. This is not supported by the browser CSS parsing (which always applies CSS to every element on the page). Therefore we have our own CSS parser.

This parser is quite basic. It executes the element definitions of the CSS as queries in JQuery and then sets the style attribute of the elements affected.

For instance:

.my-class {color: green;}

Would translate roughly to the following being executed upon loading of the Micro App:

$(".my-class").css('color', 'green');

Therefore things like !important are not supported. Also, this only happens once upon load of the Micro App. So if there is a query for an element with the class in but this element is not visible upon load of the micro app, the css for this will not be applied.

It is possible though to manually force the CSS of the Micro App to be applied after it has been loaded. For this just call container.applyCss().

I hope this answers your question!

michaelbukachi commented 7 years ago

Yes it does. Now I understand. This explanation should be added to the documentation

objecthub-io commented 7 years ago

The documentation on CSS for Micro Apps has been updated:

https://objecthub.io/docs#/Micro_App

(Note that sometimes documentation pages are cached in the browser. Run localStorage.clear() in the console and reload the page to get the newest version - or use an incognito window).

michaelbukachi commented 7 years ago

Just checked it out. Thanks. You could also use Ctrl + Shift + R for a hard reload.

objecthub-io commented 7 years ago

Great, thanks! Closing this issue now!

objecthub-io / ObjectHub

Bootstrap displaying differently #277