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>
Related
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.
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.
(There's a similar question here, but I am too much of a noob yet to translate this onto Bootstrap)
What I want is to have an area on the page between "header" and "footer" (let's call it "body"), which may have a
some fixed section, like BS4 "row", put on the top,
some variable content, consisting of several BS "rows", AND aligned
vertically on the middle of what is left of the body (or of the body
itself)
Can it be done in a responsive manner, and without JS (using only Bootstrap 4 CSS) ?
I've tried some stuff:
<body>
<div id="root" class="container">
<div style="height: 100%;">
<div><h1>HEADER</h1></div><hr>
<div style="min-height: 60%;">
<div class="h100">
<div>some badge</div><br>
<div>
<div class="row justify-content-between">
<div class="col-3">Item #2</div>
<div class="col-3 text-right">
<div>some stats</div>
</div>
</div>
<div class="">
<div class="row justify-content-center">
<div class="col text-center"><h3>THIS SHOULD BE IN THE MIDDLE OF A BLANK SPACE</h3></div>
</div>
<div class="row justify-content-center">
<div class="col-4 text-right"><button class="btn btn-link">it's just below and left</button></div>
<div class="col-4 text-left"><button class="btn btn-link">it's just below and right</button></div>
</div>
</div>
</div>
</div>
</div><hr>
<div class="footer">FOOTER</div>
</div>
</div>
</body>
(https://jsfiddle.net/f93mhdbr/) but as long as I add "d-flex" onto "body" div, or any of it's children, all the previous "row"/"col"-based layout turns into horrible mess ! (see https://jsfiddle.net/f93mhdbr/2/)
I suspect this is due to Bootstrap itself using Flexbox for column and rows,
but maybe any solution exists?
I will try to work on improving this question, I know it's very poor, but I right now I am too much in a despair to work it all out...
UPDATE: added links to whatever I was trying to reproduce
You need to use the flex property to achieve it. Using flex-grow here will make your variable element to grow and fill the remaining height of its container, if there is any. Then all is left to do is set align-items-center on the element to align it on the x-axis.
Here is the Fiddle
Please note I added background-colors so it's easier for you to see how much space each element uses, or use an inspector.
You can set any fixed height for the header, footer and content-top. The height of content and content-remaining will adapt responsively, because they have the property flex-grow: 1 set on them. Here's an example.
To explain further, because the container wrap has a min-height: 100-vh, the content element will grow to fill the entire viewport relative to the rest of the flexible items inside the wrap container. The same logic applies to content-remaining, the only difference is that its parent is the content element and not the wrap container.
As last, I added the IE fix for the min-height property on flex-items. It's a known bug and a quick and reliable fix is to wrap it in a separate flex container.
Hopefully this was helpful to you, if you have any questions left please comment on this answer.
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
I'll just show you a jsfiddle I've created to illustrate what I'm trying to achieve:
http://jsfiddle.net/vraG7/3/embedded/result/
Here's the code for that part:
<div class="row">
<div class="twelve columns">
<h2 class="first_column category_title">Nome Categoria</h2>
<div class="row">
<div class="nine columns thumbnail"><img
src="http://www.placehold.it/125x125" alt=""></div>
<div class="three columns date"><time
datetime="2013-02-28" >28<br>02<br>2013</time></div>
</div>
<div class="row">
<div class="twelve columns">
<h2 class="post-title">Titolto del post</h2>
</div>
</div>
</div>
</div>
</div> <!-- category-column -->
What I'm trying to do is to have the 125x125 image and the date box to its right to be the same width as the orange box with "Nome categoria". I thought I did everything right, but apparently I'm missing something.
It is hard to say what exactly the problem is. You are overriding a lot of foundation styles. height, margin, etc. on a bunch of divs.
1) You are applying the background color that you hope to align to to an <h2>. I suggest applying it to the containing <div>. the h2 will never to do the edge of the div, therefore you will not be able to align them.
2) for the date you applying the color to the background. it is possible they are already aligned. if you change the above.
3) for troubleshooting nested grids, it is easy to add the panel class to all of them, this will increase the spacing but let you see the relationship of each nested grid to each other.
this is on foundation 4, but might be useful:
http://foundation.zurb.com/grid-example2.php