If I break down a navigation menu (navbar) into components such as this:
<div class="navbar">
<app-navbar-brand></app-navbar-brand>
<app-navbar-menu></app-navbar-menu>
</div>
or:
<div class="navbar">
<div class="navbar-brand">
<!-- navbar-items -->
</div>
<div class="navbar-menu">
<div class="navbar-start">
<!-- angular components -->
</div>
<div class="navbar-end">
<!-- angular components -->
</div>
</div>
Some padding and other properties seem to work incorrectly in the menu.
If I keep the entire navbar in one component, I don't see this problem.
Any idea what I'm doing wrong in Angular? Or is there something i've missed? It looks like the SASS is loaded in a weird way, but I cannot figure out why this is.
I ran into the same issue when using Bulma with Angular. The problem is because Bulma is built entirely using Flexbox. Angular component generated (pseudo) HTML tags, which are not using flexbox. I tried adjusting the component CSS style (i.e display, and width properties) seem to help, but not perfect. Hope that helps.
Related
Is there is any ant design CSS documentation like bootstrap available?
We are using ng-zorro-antd framework to build Angular application.
ng-zorro-antd provide grid compnents:
<div nz-row>
<div nz-col nzSpan="6">col-6</div>
<div nz-col nzSpan="6">col-6</div>
</div>
But its not feasible to use angular component at every html design/structure we want something like the below class.
<div class="ant-row">
<div class="ant-col-6">col-6</div>
<div class="ant-col-6">col-6</div>
</div>
Also Need to know about performance of CSS based grid Vs component or directive based structure.
Is there is any performance impact?
I'm trying to create a fixed Navbar using Project Clarity
I'm using it in my Angular project, they are using FlexBox, I have tried putting in position: fixed but it doesn't seem to work, anyone have any ideas ?
<clr-header class="header-6">
In order to fix the header so that content scrolls underneath it, your application needs to have the correct Application Layout. Our components work within this structure because A properly structured layout enforces an optimal, consistent experience across applications.
The general structure for A Clarity Application layout takes this form:
<div class="main-container">
<div class="alert alert-app-level">
...
</div>
<header class="header header-6">
...
</header>
<nav class="subnav">
...
</nav>
<div class="content-container">
<div class="content-area">
...
</div>
<nav class="sidenav">
...
</nav>
</div>
</div>
Obviously, you can get rid of the parts that may not be relevant to your app like: alert-app-level, subnav etc ...
You can see this working in a quick demo I made with inspiration from Bob Ross. As you can see the content scroll underneath the application header.
if someone has also either very this problem, or another problem where some css does not work within Angular:
Since we mostly structure our UI code in multiple components in Angular, and since each component puts its own host-tag in the generated DOM between the actual html tags, the clarity library has some problems with it.
So as a workaround, if you still want to be able to keep your current htmls as they are, you can define this css in each your component's css file:
:host { display: contents; }
This causes the component's box not to render; means the host tags are still visible in DOM, but they will not have any effect regarding CSS. And any clarity CSS will work again.
I'm using multiple window on the same page and i want to apply
different styles on which window. I try to write a wrapper over the
window so it can be identified in the css by id but that does not work.
This is the source:
<div class="wrapper">
<div kendo-window="InitialisingApp">
</div>
</div>
This is the result:
<div class="wrapper"></div>
<div class="k-widget k-window....">
..........................
</div>
Any ideas about this problem?
Thank you! Have a nice day!
You can take a look at this:
Limit scope of external css to only a specific element?
Only other option that I see is to copy the theme and add a css selector in front of everything so that the theme only apply when wrapped with a specific class. Also keep in mind the CSS priorities to make sure the blue style gets applied over the default style.
Example:
<style>
.blueStyleWrapper .k-window {
/* Some kendo styles */
}
</style>
<div class="blueStyleWrapper">
<div class="k-window">
This window will be using the blue theme!
</div>
</div>
I have been using twitter bootstrap for a year, its the one of those things which -"just works" . With release of twitter bootstrap3 its become even better and awesome with its mobile first approach. But i am not able to understand how to use it properly with mobile first approach.
Earlier there was .span* and .offset* class but now there are .col-xs-* .col-md-* .col-sm-* .col-lg-* and .col-xs-offset-* .col-md-offset-* classes respectively. Even now 'it-just-works' using .col-md-* i want to know the right way to use all these classes so as to not just use them but use them correctly to get most out of bootstrap3.
Thanks.
I found these links very helpful:
http://www.helloerik.com/bootstrap-3-grid-introduction
http://bootply.com/bootstrap-3-migration-guide
Currently I'm using Bootstrap 3 for web development, how I'm using the Grid system is,
<div class="container">
<div class="row">
<div class="col-md-9"> <%--this for 9X3 grid--%>
<div class="row">
<div class="col-md-6"> <%--this for 6X6 inner grid--%>
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
I found (a) Bootstrap's own documentation helpful here, but also a (b) lynda.com topic in migrating to Bootstrap 3. Specifically, see "Dealing with grid changes"
(a) http://getbootstrap.com/css/#grid-offsetting
(b) http://www.lynda.com/course20/Bootstrap-tutorials/Bootstrap-3-New-Features-Migration/138156-2.html
I'm an experienced software engineer just getting into web dev and I'm having some issues getting bootstrap 3 row-fluid to work correctly. Basically, I'm trying to get a side navigation bar and an angular application to work together in a fluid layout, but when I attempt to use row-fluid, it is stacking the two elements instead of putting them side by side. Here is the code:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li class="nav-header">Administer</li>
<li class="active">Users</li>
<li>Devices</li>
</ul>
</div>
<div class="span9">
<div ng-view></div>
</div>
</div>
</div>
Also interesting is if I change row-fluid to row, the same behavior persists. Changing spanX to col-lg-X fixes it, but I lose the fluid layout. any ideas?
Use .col-md-* instead of .span*
Bootstrap 3 is responsive by default, so there is no need for the -fluid. you can just use row and container.
And the span classes you are using are from bootstrap 2.x not 3. you need to use something like col-lg-4 or col-xs-4. check out the bootstrap 3 docs for more info on this.
See here for more info on the Bootstrap 3 grid system