I'm trying to make a UI layout with 100% height using flexbox. The problem is, this is an Angular 2 app so elements are added in that I don't really have any control of.
Here's my demo. As you can see, inside each .tab div (which you can think of like a page) there is another div that is hidden programatically. When this inner div is hidden, I would like the parent div to be effectively hidden as well, allowing the visible .tab to take up the entire remaining height.
<div class="foo">
<header>A</header>
<main>B</main>
<nav>
<div class="tab">
<div style="display: none;">Foo</div>
</div>
<div class="tab">
<div>Bar (I want this at the top)</div>
</div>
<div class="tab">
<div style="display: none;">Baz</div>
</div>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</nav>
</div>
My HTML isn't really flexible because of the way Angular 2 components work. How can I achieve my desired behavior?
Use directives as:
*ngIf, *ngClass, *ngStyle
To control style and visibility in DOM.
<div *ngIf="isActive === first" class="tab">
<div style="display: none;">Foo</div>
</div>
<div *ngIf="isActive === second" class="tab">
<div>Bar (I want this at the top)</div>
</div>
<div *ngIf="isActive === third" class="tab">
<div style="display: none;">Baz</div>
</div>
Related
I'm using Bulma (and Buefy with Vue) and I've got a panel with a series of items defined like this:
<template>
<div v-if="user">
<nav class="panel">
<p class="panel-heading">
Cities
</p>
<div class="panel-block" v-for="c in user.cities">
<div class="is-pulled-left">{{c}}</div>
<div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
</div>
</nav>
</div>
</template>
That looks like this:
How do I get it so the buttons are aligned on the right, not the left?
2021 Update: Newer versions of bluma have their flex box helpers. You can just add a single class to our panel-block to achieve this effect. Use is-justify-content-space-between like so:
<div class="panel-block is-justify-content-space-between" v-for="c in user.cities">
<div class="is-pulled-left">{{c}}</div>
<div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
</div>
Use justify-content: flex-end
Just by inspecting the html, we can see that the Bulma class panel-block applies a justify-content: flex-start to all it's child elements. This means that even if you apply is-pulled-right to the inner divs, everything will always be positioned left. Applying justify-content: flex-end to the outer parent container will force everything to the right. So, in short, you can override some of Bulma's default styling to get what you want.
.end {
justify-content: flex-end !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div>
<nav class="panel">
<p class="panel-heading">
Cities
</p>
<div class="panel-block end">
<div class="">New York</div>
</div>
<div class="panel-block end">
<div class="">London</div>
</div>
<div class="panel-block end">
<div class="">Paris</div>
</div>
</nav>
</div>
Try wrapping them in a column class.
For example:
<div class="panel-block" v-for="c in user.cities">
<div class="column is-6">
<div class="is-pulled-left">{{c}}</div>
<div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
</div>
</div>
Is there a simple css code for bulma making their horizontal tabs to vertical tabs? (sample below) I just want to overwrite their css
<div class="tabs">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
I'm afraid there isn't a simple class to add in Bulma to achieve this (or at least not that I'm aware of). But since Bulma is using flexbox you can achieve a lot by simply overwriting the flex-direction.
.tabs ul {
-webkit-flex-direction: column;
flex-direction: column;
}
I also made a fiddle to demonstrate.
Very late to on this one but if it helps anyone else. I use a horizontal tile with 2 children. The first child I use a panel without a heading, just panel blocks that are anchor tags for my vertical tabs, the second child a div to put the target content of the anchor tag in. Switches to tabs on top and content on bottom at mobile breakpoint. JSFiddle
<section class="section">
<div class="container">
<div class="tile is-ancestor">
<div class="tile box is-parent is-horizontal">
<div class="tile is-child is-2">
<nav class="panel datanav">
<a class="panel-block">Families</a>
<a class="panel-block">Members</a>
<a class="panel-block">Member Birthdays</a>
<a class="panel-block">Member Cars</a>
<a class="panel-block">Sponsors</a>
<a class="panel-block">Newsletter Mailed</a>
<a class="panel-block">Newsletter Electronic</a>
</nav>
</div>
<div class="tile is-child is-10 has-background-white-ter">
CONTENT
</div>
</div>
</div>
</div>
</section>
I want to align and image and an div inline. I also want the top's of the image and div to be aligned aswell. This is what I have so far
<div>
<img src="http://lorempixel.com/500/333/nature/2" class="img-fluid d-inline-block">
<div class="comment d-inline-block">
<div class="comment-header">
<span>title</span>
</div>
<blockquote>comment</blockquote>
</div>
I tried the class d-inline-block and it gets close to what I'm looking for but i need the text to be at the top.
You can see here:http://www.bootply.com/zpj12TL4wI
Bootstrap 4 includes a utility class for that: align-top. No extra CSS is needed...
<div>
<img src="http://lorempixel.com/500/333/nature/2" class="img-fluid">
<div class="comment d-inline-block align-top">
<div class="comment-header">
<span>title</span>
</div>
<blockquote>comment</blockquote>
</div>
</div>
http://www.bootply.com/wtAOA1JPn1
Just a vertical-align change is what ya need:
.comment {
vertical-align: top;
}
I'm trying to create a layout with bootstrap 3 and am finding an odd property:
here is the code:
<div class="jumbotron">
<div class="container center-form panel admin">
<div class="col-md-12">
<ul class="list-unstyled" ng-repeat="app in apps | filter:query ">
<li>
<h4> <a ui-sref="/api/admin/{{app._id}}">{{app.name}}</a></h4>
<div style="width:100%">
<p class="pull-right"><small> Job ID: {{app._id}}</small></p>
<p>Appointment Date: {{app.appointment_date | date:'fullDate'}}</p>
</div>
<br>
<address class="text-left">
{{app.address_1}}</br>
{{app.city}}</br>
{{app.postcode}}</br>
</address>
</hr>
</li>
</ul>
</div>
</div>
</div>
The issue I'm having is that these are both within a Jumbotron container, and for some reason, the <ul> tag spans across the whole of the col-md-12 div, but the <li> and all the elements within it wont, and only takes up about half of it. So even thought I've added style="width: 100%" to div, it only fills half the screen.
How can I make the li element span the same width as the ul element ?
I am trying to put 3 images into 3 boxes.Here I have used bootstrap v3.1.1, here the problem is image is not centering correctly.My medium device output like bellow image
Here no any problem for medium device but the problem is in small device this is looking like bellow image
Here image is not cantering.
I have add bellow html code and a css code
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<!--------------------------->
<div class="main-box">
<div class="box" >
<div class="box1 box sides-hz-2">
<img src="images/sss.png" class="img-responsive"></img>
<div class="list1">
<li class="header1"><Strong>Select</Strong>
</li>
</div>
</div>
<div class="box1 box sides-hz-2">
<img src="images/uuu.png" class="img-responsive"></img>
<div class="list1" style="background:#8C7E63;">
<li class="header1"><Strong>Online</Strong>
</li>
</div>
</div>
<div class="box1 box sides-hz-2">
<img src="images/uuu.png" class="img-responsive"></img>
<div class="list1">
<li class="header1"><Strong>Import</Strong>
</li>
</div>
</div>
</div>
<!--------------------------->
</div>
</div> <!--end of grid -->
</div> <!----end of row ------->
</div> <!----end of continer ------->
Here my own css for image
div.box1 img
{
display:block;
margin-left:25%;
}
May anybody help me for fix this problem ?
You must make the image responsive by adding these properties to img class
.responsive-image{
height:auto;
width:100%;
}
Auto height makes sure of resizing image without losing the aspect ratio
If you are using bootstrap, it has class img-responsive which will take care of responsiveness of the image.
Tip : On resize the image tend to resize and shrink. To make it look nice you can add class center-block to keep the image in center of outer div :-)