The following shows the tooltip text in the right place:
%a{:href => "http://google.com/"}
%span{:tooltip => "TEST"}
= "test"
The following shows the tooltip half a screen below (increasing distance for each element)
%div{:"ng-repeat" => "point in points"}
%a{:href => "http://google.com/"}
%span{:tooltip => "TEST"}
= "test"
It's written in HAML, so in plain HTML the last two lines look like this: <span tooltip="TEST">test</span>.
The points are fetched using Rails $Resource, but I get the same problem when I use the regular $resource.
I'm using the tooltip directive from Angular UI Bootstrap. The application is built in Ruby on Rails 4.0 and uses the angularjs-rails gem (unstable).
My best guess is that the CSS on my site is somehow too complex and that I need to find a way to reprocesses these tooltips after loading.
I needed to add this below my app = angular.module(...) line:
app.config( function ( $tooltipProvider ) {
$tooltipProvider.options({appendToBody: true});
});
I'm not sure what's going on here, but it has something to do with https://github.com/angular-ui/bootstrap/pull/254 and perhaps also https://github.com/angular-ui/bootstrap/issues/139.
Related
I grab content from a CMS via Gatsby. Inside the markup there are placeholders which should be replaced with React elements.
So I get sth like this:
let content = '<span>Hello World [placeholder]!</span>';
and in React I want to change it to sth like this (where the markup for the tooltip comes from a React element):
let content = '<span>Hello World <div class="tooltip">Important warning</div>!</span>';
The final html with the replaced elements should be dumped into the DOM using dangerouslySetInnerHTML.
I tried using react-string-replace:
reactStringReplace(content, '[placeholder]', () => (<Tooltip />));
but it gives me an array containing a mix of strings and React elements that can't be concacenated without breaking the HTML structure.
What would be a good approach to tackle this issue? Or am I wrong using placeholders in the CMS altogether?
i found a really good npm package that provides this functionality and much more: https://interweave.dev/
I have an application and using vis.js to build timeline events.
I'm using React.
I want to add an icon near each event, so I using groupTemplate and I want to render there a component with group text and icon.
in the options I add:
groupTemplate: (item, element) => {
if (!item) return;
ReactDOM.render(<TimelineGroupComp item={item}/>, element);
}
TimelineGroupComp component render function:
return (
<div className="primary-wrapper" key={this.props.item.content}>
<div style="background-image:url(../images/myIcon.svg);"/>
</div>
);
I get the correct Icon but the text is the item.id instead item.content.
I try to add a span with the correct text in the TimelineGroupComp but it renders also the item.id, not only the correct text.
Also I have another problem: when I collapse/expaned the group, I have an error in the console:
Warning: render(...): It looks like the React-rendered content of this
container was removed without using React. This is not supported and will
cause errors. Instead, call ReactDOM.unmountComponentAtNode to empty a
container.
and the group is render normal, ignored my component.
I know this post is almost a year old, but I thought I'd post the answer to this question anyways for anyone who gets the same issue in the future. I've had the same issue and this is how I fixed it.
Starting with React 16, if you want to use React templates in Vis Timeline you'll have to use React.createPortal in the groupTemplate option, see https://jsfiddle.net/api/post/library/pure/.
For the code above, the correct groupTemplate would be:
groupTemplate: (item, element) => {
if (!item) return;
ReactDOM.createPortal(
ReactDOM.render(<TimelineGroupComp item={item}/>, element),
element
)
}
Okay,
I'm using a small programming test to play around with Angular and Sinatra, and I'm done logic wise, but I wanted to add a small progress bar under the play field to show the moves made.
my haml template looks like this:
.progress.progress-striped.active
.progress-bar{role: "progressbar", :"aria-valuenow" => "{{moves}}", :"aria-valuemin" => 0, :"aria-valuemax" => 9}
%span.sr-only
{{moves}} moves out of 9
I've added the Bootstrap CSS from the CDN to my project, but the bar is not working as I want to.
I only see part of it:
Tried to play around with the classes, but it's not making any difference. I've checked whether I am using the correct classes, and this is also the case. I can also the see the aria- values being properly updated on every click, so the binding works as well.
source code: https://github.com/NekoNova/tictactoe
Can someone give me a pointer as to what I am missing?
Just an alternative usage if you want to use angular-ui bootstrap you can use this library for smooth and easy usage:
%script{ type: "text/javascript", src: "//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js" }
Add the module "ui.bootstrap" to your application:
var TicTacToeApp = angular.module('TicTacToeApp', ['ui.bootstrap']);
Here is the haml expression:
%progressbar{ :max => "max", value: "dynamic"}
%span{ style: "color: white;white-space: nowrap;"}
{{dynamic}} / {{max}}
And for some demostration here is the variables which need to put in your controller:
$scope.max = 100;
$scope.dynamic = 70;
I am facing a strange behavior when testing an Angular JS application with protractor.
Considering this HTML structure , I would like to click on the inner div which is a filter.
<div ng-hide="term.selected" ng-click="selectFilter('target',term.value)" class="listItem">
<div>
<label class="ng-binding">ZECPFICO00</label>
<span class="listItemNum ng-binding">157</span>
</div>
</div>
Here is my locator :
element(by.repeater('term in facets.target | filter:ecSearchText').row(1)).click ();
When executing this code my webdriver cursor goes to the filter in the web page but and tries to click on the filter however the click does not work and therefore the filter is not applied.
1 - You don't need to specify the filters when using by.repeater it is optional
2 - Sirk is almost there, you need to continue chaining your promises, below an example of clicking on a div, you can use any by method here..
var elements = element.all(by.repeater('term in facets.target'));
elements.first().then(function (term) {
term.findElement(by.css('div')).then(function (div) {
div.click();
});
});
3- You could also do it this way:
element.all(by.repeater('term in facets.target')).get(0).click();
hmm I've never seen or used a locator that way where you have .row(1), but I am a noob so that just might be my own ignorance, however you could try something like the following:
element(by.repeater('term in facets.target | filter:ecSearchText')).then(function(rows){
rows[0].click();
});
That should click on the first row of the repeater. 'rows' would contain all the rows as an array.
I would love to find something similar to this multilevel push-menu (with overlapping), but for a Bootstrap 3 based site.
Does anyone know about some adaptation of the same?
Whatever Codrops creates is really awesome, but never Bootstrap ready and I am not able to port it myself most of the time.
I would like this to work with AngularJS, ng-repeats, children etc...
The link: Multilevel Push Menu
This one maybe?
MultiLevelPushMenu jQuery Plugin implementation, https://github.com/adgsm/multi-level-push-menu
I have recently implemented the Coderops multi level menu in my own site under bootstrap 3. My solution might not be exactly what you need as it is a Backbone Marionette App, however there might be something there to get you started.
My HAML for getting the menu DIV nested inside the bootstrap container is
!!!
%html
%head
%title>
= "Mark2"
%meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}/
%meta{:name => "fragment", :content => '!'}
= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => false
= javascript_include_tag 'modernizr'
%body
.container
.mp-pusher#mp-pusher
%nav.mp-menu#mp-menu
.scroller#scroller
.scroller-inner
.row
.col-md-12
= yield
= requirejs_include_tag "app"
So I have the menu div inside the bootstrap container and then the rest of the site inside the scroller.
A full write up is on my personal site.
Multi Level Push Menu In Backbone Marionette And Bootstrap 3
Feel free to comment here or on my site if you want more details.