I have an Angular1.0.7 web application. I´m adding a Twitter Bootstrap 2 tooltip to an span tag, but the tooltip is displayed very narrow. This is not happening with many other tooltips I have in the application.
<span style="line-height: 45px" ng-show="controlSkipperType || createBoatPoliciesForm.skipperType.$error.validateSkipperType" class="text-error" ng-switch="skipperTypeError">
<span ng-switch-when="OPTIONAL_ERROR" style="position: relative; top: -15px; margin-left: 10px" class="pull-left">{{'SKIPPER_TYPE_OPTIONAL_ERROR' | translate}}.</span>
<span ng-switch="skipperTypeError" style="position: relative; top: -15px; margin-left: 10px">
<i ng-switch-when="OPTIONAL_ERROR" class="fa-icon-question-sign" tooltip="Text to show in the tooltip"></i>
See the picture:
Something like this:
div > div .popover-content {
min-width: 620px !important;
}
Related
I want to make a hover animation effect in scss. The idea is when cursor hover on the card, another hidden card appear on top of the hovered card.
But now I got stuck on making the hidden card scss: I am not sure how to make the card the same size and the same position as the bottom card(dark blue card). It is for the className "card-hover"
Below is the code for js:
<div className="gallery">
{data.map((item)=>
<div className="card-holder" key={item.id}>
<div className="card-head">
<img className="card-img" src={item.image} alt="project item" />
</div>
<div className="card-body">
<h2 className="item-name">{item.title}</h2>
<div className="item-date">{item.year}</div>
</div>
<div className="card-hover">
<div className="item-role">{item.role}</div>
<div className="item-type">{item.type}</div>
<div className="item-decs">{item.desc}</div>
</div>
</div>
)}
</div>
Code for scss:
.gallery{
margin-left: 10rem;
margin-right: 10rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 8px;
justify-content: center;
}
.card-holder{
border-radius: 4px;
margin-top: 1rem;
background-color: $darkBlue;
box-shadow: 0px 8px 56px rgb(15 80 100 / 16%);
}
.card-hover {
position: absolute;
background-color: #D62839;
display: inline;
width: 100%;
height: 100%;
}
The current result:
enter image description here
I have looked through tutorial videos of how to make this kind of hover effect, but all solutions so far were to set
width:100%;
height:100%
or
top:0;
bottom:0;
left:0;
right:0;
However, when I tried them the result is like the screenshot above. Can someone help me with this? Thank you
I'm using text-angular with editableTextAngular directive in a angular xeditable form and when entering in edit mode the text container goes to infinity.
This is my CSS:
.ta-editor {
min-height: 300px;
height: auto;
overflow: auto;
font-family: inherit;
font-size: 100%;
margin:20px 0;
}
View Mode & Edit Mode:
In view mode it is shown correctly. In edit mode the text container goes outside the screen.
This is my html:
<div class="form-group" style="width: 100%;margin-top: 10px;">
<span
editable-text-angular="notificacion.texto"
data-e-name="notificacion.texto"
data-e-class="editable-text-angular"
ng-bind-html="notificacion.texto"
>
{{notificacion.texto}}
</span>
</div>
I am looking for Tabs displayed top to bottom with tab navigation on the left. Is there anyway this can be achieved in Angular Material library?
This codepen by Rahul Sagore uses vanilla Material, not specifically for Angular, but it's exactly what you want. I was looking for the same thing as you; it's a shame Material doesn't offer this, but I can see how it would go against their principles and make Material too extensive.
It comprises of custom css (perhaps overriding, I'm not sure) and use of particular Material classnames. Below I've pasted the contents into a snippet.
I had an issue with the mdl-cell--n-col classes so I changed the content one from 10-col to 6-col so it wouldn't wrap the content beneath the tabs in the restrictive space of this post. You'll probably have to tinker with that yourself, or scrap that and use Material styles the way you know how. Similarly, I cannot see what the .hollow-circle spans are doing, so perhaps they aren't needed.
/*Vertical Tabs*/
.vertical-mdl-tabs {
margin-top: 30px;
}
.vertical-mdl-tabs .mdl-tabs__tab-bar {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding-bottom: 35px;
height: inherit;
border-bottom: none;
border-right: 1px solid rgba(10, 11, 49, 0.20);
}
.vertical-mdl-tabs .mdl-tabs__tab {
width: 100%;
height: 35px;
line-height: 35px;
box-sizing: border-box;
letter-spacing: 2px;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded a.mdl-tabs__tab.is-active {
border-right: 2px solid #ED462F;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
content: inherit;
height: 0;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__panel.is-active, .mdl-tabs__panel {
padding: 0 30px;
}
.vertical-mdl-tabs.mdl-tabs .mdl-tabs__tab {
text-align: left;
}
<script src="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.indigo-pink.min.css" rel="stylesheet"/>
<div class="mdl-tabs vertical-mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--2-col">
<div class="mdl-tabs__tab-bar">
<a href="#tab1-panel" class="mdl-tabs__tab is-active">
<span class="hollow-circle"></span>
Tab 1
</a>
<a href="#tab2-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span>
Tab 2
</a>
<a href="#tab3-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span>
Tab 3
</a>
</div>
</div>
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-tabs__panel is-active" id="tab1-panel">
Content 1
</div>
<div class="mdl-tabs__panel" id="tab2-panel">
Content 2
</div>
<div class="mdl-tabs__panel" id="tab3-panel">
Content 3
</div>
</div>
</div>
</div>
you can have verticval tabs by adding vertical attribute to the mat-tab-group and adding following css to your page.
mat-tab-group[vertical] .mat-tab-labels {
display: flex;
flex-direction: column!important;
}
mat-tab-group[vertical] {
display: flex;
flex-direction: row!important;
}
here's the mat-tab-group element with vertical attribute
<mat-tab-group flex="1" vertical>
<mat-tab label="Tab 1"> Loading ... </mat-tab>
<mat-tab label="Tab 2" > Loading ... </mat-tab>
</mat-tab-group>
I'm trying to build an "off canvas menu" like that on www.bikepacking.com,
but I'm struggling with using this in a container.
I use Bootstrap with QuantumUI and without jQuery.
My approach is something like this:
<div class="container wrapper">
<rw-navigation>
</rw-navigation>
<div class="brandbar">
<input type="checkbox" id="nav-trigger" class="nav-trigger"/>
<label for="nav-trigger"></label>
</div>
<div class="content">
<header>
</header>
<div ui-view=""></div>
<footer>
<p>© 2015 {{'footer.copyright' | translate}}</p>
</footer>
</div>
</div>
With some styles like this:
div.container.wrapper{
position: relative;
overflow: hidden;
.navigation{
position: absolute;
top: 0;
bottom: 0;
height: 100%;
left: 0;
width: 256px;
#include transition(left, 0.5s, ease);
background: #111;
color: white;
}
.brandbar{
position:absolute;
top: 50px;
left:0;
#include transition(left, 0.5s, ease);
}
.content {
overflow: hidden;
position: relative;
width: auto;
bottom: 100%;
left: 0;
}
}
The .navigation class is applied in the template of the rwNavigation directive with replace: true.
It doesn't work and I don't know why.
OK,
Now I got some tima at work for that problem.
THX# Sitepoint for this tutorial which gave me the right direction:
http://www.sitepoint.com/pure-css-off-screen-navigation-menu/
BUt I had to change form position:fixed to position:absolute, because position:fixed only refer to the window and position:absolute refer to prant position:relative element (or windows if there isnt a parent postion:relative element)
And here is a plnkr with the solution for a boxed off canvas menu
http://plnkr.co/edit/OdkXXkhGzKLd0qi2RZ4h?p=preview
I recently updated a Cordova mobile app to use OnsenUI v1.3.8 (in order to fix a problem with broken back buttons when viewing the app on iOS 8.4). The problem I'm now seeing is that the back buttons throughout the app, send you all the way back home. Even levels down in the app, pressing the back button takes you to the previous page, then seems to fire another event to go back again.
I have the following syntax in my index.html (home) page:
<body onload="onLoad()">
<ons-navigator title="Navigator" var="myNavigator" page="main.html">
</ons-navigator>
</body>
In the rest of my app, I'm using the following syntax:
<ons-toolbar>
<div class="left animated fadeIn">
<ons-back-button><div class="animated fadeIn">Back</div></ons-back-button>
</div>
<div class="center animated fadeIn">{{ title }}</div>
</ons-toolbar>
Main.html is simply...
<div ui-view></div>
Any idea on how to resolve this?
[EDIT]
Below is the HTML behind the button/s:
<ons-back-button class="ng-scope">
<span class="toolbar-button--quiet " ng-click="" style="height: 44px; line-height: 0; padding: 0; position: relative;">
<i class="ion-ios-arrow-back ons-back-button__icon" style="vertical-align: top; background-color: transparent; height: 44px; line-height: 44px; font-size: 36px; margin-left: 8px; margin-right: 2px; width: 16px; display: inline-block; padding-top: 1px;"></i><span style="vertical-align: top; display: inline-block; line-height: 44px; height: 44px;" class="back-button__label"><div class="animated fadeIn ng-scope">Back</div></span>
</span>
</ons-back-button>