I want to build a nav menu. I want it to be tall, and I want to split it horizontally in two. Then I want the left part to have something aligned to the bottom of the menu. The right part should have the nav links and be middle-aligned. I want to use as less css as possible. (I am also working with Angular Material and Bootstrap if that helps). Here is the plunkr. I have already checked out this checkit but I am looking for another option.
<div class="menu container-fluid">
<md-toolbar class="md-tall">
<div class="container">
<div layout="row">
<!--Left-->
<div layout="row">
<md-button aria-label="Settings" class="shownSm">
<ng-md-icon icon="menu" ng-click="main.small =!main.small" style="fill: #fefefe;"></ng-md-icon>
</md-button>
<div layout="column">
<span flex></span>
<span>
<small>Some name</small>
</span>
<span>
<small>Something else</small>
</span>
</div>
</div>
<span flex=""></span>
<!--Right-->
<div class="right" layout="column">
<span flex=""></span>
<div layout="row" class="hiddenSm">
<ul class="text-center">
<span>Item1</span>
<span>Item2</span>
<span>Item3</span>
</ul>
</div>
</div>
</div>
</div>
</md-toolbar>
</div>
Related
Is it possible using Semantic UI Card have the image on the left? The documentation shows example where the image is always on the top. What i want to obtain is something like the Semantic UI Item (but of course i want use cards), like this:
What i want to obtain is something like this:
As you can see the image is on the left and it is something similar to a Semantic UI card.
The best you can do with semantic components would be this:
<div class="ui card" style="max-width: 100%; min-width: 100%;">
<div class="content" style="padding: 0;">
<div class="ui items">
<div class="item">
<div class="ui medium image">
<img src="https://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="content" style="padding: 1rem;">
<a class="header">12 Years a Slave</a>
<div class="meta">
<span class="cinema">Union Square 14</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui label">IMAX</div>
<div class="ui label"><i class="globe icon"></i> Additional Languages</div>
</div>
</div>
</div>
</div>
</div>
<div class="extra content">
<a>
More Info
</a>
</div>
</div>
I have changed the padding on the content but that's the only custom CSS used.
To get it to look exactly like your image you will need to make your own component/style it your self.
In the picture below you can see my right arrow has gone off the screen when the screen size is small. How can I fix this?
The arrows and carousel are aligned mostly using bootstrap's grid with a little bit of custom css. It is easiest just to see it in a JSFiddle, but here is the HTML:
<div class="container-fluid">
<div class="row vcenter-parent">
<div id="carouselParent" class="col-xs-12">
<div id="carousel">
<div><img src="http://goo.gl/Z0AdfK"></img></div>
<div><img src="http://goo.gl/Z0AdfK"></img></div>
<div><img src="http://goo.gl/Z0AdfK"></img></div>
</div>
</div>
<div class="col-xs-1 vcenter-child" style="float:left;">
<a class="slick-prev">
<i class="fa fa-arrow-left fa-4x"> </i>
</a>
</div>
<div class="col-xs-1 col-xs-offset-11 vcenter-child hright" style="float:right;">
<a class="slick-next">
<i class="fa fa-arrow-right fa-4x"> </i>
</a>
</div>
</div>
</div>
What I think is happening:
The arrows are not bound by the width of the div. For the left arrow this is ok because the arrow continues on to the right of the div, so really only the left padding is affecting the arrow's position.
However, on the right the arrow begins drawing after the left padding and continues right off the durping screen.
Update:
Yes my column math was wrong, it should have been an offset of 10 not 11. However, the arrow now needs to be pushed to the right side. Any ideas?
Updated JSFiddle
Your bootstrap column offset was messing up column layout. Just move each of the arrows into a single size 12 column and float them left and right respectively.
<div class="container-fluid">
<div class="row vcenter-parent">
<div id="carouselParent" class="col-xs-12">
<div id="carousel">
<div><img src="http://goo.gl/Z0AdfK"></img></div>
<div><img src="http://goo.gl/Z0AdfK"></img></div>
<div><img src="http://goo.gl/Z0AdfK"></img></div>
</div>
</div>
<div class="col-xs-12 vcenter-child" style="float:left;">
<a class="slick-prev pull-left">
<i class="fa fa-arrow-left fa-4x"> </i>
</a>
<a class="slick-next pull-right">
<i class="fa fa-arrow-right fa-4x"> </i>
</a>
</div>
</div>
<div class="row vcenter-parent" style="padding-top: 50px">
<div class="col-xs-10.col-xs-offset-1">
<div id="carouselText">
<div><p>meow</p></div>
<div><p>meow meow</p></div>
<div><p>meeeeow meow</p></div>
</div>
</div>
</div>
</div>
I must be missing something really simple here:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader center-block"></div>
</div>
</div>
I've used the bootstrap classes, including center-block. Yet it always looks like this:
Why isn't the spinner icon in the centre of the page?
There is a work around to your problem by changing some HTML as follows
<div class="row">
<div class="col-lg-12 text-center" ng-show="users.busy">
<span class="spinner-loader">Loading</span>
</div>
</div>
instead of <div> for spinner I took a <span> which will be centered horizontally because of text-center class to parent <div>.
You can try this:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<center>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader"></div>
</div>
</div>
</center>
Instead of using center-block, add text-center class
I ve been using the bootstrap col-md-offset css to center my divs. For example:
<div class=container>
<div class=row>
<div class=form-horizontal>
<div class="col-md-offset-4 col-md-4">
<div class="your div">
</div>
</div>
</div>
</div>
Your div will be responsive, thus as you resize the window the div will remain in the center of the window.
Without tinkering too much with my own CSS, Is there an attribute or configuration I can use to left align the text in a md-button that is stretched a bit to fit a menu for example?
This is my current view
<md-sidenav md-is-locked-open="$mdMedia('gt-md')" layout="column">
<md-toolbar>
<h1 class="md-toolbar-tools">
<a ng-href="/" layout="row" href="/">
<div class="docs-logotype">Material Design</div>
</a>
</h1>
</md-toolbar>
<md-content flex role="navigation" layout="column">
<md-button>Button1</md-button>
<md-button>Button2</md-button>
</md-content>
</md-sidenav>
<md-content flex layout="column">
<md-toolbar>
<div class="md-toolbar-tools">
<button class="md-icon-button md-button" aria-label="Settings">
<md-icon md-svg-icon="images/icons/menu.svg" aria-hidden="true"></md-icon>
<div class="md-ripple-container"></div>
</button>
<md-button>Button1</md-button> <!-- how to left align this text inside a stretched button -->
<md-button>Button2</md-button>
<span flex=""></span>
<md-button>Right side button</md-button>
<button class="md-icon-button md-button" aria-label="More">
<md-icon md-svg-icon="images/icons/more_vert.svg" aria-hidden="true"></md-icon>
<div class="md-ripple-container"></div>
</button>
</div>
</md-toolbar>
<md-content flex>
Some content !!
</md-content>
</md-content>
Use empty <span> tag with a flex attribute, as shown below. You can even specify a value to the flex attribute to get a more specific location.
<div layout="row" layout-align="start center" flex>
<md-button>button 1 </md-button>
<span flex></span>
</div>
If you just want to align text inside a button, try setting the style attribute like this:
<md-button style="text-align:left">button </md-button>
You can do this if using within md-toolbar(Angular 4) Angular 6+:
Html
<mat-toolbar id="toolbar" color="primary" >
<mat-button>button 1 </mat-button>
<span class="spacing"></span>
<mat-button>button 2 </mat-button>
</mat-toolbar>
OR
<mat-toolbar id="toolbar" color="primary">
<mat-button>button 1 </mat-button>
<span style="flex: 1 1 auto;"></span>
<mat-button>button 2 </mat-button>
</mat-toolbar>
Your CSS if no styling in HTML:
.spacing {
flex: 1 1 auto;
}
Hope this helps someone.
in VueJS (nuxt-vue-material)
.md-button .md-ripple {
justify-content: unset;
}
I'm using Bootstrap 2.3.2 for a website which contains an accordion element with one row within it. Accordion is span6 and I expected that the row will be able to contain two span3 elements but it can't. Here is my code simplified:
<div class="span6">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<p><h3>Some text here</h3></p>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="row">
<br />
<div class="span3 offer">
<div class="offer-wrap">
This one should be on the left
</div>
</div>
<div class="span3 offer">
<div class="offer-wrap">
This one should be on the right, but is BELOW
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I was able to make them appear next to each other, but only with some nasty CSS fiddling, which only works on my screen size.
Expected behaviour: http://imgur.com/O1z4mZN
Actual result: http://imgur.com/fP568Tl
If I put that row outside of accordion element everything looks perfect.
This has to do with the margins of both the accordion and the .span classes.
My tip: never use the .row class, always use the .row-fluid class. With .row-fluid, you can always split up the available width into 12 columns.
<div class="span6">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<p><h3>Some text here</h3></p>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<br />
<div class="row-fluid">
<div class="span6 offer">
<div class="offer-wrap">
This one should be on the left
</div>
</div>
<div class="span6 offer">
<div class="offer-wrap">
This one should be on the right, but is BELOW
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>