I'm using http://angular-ui.github.io/bootstrap/ accordion and popover inside accordion.
But Popover and accordion creates overlay and popover block displays only inside accordion.
Html code:
<accordion>
<accordion-group is-open="element.hide" is-disabled="lock">
<accordion-heading>
<i class="icon-chevron-right" ng-hide="element.hide"></i>
<i class="icon-chevron-down" ng-show="element.hide"></i>
<i ng-show="element.description" popover="{{element.description}}" popover-trigger="mouseenter" class="icon-info-sign"></i>
</accordion-heading>
//inner eccordion HTML
</accordion-group>
</accordion>
It would be better if you can provide a plunkr. But i feel like "popover-append-to-body" might solve your problem.
<i ng-show="element.description" popover="{{element.description}}" popover-trigger="mouseenter" popover-append-to-body="true" class="icon-info-sign"></i>
Related
I am currently trying to align a Icon and a text in a Menu.Item with Semantic UI React V.0.68.2.
Currently my HTML output looks like this:
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
Dashboard
</a>
And my JSX like this:
<Menu vertical className="some classes" icon=''>
<Menu.Item
active={active}
onClick={onClick}
className="some class"
>
<Icon name="home" large /> Dashboard
</Menu.Item>
</Menu>
I wrote a new Icon component to use my own Icon Font which looks like this. I tried to stay as close to the original Icon class from the React Implementation of Semantic UI.
import React, { Component } from "react";
import classnames from "classnames";
/**
* #class Icon
* #extends {Component}
* #description Icon class for themify icons. Replacement for semantic ui Icon class
*/
class Icon extends Component {
render() {
var iconClass = classnames("icon ti-icon ti-" + this.props.name, {
big: this.props.big,
large: this.props.large,
close: this.props.close
});
return (
<i
aria-hidden={true}
className={this.props.close ? iconClass.replace("icon", "") : iconClass}
onClick={this.props.onClick}
/>
);
}
}
export default Icon;
Now I want the Text and the Icon to be vertically centered but I can't get it to work, they text always seems to be at the top of its parent node. But actually I want it to appear vertically centered in the Menu.Item. with any size of the Icon. So when I change the size of the Icon to large the text should always be centered vertically. The size classes are the same as in Semantic UI.
Does anyone have an idea how to achieve this ? Thanks in advance :)
Hi you are facing a very common problem, possible solutions are depicted in the following codepen
https://codepen.io/anon/pen/XEKZwq
What I suggest you do is to wrap the text in a span so instead of:
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
Dashboard
</a>
you do the following
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
<span>Dashboard</span>
</a>
Once you've done this you can easily use the solution in the codepen above.
I'm designing an application for mobile phones using cordova. I've made some good progress where I can transition between state to state inside my side menu content while still having drawer working. The way I have the interface designed is to have the side drawer and header bar be loaded once and the side menu content be the area of state transitions. I could not get my content to display below the header bar so I padded it down. However the issue is when I push things down the state transition animation pads also, oddly I tested menu-close directive in the tag, so it seems like the padded area is holding previous state of side menu content. I would prefer not use use menu-close so I don't reset the history stack on my states.
<ion-side-menus animation="no-animation" enable-menu-with-back-views ="true" >
<!--Ion Side Menu Content Houses the content for the main page-->
<ion-side-menu-content style="padding-top:45px">
<div menu-close style="padding-top:59px" >
<ion-nav-view > --Here
</ion-nav-view>
</div>
<ion-header-bar class ="bar-balanced">
<div class ="buttons">
<button class ="button icon button-clear ion-navicon-round" ng-click="openDrawer()"></button>
</div>
<h1 class="title" style="text-align: center">Medroid</h1>
<div class="buttons widget-container content-area horiz-area wrapping-col" >
<button class ="button" ng-click="openPopover($event)" ng-controller = "notificationPopoverCtrl">
<i class ="icon button-dark ion-ios-bell"></i></button>
<button class ="button" ng-click="openPopover($event)" ng-controller ="InboxPopoverCtrl"><i class ="icon button-dark ion-email"></i> </button>
<button class ="button" ng-click="changeStatus()"><i class ="icon ion-ios-circle-filled {{statuscolor}}"></i>{{docstatus}}</button>
</div>
</ion-header-bar>
</ion-side-menu-content>
<!--Ion Side menu drawer content-->
<ion-side-menu side ="left">
<ion-header-bar class ="bar-positive">
<h1 class="title" style="text-align: center" >Menu</h1>
</ion-header-bar>
</ion-side-menu>
</ion-side-menus>
Here is a link to my plunker where I've implemented this.
Plunker
You're help would be greatly appreciated
Cheers,
Solved the issue by removing the top padding and replace it with margin top.
<ion-nav-view style ="margin-top:43px">
This is my component:
{{#link-to routeName class="list-group-item"}}
<i class="fa {{icon}} fa-fw"></i> {{text}}
{{/link-to}}
Which I use:
<div class="list-group">
{{icon-link routeName="my-account" icon="fa-user" text="Personal details"}}
...
</div>
The expected html is:
<div class="list-group">
<a class="list-group-item" href="xxx">
<i class="fa fa-user fa-fw"></i> Personal details
</a>
...
</div>
But because ember wraps the components in a div, the bootstrap rules do not apply anymore and the list-group has a wrong style.
If I change the component tag to a, and remove link-to from the component template, I loose the flexibility of link-to - and I do not know how to set attributes (href, class) in the containing tag.
It seems I can not use an Ember component for this then? Or is there a way to tellink ember no to wrap my component in a div, or anything else really: in order for the CSS to work, the markup structure must not be modified.
I've not tried this myself but apparently you can create custom link-to components by extending Ember.LinkComponent. Something like this might work...
// app/components/icon-link.js
export default Ember.LinkComponent.extend({
classNames: ["list-group-item"],
icon: null,
text: null,
})
...
// app/templates/components/icon-link.hbs
<i class="fa {{icon}} fa-fw"></i> {{text}}
...
// wherever
{{icon-link 'my-account' icon="fa-user" text="Personal details"}}
Here's a related blog post which may help you also - http://til.hashrocket.com/posts/faef1058c3-inheriting-from-linkcomponent-in-ember-is-amazing
Is there a way to add HTML markup to the tooltip in materialize? I'm trying to arrange some data as definition list inside a tooltip. I tried to add it directly into the data-tooltip attribute but it doesn't seem to recognize the tags.
In materialize.js, around line 1258 make the following change to covert all tooltips to html.
// Change .text()
newTooltip.children('span').text(origin.attr('data-tooltip'));
// To .html()
newTooltip.children('span').html(origin.attr('data-tooltip'));
In the latest version you can use:
$(document).ready(function(){
$('.tooltipped').tooltip({delay: 50, tooltip: 'some text', html: true});
});
See http://materializecss.com/dialogs.html
In Materialize v0.100.2 is possible to use data-html attribute.
If is set data-html="true", then Materialize renders as $(...).html()
So this will be rendered as $(...).text()
<a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">Hover me!</a>
And this as $(...).html()
<a class="btn tooltipped" data-html="true" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">Hover me!</a>
I have the following setup:
<div data-ng-repeat="item in navigationBar.navObject.items" class="btn-group">
<button data-ng-class="{current: $last}" class="btn btn-default btn-xs" type="button" data-ng-click="navigationBar.goToState(item)"> {{item.name}}</button>
<button data-ng-hide="item.isTerminal" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" type="button">
<span class="fa fa-fw fa-caret-right"></span>
</button>
<ul class="dropdown-menu">
<li data-ng-repeat="subItem in item.subItems"><a data-ng-click="subItem.item.goToState()">{{subItem.name}}</a></li>
</ul>
</div>
And I would like the icon in the dropdown to change from fa-caret-right to fa-caret-down when the dropdown list is visible. Is there any way to do this strictly with CSS?
You won't be able to change the attributes of HTML elements using CSS, you'll probably want to use jQuery instead.
Bootstrap has some nifty JavaScript going on, where you can execute your own scripts when boostrap elements inside your website is used.
Initialize dropdown using this inside jQuery.
$('.dropdown-toggle').dropdown();
When it's called you can hook different actions to it using the handles specified on the bootstrap docs.
on('show.bs.dropdown', function(){}); is just a fancy word for saying "on dropdown"
$('.dropdown-toggle').on('show.bs.dropdown', function () {
// All actions to fire after the dropdown is shown go here.
$('.fa .fa-fw').addClass('fa-caret-right');
$('.fa .fa-fw').removeClass('fa-caret-down');
})
I know this is an old post, but I was looking for this solution and have one that works for me. You can target and change the pseudo element inside that span. When you click the button, doesn't the button add an open class? So, then the css would look like:
btn.open .fa-caret-right:before { content: "\e114"; }
Use the .open added to the button class.
The \e114 being the character of the down arrow.