Closed michaelbukachi closed 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;
}
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.
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?
Yes it does!! :) Could you explain while it works when placed in the wrapper but in the css of the micro app??
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!
Yes it does. Now I understand. This explanation should be added to the documentation
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).
Just checked it out. Thanks. You could also use Ctrl + Shift + R for a hard reload.
Great, thanks! Closing this issue now!
For some strange reason bootstrap is displaying differently.
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:
And here's the css: