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>.
Related
I seem to have an issue with one of my pages I'm trying to layout. I implemented FullCalendar and added it to one of my pages/views, I'm now noticing that my header dropdown when it overlays on top of where the calendar begins -- the dropdown isn't opaque/forced overtop of the underlaying content like how it is on all other pages. Attached is the example of what is happening.
Any ideas? If I should be posting my CSS let me know. It's the default for FullCalendar & Bootstrap with no modifications.
Here is the view HTML/classes applied to the content it's not drawing 'over/on top of':
#section('content')
#include('layouts.headers.cards')
<div class="container-fluid mt--7">
<div class="row">
<div class="col">
<div class="card shadow">
<div class="card-header border-0">
<div class="col-14">
<div id='calendar'></div>
</div>
</div>
</div>
</div>
</div>
#include('layouts.footers.auth')
</div>
#endsection
#calendar{
z-index: 999999;
position: relative;
}
<< That should fix it!
Read: https://www.w3schools.com/cssref/pr_pos_z-index.asp
I'm using semantic-ui as my site ui framework, alongside angular 1.5.8.
What happens when the sidebar is visible is that the browser must hide nearly 50% of the card, within a ui cards dive, before the card responsively moves to a new row.
<body ng-controller="MainCtrl">
<div class="pushable">
<div class="ui left vertical inverted visible thin sidebar menu">
<a class="item">
Overview
</a>
<a class="item">
Upcoming
</a>
</div>
<div class="pusher">
<div style="margin: 20px;" class="ui cards">
<div class="card" ng-repeat="bill in bills">
<div class="content">
<div class="header">
{{bill.name}}
</div>
<div class="meta">
{{bill.biller}}
</div>
</div>
<div class="extra content">
<div class="ui two buttons">
<div class="ui basic green button">Edit</div>
<div class="ui basic red button">Delete</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
If I remove the visible class from the sidebar div, then it works as expected. As soon as the browser window chrome gets close to the border of the card, the card wraps to a new row. What am I doing wrong? Do I have to manually account for the size of the sidebar myself? It doesn't seem like I would have to, considering the cards and sidebar are both semantic-ui components.
I've got a working plunker demonstrating this issue as well.
From http://semantic-ui.com/collections/menu.html
A container can be used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.
Add the container class to your to your cards div to make it responsive.
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>
This is my current code
.tag-container.bottom-border.col-middle
h1.text-center {{ tag.name }}
button.btn.btn-follow.pull-right(ng-hide="hasFollowed" ng-click="tagArticles.followTag()") Follow
I want to make the tag.name in the middle, and the button in the right, but it didn't display correctly. How should I structure these two part? What css should I use?
Thanks.
Update
This is the simplified code about basic html
<row>
<div>
<h1> Tag name</h1>
</div>
<div class="pull-right">
<button>Follow</button>
</div>
</row>
Feel free to work on it. Thanks
If you want to stick to pure bootstrap styles, something like this would work:
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1 class="text-center">Tag name</h1>
</div>
<div class="col-md-1 text-center">
<button class="btn btn-follow " style="margin-top: 1.5em;">Follow</button>
</div>
</div>
You'll need some extra styling to vertically center the button (to replace the inline style adding 1.5em margin to the top).
Also that styling centers the button below the h1 in mobile breakpoints ... that may or may not be what you're after.
Currently i have this setup on a page, there are three buttons in a button group acting as tab toggle buttons and below them is a bootsrap well having tab pages. Is there a way to have the button group become part of the well, so it sits in the center of the top edge of the well?
I have tried code from here: Bootstrap - Adding legend to well but didnt work.
Here is img of current setup
Code is simple
<div style="text-align:center">
<div id="tab" class="btn-group" data-toggle="buttons-radio">
<a style="padding:9px;font-size:16px" href="#tdel" class="btn active" data-toggle="tab">Delegations</a>
<a style="padding:9px;font-size:16px" href="#tind" class="btn " data-toggle="tab">Individuals</a>
<a style="padding:9px;font-size:16px" href="#tobs" class="btn " data-toggle="tab">Observers</a>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane" id="tind">
</div>
<div class="tab-pane" id="tobs">
</div>
<div class="tab-pane" id="tdel">
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/mikeyfreake/CbNfa/2/
Place the buttonset div inside the well div.
Fiddle for reference.
You can also margin-top: -15px; in your CSS sheet to further move it up to sit in the center top part of the well. Hope this helps!