im getting my feet wet with Angular Material.
I have referred to the documentation on angular material website and i am trying to accomplish the foll:
the second tag, that is, the 'name of the master' shld appear in the middle. whereas the position of ngmasters is all right.
this is how im trying to implement this functionality to no avail:
<md-toolbar>
<div class="md-toolbar-tools">
<p><strong>ngMasters</strong></p>
<div layout="row" layout-align="center center">
<p>Name of the Master</p>
</div>
</div>
</md-toolbar>
any help or direction wld be appreciated. thank you.
You'll need to apply the flex attribute to the <div> so it takes up available space within the <md-toolbar>:
<md-toolbar>
<div class="md-toolbar-tools">
<p><strong>ngMasters</strong></p>
<div flex="" layout="row" layout-align="center center">
<p>Name of the Master</p>
</div>
</div>
</md-toolbar>
Related
I am fairly new to Bootstrap and it's been super helpful. But there's one case I can't quite figure out.
I've added a picture of what I need. Desktop view and Mobile view respectively.
What I want to achieve
Here's some code that I tried, but it didn't quite work the way I wanted it to.
<div class-"row">
<div class="col-sm-12 col-lg-2">
<img src="./path/to/logo" alt="logo" class="logo">
</div>
<div class="col-sm-12 col-lg-2">
<p>Company Name</p>
</div>
</div>
Any help would be sincerely appreciated folks!
I assume that you are using bootstrap 4 or 5.
What you have to do is simply use 'col-12' along with your col-lg-2 and col-sm-12
I am working on displaying certain details on a card upon hovering over the top portion of the card using AngularJS, Angular Material and CSS.
This is the code pen created- https://codepen.io/SSPai/pen/oyVmZg
<md-button md-no-ink class="member-card" ng-click="">
<div layout="column" layout-align="center center">
<!-- The details should be shown upon hovering over "top-card-container" only -->
<div class="top-card-container">
<div class="member-photo-background mem-image"><md-icon class="member-photo">account_circle</md-icon></div>
<div class="member-details-part">
<div layout="column" layout-align="space-around stretch">
<div layout="row" layout-align="space-around center" class="member-details member-details-start">
<md-icon class="member-detail-info member-detail-icon">location_on</md-icon>
<div flex
class="member-card-data member-detail-info member-details-value member-title">
<div
ng-bind="memberLocation"></div>
<md-tooltip md-direction="right"
ng-if="memberLocation">
{{memberLocation}}
</md-tooltip>
</div>
</div>
</div>
</div>
</div>
<div class="member-name-bar" layout="row" layout-align="center center">
<div class=" member-card-data member-name">
<div
ng-bind="memberDisplayName">
</div>
<!-- Even this display of tooltip in IE is not working-->
<md-tooltip>{{memberDisplayName}}</md-tooltip>
</div>
</div>
</div>
</md-button>
The issue is that the above codepen works perfectly in Chrome but not in IE11. In IE11, upon hovering, the default hover property of the button is applied which is not desirable.
In IE11: The details upon hovering are not shown and the Tooltip upon hovering over the name in bottom portion of the card is not shown.
Please help in making the above code pen IE11 compatible.
I think CSS rules for .md-button are interfering with your custom rules for hover effect. I would suggest to use a <div> tag for container instead of <md-button>.
I am using this structure but
<div class="row">
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
</div>
For some reason the has as much padding as it would take to "match" the next div in the horizontal row. For example, if the first div is text, then the second is text, and the third is an image...the first two divs "grow" to be the size of the third. I thought with this Bootstrap 4 it was supposed to be flexible? Thanks.
Bootstrap 4 utilizes flexbox (display: flex) for a lot of it's layout, including it's cards. That is the reason that all the cards grow in accordance to it's siblings. You can learn more about flexboxes here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
and
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
You're using col-sm-4 which will make all the columns be the same size which may be what you're referring to as the first two divs grow. If you mean something else, I would look into how Bootstrap 4 works with flexbox which may also help you understand how the columns act in Bootstrap 4
Sometimes the images can push out the divs. Set a style to the image to be width: 100% and see if that makes any difference
Ok this works. Thanks everyone above for your help, I took many things from it to get the answer. It turns out if I'm reading this correctly flex itself won't allow for "three columns with shrunken divs" so one div can be bigger than the others but they all shrink to their own respective sizes around their content. So I used Masonry. I just included the .js in my head section as a script reference then added the below. If you aren't using .NET (meaning you're using PHP) just erase out the itemtemplate and repeater stuff...the code is the same for you.
<div class="row" style="display:flex;" data-masonry='{ "gutter": 0, "itemSelector": ".col-4" }'>
<asp:repeater id="ItemsList" runat="server">
<div class="card">
I am building a collection-repeat that iterates through my objects and fills up cards based on them. I have two main questions to complete my job. I have been using 'Thumbnail' cards when using this approach but I am not able to correctly set margins. It basically adds some margin on the left and none on the right nor between different cards (bottom margin). I have tried CSS, but nothing works.
This is my HTML code:
<div class="card" collection-repeat="item in items" item-width="'100%'">
<div class="item item-divider">
{{item.eventTitle}}
</div>
<div class="item item-text-wrap">
<b>{{item.eventHour}}</b><br />{{item.eventText}}
</div>
</div>
And this is what I get on the browser (no custom CSS added here), look at the left margin and the unexisting one on the right:
How can I solve both problems with bottom and right margins?
Thanks in advance
is there a specific reason you are using collection-repeat? it will limit your styling options.
converting to a simple ng-repeat makes your issues go away http://codepen.io/aaronksaunders/pen/PzZVPr
<ion-content>
<div class="list">
<div class="card" ng-repeat="item in items">
<div class="item item-divider">
{{item}} HEADER
</div>
<div class="item item-text-wrap">
{{item}} BODY..
</div>
</div>
</div>
</ion-content>
When I use md-sidenav without having md-toolbar, everything is OK. Means that, opening sidnav will perform correctly like image below.
But when I add a toolbar before a sidenav or before the section containing sidenav, Upon opening the sidenav the page will find scroll and sidenav will not fill the entire page's height(image below), while it should be the same as before.
toolbar height size will add to the height of page.
complete code at plnkr
here is the main part of the code:
<div ng-controller="AppCtrl" layout="column" layout-fill>
<md-toolbar>
<div class="md-toolbar-tools" layout="row" style="background-color:crimson">
...
</div>
</md-toolbar>
<section layout="row" flex>
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
...
</md-sidenav>
<md-content flex layout-padding>
...
</md-content>
<md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">
...
</md-sidenav>
</section>
</div>
I solved the problem with using different layout of page.
Using md-sidenav before md-toolbar:
<div layout="row">
<md-sidenav>
</md-sidenav>
<div layout="column">
<md-toolbar>
</md-toolbar>
<md-content>
</md-content>
</div>
</div>