I want to move the position of a component using elementRef.
My code below seems pretty reasonable - but doesn't work. Why?
ngAfterViewInit() {
let element = this.elementRef.nativeElement
element.style.color = "red" // WORKS!
element.style.top = "100px" // NO EFFECT!
}
here's a link to my example: https://stackblitz.com/edit/angular-qlzkkc?file=app%2Fhello.component.ts
This is css issue. If you add, for example, element.style.position = "absolute", you'll see that top = "100px" works.
top, bottom properties work only for positioned elements. So by adding any position property to it can fix the issue.
eg.
element.style.position = "relative";
Related
I have two css classes on a tornadofx label bound to a SimpleBooleanProperty. One which has a background image and a blue border and one which has no background image and a yellow border.
Snippet from View containing label:
val switch: SimpleBooleanProperty = SimpleBooleanProperty(false)
label("my label"){
toggleClass(UIAppStyle.style1, switch.not())
toggleClass(UIAppStyle.style2, switch)
}
Snippet from UIAppStyle:
s(style1){
textFill = Color.YELLOW
maxWidth = infinity
maxHeight = infinity
alignment = Pos.CENTER
backgroundImage += this::class.java.classLoader.getResource("img.png")!!.toURI()
backgroundPosition += BackgroundPosition.CENTER
backgroundRepeat += Pair(BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT)
borderColor += box(Color.BLUE)
}
s(style2){
textFill = Color.YELLOW
maxWidth = infinity
maxHeight = infinity
alignment = Pos.CENTER
borderColor += box(Color.YELLOW)
}
When switch = false, there is a background image and a blue border. When switch = true, there is the same background image and a yellow border. I'm not finding out how to get the background image to remove. Interestingly enough, if I add a different background image to style2, it changes correctly.
Edit: To remove two toggleClasses and introduce new strange problem:
class MyView : View(){
...
init{
...
row{
repeat(myviewmodel.numSwitches){
val switch = myviewmodel.switches[it]
val notSwitch = switch.not()
label("my label"){
addClass(UIAppStyle.style2)
toggleClass(UIAppStyle.style1, notSwitch)
}
}
}
}
This code snippet does not work for me. However, if I add private var throwsArray = mutableListOf<ObservableValue<Boolean>>() as a field of MyView and add notSwitch to the array, then the same exact code works. It's almost as if notSwitch is going out of scope and becoming invalidated unless I add it to a local array in the class?
I don’t understand why you want to have two different toggleClass for the same control. As you pointed out, the problem in your case is that when the backgroundImage is set, you need to set a new one in order to change it. But in your case, you only have to add the style without backgroundImage first and them set toggleClass with the style with backgroundImage. Like this:
label("my label"){
addClass(UIAppStyle.style2)
toggleClass(UIAppStyle.style1, switch)
}
button {
action {
switch.value = !switch.value;
}
}
Edit: This ilustrate what I'm talking about in comments:
class Example : View("Example") {
override val root = vbox {
val switch = SimpleBooleanProperty(false)
val notSwitch = switch.not()
label("my label"){
addClass(UIAppStyle.style2)
toggleClass(UIAppStyle.style1, notSwitch)
}
button("One") {
action {
switch.value = !switch.value;
}
}
button("Two") {
action {
notSwitch.get()
}
}
}
}
You can put the notSwitch.get() in any action and without trigger that action it does the work. Check how I put it in the action of button Two, but without clicking that button even once, it works.
This is actually some kind of hack, in order to achieve what you want. But I don’t see the reason why my initial solution with true as default value for property shouldn’t work.
Edited to do inverse of status
Here is simple example of a working toggle class using your styling:
class TestView : View() {
override val root = vbox {
val status = SimpleBooleanProperty(false)
label("This is a label") {
addClass(UIAppStyle.base_cell)
val notStatus = SimpleBooleanProperty(!status.value)
status.onChange { notStatus.value = !it } // More consistent than a not() binding for some reason
toggleClass(UIAppStyle.smiling_cell, notStatus)
}
button("Toggle").action { status.value = !status.value }
}
init {
importStylesheet<UIAppStyle>()
}
}
As you can see, the base class is added as the default, while styling with the image is in the toggle class (no not() binding). Like mentioned in other comments, the toggleClass is picky, additive in nature, and quiet in failure so it can sometimes be confusing.
FYI I got to this only by going through your github code and I can say with confidence that the not() binding is what screwed you in regards to the toggleClass behaviour. Everything else causing an error is related to other problems with the code. Feel free to ask in the comments or post another question.
I have 2 nested <div>s, both with tooltip().
When I hover over the
inner <div>, the outer <div> also shows it's tooltip.
I tried to work around this by setting the inner <div>'s title
to an empty string on :hover.
$(inner).hover({
$(outer).attr('title','');
},{
$(outer).attr('title','original title');
});
I created a codepen examplenote: I changed title to 'red' so you can see that the title did indeed change.
Why is it that changing the title doesn't change tooltip's content?
How do we change the Bootstrap Tooltip's content? (this should be a stackoverflow question of it's own)
Answering #1:
By inspecting the elements and watching it change with your JS code, i noticed a attribute on the divs called data-original-title which still holds "blue" when you enter green (this is what the tooltip element reads and displays). By changing your script to
$('#a').attr({"data-original-title": "red"});
the blue becomes red. Does this answer your question?
Use .tooltip('hide') and .tooltip('show')
this was answered in part by #BuddhistBeast, thanks!
$("#b").on('mouseover', function(){
$('#a').tooltip('hide');
}).on('mouseleave', function(){
$('#a').tooltip('show');
});
$('[data-toggle="tooltip"]').tooltip({
animated : 'true',
placement : 'bottom',
container: 'body'});
You can check whether you are currently hovering inside of the inner block
jQuery:
$(document).ready(function(){
var bIsShown = true;
$("#b").on('mouseenter', function(){
bIsShown = true;
}).on('mouseleave', function() {
bIsShown = false;
})
$("#a").on('mousemove', function(){
if(bIsShown) {
$(this).data("bs.tooltip").$tip.removeClass("in");
}
else {
$(this).data("bs.tooltip").$tip.addClass("in");
}
})
$('[data-toggle="tooltip"]').tooltip({
animated : 'fade',
placement : 'bottom',
container: 'body'});
});
Your Example: http://codepen.io/anon/pen/JGqXPw
How to override primefaces OneMenu in order to see it over captcha, ie below? My selectOneMenu have no any changes.
My guess is that the menu panel doesn't have enough space to fit in the lower part, instead it's positioned above, as the aligning of the panel is being set by javascript (PrimeFaces.widget.SelectOneMenu.alignPanel), using the jQuery UI .position() method which allows you to position an element relative to the window, document, another element, or the cursor/mouse, without worrying about offset parents, and the default value for collision attribute is flip (In PrimeFaces 5 it's flipfit) resulting the positioned element overflows the window in some direction, or to move it to an alternative position.
In this case you could implement one of these three solutions:
extend the space on the lower part, maybe adding margin to the
captcha, in this way the panel would fit in bottom.
OR change the hight of the panel
<p:selectOneMenu height="100" >
Making it a bit shorter so it can fit.
OR you can override the PrimeFaces.widget.SelectOneMenu.alignPanel function
to set the collision attribute to none, in the position function:
PrimeFaces 5
PrimeFaces.widget.SelectOneMenu.prototype.alignPanel = function() {
if(this.panel.parent().is(this.jq)) {
this.panel.css({
left: 0,
top: this.jq.innerHeight()
});
}
else {
this.panel.css({left:'', top:''}).position({
my: 'left top'
,at: 'left bottom'
,of: this.jq
,collision: 'none' // changing from flipfit to none
});
}
}
PrimeFaces 4
PrimeFaces.widget.SelectOneMenu.prototype.alignPanel = function() {
var fixedPosition = this.panel.css('position') == 'fixed',
win = $(window),
positionOffset = fixedPosition ? '-' + win.scrollLeft() + ' -' + win.scrollTop() : null;
this.panel.css({left:'', top:''}).position({
my: 'left top'
,at: 'left bottom'
,of: this.jq
,offset : positionOffset
,collision: 'none' // changing from default flip to none
});
}
Of course you should call it in the document.ready, and when you update the component.
I don't recommend this approach too much, but sometimes it's the only solution.
Hope this helps.
For necessary SelectOneMenu add style top find an optimal value and apply it. For me it is:
#registrationForm\:facultyList_panel {
top: 413px !important;
}
UPDATE 09.07: It does not helps for another screen resolution. The question is still relevant.
I have a container and I want to scroll to the bottom of it on trigger of an event. I have tried everything on Google but nothing seems to work.. These are the things that I have tried so far so that you dont waste any time:
1.
Ext.get('detailsViewId').scrollTo("top", -Ext.get('detailsViewId').getHeight());
2.
var mainContainer=this.getDetailContainer();
//I get the container here, so no error in the above line
mainContainer.scrollTo..................
mainContainer.element.scrollTo..................
and many more things from the "Developer Tools" of Chrome.
So nothing has worked yet so I am hoping that I can get something from Stackoverflow users.
Thanks in advance.
Sencha Touches uses a non-native ScrollableView to make containers scrollable.
You can get the ScrollableView by calling the getScrollable() method on a scrollable container. This ScrollableView uses a Ext.scroll.Scroller to apply the scrolling logic.
var scrollableView,
scroller,
containerList
containerList = Ext.Viewport.add({
scrollable: true,
// creating a few items to make the container overflow.
defaults: {
style: 'background-color: hsl(180, 45%, 85%);',
padding: 30,
margin: 20
},
items: function(){
var ar = [];
for(var i = 0; i < 30; i++) {
ar.push({ html: 'item ' + i});
}
return ar;
}()
});
scrollableView = containerList.getScrollable();
scroller = scrollableView.getScroller();
scroller.scrollBy(0,99999);
The example is runnable here: https://fiddle.sencha.com/#fiddle/5pm
note: the scroller has an method called scrollToEnd, but somehow this didn't work as expected, which is why I'm using 99999 as an scrollBy y argument.
Here's how it works for me:
var mainContainer=this.getDetailContainer();
var scroller = mainContainer.getScrollable().getScroller();
scroller.scrollToEnd(true);
I am trying to add custom buttons to the left and right navButton but a spacer seems to appear if I set a backgroundImage. If only the title text is set the spacing is correct. Here is my example to reproduce the issue, I added a borderColor to show that the image is not the culprit.
var win = Ti.UI.createWindow({
width: '100%',
height: '100%',
backgroundColor: 'white'
});
var leftBtn = Ti.UI.createButton({
backgroundImage:"/images/headerCmdMenu.png",
width: '81px',
height:'74px',
title: 'left',
borderColor: 'red',
borderWidth: 1
});
var rightBtn = Ti.UI.createButton({
width: '81px',
height:'74px',
title: 'right'
});
win.leftNavButton = leftBtn;
win.rightNavButton = rightBtn;
var nc = Ti.UI.iOS.createNavigationWindow({
window : win
});
nc.open();
Here is a screenshot of the view…
http://imagebin.ca/v/13wq8Jrn1hst
Any ideas how to fix this?
Thanks.
Chris
Note: I did ask this on the official forums, but got no answer after 14 days.
http://developer.appcelerator.com/question/160022/leftnavbutton-and-rightnavbutton-spacer-appears-if-using-backgroundimage-#comment-196608
This is quite long to answer but it might still help someone else looking for same issue.
For images in left/right nav buttons, look for the below points first:
If you only set title, then it will work as expected.
If you set only backgroundImage (not set width & height), then the image will be stretched to take the full space.
If you set only backgroundImage with some width & height, then the button will behave as a normal button with expected spacing and area.
If you set both backgroundImage & title, then it will be the case of this post.
Also remember that always use correct size image files when intend to use as left/right nav buttons.