I have a code block like:
<div class="col-md-12">
<div class="row">
<ng-template dynamicComponents></ng-template>
</div>
</div>
dynamicComponents is a directive using which I inject dynamic components.
All the application is using Bootstrap and is working fine but the dynamically injected components are shrinking or not working with bootstrap css, I even tried using encapsulation: ViewEncapsulation.None but it doesn't seem to work.
Please refer the screenshots below:
Here everything works fine till class=row and it is taing the full width, but once a dynamic component named app-from-builder-components-editor is injected it breaks up the bootstrap properties, please see below:
What can I do to get the bootstrap properties to work ?
The problem is your component host (app-form-builder-components-editor) that sits between your row and col divs. To make it work, your 'col-md-12' div should be a direct child of your 'row' div.
What you could do is putting the <div class="row"> inside your app-form-builder component's template to work around this issue.
I solved this by using containers:
<ng-template>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<!-- content -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<!-- content -->
</div>
</div>
</div>
</ng-template>
Not ideal, but it seems to stop the layout issue. Angular templates seem to rewrite the DOM and nest the rows, for some reason. This "resolves" the issue.
Related
In angular is it possible to have text wrap around an image if they are in two separate components? Or does the image and text have to live inside the same component? I need this to work if the image is on the left or right
<div class="row">
<app-img></app-img>
<app-copy></app-copy>
</div>
code simulator: StackBlitz
Adding style to the component tag solves the problem for me.
<div class="row">
<app-my-img style="float:right"></app-my-img>
<app-my-copy></app-my-copy>
</div>
<hr>
<div class="row">
<app-my-img style="float:left"></app-my-img>
<app-my-copy></app-my-copy>
</div>
I am using bootstrap visibility classes as follows on my webpage:
<div class="hidden-sm">
<div id="lrg-div-A"></div>
</div>
<div class="hidden-lrg">
<div id="lrg-div-B"></div>
</div>
<div class="hidden-md">
<div id="lrg-div-C"></div>
</div>
The visibility classes work and are hidden in the viewport where required. But, when I look at the markup in the browser's developer tools, I still see the markup for the hidden divs. For example, on large screens, "lrg-div-B" is not seen in the viewport, but the markup is still seen in the HTML tab. Is there anyway to remove it from the markup as well, similar to what 'dispaly: none' does?
display: none doesn't remove it from the markup, but it does remove it from the document flow so that it doesn't take up space. You can remove a node with javascript using remove() or removeChild() but mind you can't get it back again (unless you store it and re-append it later).
console.log('Hidden node: ', document.querySelector('.hidden-sm'));
//Hidden node: <div class="hidden-sm">…</div>
console.log('Before remove(): ', document.getElementById('lrg-div-B'));
// Before remove(): <div id="lrg-div-B">large B</div>
document.getElementById('lrg-div-B').remove();
console.log('Removed node: ', document.getElementById('lrg-div-B'));
// Removed node: null
.hidden-sm {
display: none;
}
<div class="hidden-sm"> <!-- hidden but still in markup -->
<div id="lrg-div-A">large A</div>
</div>
<div class="hidden-lrg">
<div id="lrg-div-B">large B</div> <!-- removed from markup -->
</div>
<div class="hidden-md">
<div id="lrg-div-C">large C</div>
</div>
It is not supposed to remove the elements from markup. CSS handles how DOM looks not its structure. You need to use a bit of Javascript if you actually want to remove the DOM elements.
I have a table inside a div that looks like this:
<div fxLayout="row" class="container" fxLayoutAlign="start center">
No related CSS -- I have tried various things but in internet explorer, where I have to use polyfills for anything to work anyway, it will simply refuse to center.
I've found a similar stackoverflow thread but the alignment of the items inside the div was different and didn't really apply to my use case.
I ended up wrapping my whole app in app.component.html like this:
<div class="container"
fxLayout="column">
<div>
<app-navigation></app-navigation>
</div>
<div fxFlexAlign="center" id="routerOutletDiv">
<router-outlet></router-outlet>
</div>
</div>
Then, in my component that I'm trying to center things, my main div where I wrap ALL other divs has the following:
<div fxFlexAlign="center" class="container" fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="15px">
Whilst most of the divs inside this 'parent' have the following:
<div fxFill class="item">
And some of them that had more items inside them, have the following:
<div fxFill fxLayoutAlign="center" class="item">
Also ended up adding fxLayoutAlign="center" to text that had icons inside it, it didn't want to center otherwise. But I did not have to add extra css or touch other properties.
I would like to create a responsive website with the Polymer Starter Kit + the prebuilt polymer elements.
Now, how to achieve something like a container or grid like in a css framework like bootstrap?
Is it possible with only Polymer, or my only options are my own custom code, or a framework/grid system like skeleton, bourbon neat, etc?
I tried to look at iron-flex-layout but it does not collapse on top of each other like a grid on smaller screen sizes, you can see it here:
http://plnkr.co/edit/ds6gAyohtZW4ESkxu83o?p=preview
<div class="horizontal layout" style="height:100%">
<div class="flex-1">
Left column
</div>
<div class="flex-4">
Right column
</div>
</div>
It does not "collapse" so the boxes will be under each other if you resize the window, it just scales.
So, how should I approach it?
EDIT:
I would like to achieve something like this:
http://www.bootply.com/4CJ9GOYEuH
So if you resize the window the dics will collapse onto the top of each other, instead of staying next to each other.
You can use the iron-flex-layout and iron-media-query in combination. Iron-media-query will update based on the viewport size and you can bind its media-query matches to other elements.
Naively, you could do the following, but equally you could use queryMatches to generate the "flex-n" classes for your layout.
<iron-media-query query="(min-width: 600px)" query-matches="{{queryMatches}}"></iron-media-query>
<template is="dom-if" if="{{queryMatches}}">
<div class="horizontal layout" style="height:100%">
<div class="flex-1">
Left column
</div>
<div class="flex-4">
Right column
</div>
</div>
</template>
<template is="dom-if" if="{{!queryMatches}}">
<div>Left column</div>
<div>Right column</div>
</template>
Try Iron Grid IRON-GRID and find more Custome Elements if needed.
You can add Bootstrap's grid CSS inside a web component, something like:
<dom-module id="bootstrap-grid">
<template strip-whitespace>
<style>
/* Grid styles from Bootstrap */
</style>
<content></content>
</template>
<script>Polymer({ is: 'bootstrap-grid' });</script>
</dom-module>
The Bootstrap grid styles are too large for an SO answer, so here is a JSFiddle, and here it is on GitHub.
And then inside this component you can use it just like you're in <div class="container-fluid">:
<bootstrap-grid>
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-4"><div class="panel">one</div></div>
<div class="col-xs-12 col-sm-6 col-lg-4"><div class="panel">two</div></div>
<div class="col-xs-12 col-sm-6 col-lg-4"><div class="panel">three</div></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">A</div></div>
<div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">B</div></div>
<div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">C</div></div>
<div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">D</div></div>
</div>
</bootstrap-grid>
In the Fiddle I've added --bootstrap-grid-gutter to configure the gutter size, but I can't make the breakpoints configurable due to issues with the CSS shim. You could make that configurable with <iron-media-query> if you needed it.
I am new to Bootstrap and was trying my hands on 12 column layout. Looking at the tutorials it should just happen out of box, but for some reason the Divs are stacking one below another rather than arranging themselves in row layout with spans. Its baffling can someone help?
<body>
<div class="row">
<div class="span6">Text 123456</div>
<div class="span6">Text 123456</div>
</div>
</body>
Here is is the fiddle - I am using Chrome and Firefox.
http://jsfiddle.net/vshtmczf/
Well, you have to got parent element with class container and instead of span6 use col-xs-6, because you are using Bootstrap 3.2. documentation
look here:
<body class="container">
<div class="row">
<div class="col-xs-6">Text 123456</div>
<div class="col-xs-6">Text 123456</div>
</div>
</body>
jsFiddle