I am using a computed property (in Vue 3 with the composition API) and binding it to an img src attribute.
const arrowUrl = computed(() =>
width.value > thresholds.value.xl
? '/img/elements/arrow.svg'
: '/img/elements/arrow_small.svg'
);
<img :src="arrowUrl"></img>
When I inspect the first call of the computed property (on load with a breakpoint):
The /img/elements/arrow_small.svg is already displayed.
It returns /img/elements/arrow.svg but it won't display it.
I changed the width of the frame lower than the thresholds.value.xl and then I changed it back to the initial width and the right img src (/img/elements/arrow.svg) is displayed.
I don't understand why the arrow_small.svg is displayed before the first call of the computed property and why when I change the width of the frame it works.
What am I missing?
Related
I am conceiving a horizontal bar containing items.
They must all be of same width, having the same spacing between them.
They can expand as much as they want vertically (
stackblitz here
Problem:
How to automatically set the width of the row elements? Here I simply put a value that looks good: width:200px.
I want them to have a width dependent on the number of element per row.
What I tried:
Using elementRef in Horizontile (component holding the individual tiles, displaying with *ngFor) to get the width of this element:
currentWidth:number;
constructor(private el:ElementRef) {}
ngAfterViewInit(): void {
this.currentWidth=this.el.nativeElement.offsetWidth;}
it returns 5. (??) Using .width returns nothing. Also this is not recommended, I'd like another solution, less coupling.
I noticed I can make use of width:inherit; in the css of the individual tile component, which allows me to set the style from the horizontal list component.
<app-tile [style.width.px]="0.9*currentWidth/nDisplayedTiles" [tile]="item"></app-tile>
As the currentWidth value is zero, of course it doesn't work;
I tried setting it in % but the inherits css tag keeps the %, which is not the intended effect.
Why is the app-tile styling not cared about if inherits is not set?
I tried using ViewEncapsulation but it had no effect either.
This looks like a trivial matter though: did I just miss something?
You can use the offsetParent (link) width and create a method to return the value on each of the cells and call it in your [style.width.px], something like the following will work.
The HTMLElement.offsetParent read-only property returns a reference to the element which is the closest (nearest in the containment hierarchy) positioned ancestor element.
stackblitz
ngAfterViewInit(): void {
//added this as the compiler was throwing ExpressionChangedAfterItHasBeenCheckedError
setTimeout(() => {
this.currentWidth=this.el.nativeElement.offsetParent.clientWidth;
});
}
getWidth(): number{
let width:number = 0;
//you may need to change this value to better display the cells
let multiplier = 0.7;
width = (this.currentWidth * multiplier) / this.ndisplayTiles;
width = Math.round(width);
return width;
}
<app-tile [class]="'layout-tile'" [tile]="item" [style.width.px]="getWidth()">
</app-tile>
This is the code I've found to retrieve the correct draggable element and edit it's dimensions, during the onBeforeCapture() responder. Changing dimensions during this responder is in accordance with the documentation. This seems to work in only changing the dimensions, the other problems is that I am using the renderClone method, and so the draggable is just dragging with a huge offset that is not close to the correct mouse position. Also dnd is treating the drop placeholder as if the draggable is the original large size. Is there any way to correct for this mouse position, and placeholder dimensions? I've looked into adding mouseDown/mouseUp handlers on the inner element of the draggable but that doesn't seem to work either.
const cardSize = 140;
const draggableAttr = "data-rbd-drag-handle-draggable-id";
const getAttr = (key: string, value: string) => `[${key}=${value}]`;
const draggableQuery = getAttr(draggableAttr, update.draggableId);
const draggable = document.querySelector(draggableQuery);
draggable.setAttribute("style", `width: ${cardSize}px; height: ${cardSize}px;`);
I noticed onBeforeCapture was triggering after onDragEnd (therefore resizing the draggable improperly), so I created some state to remember the last beforeCaptureResult and return if it is equivalent to the current result.
I want to develop new features in Quod Libet music player.
I need to increase size of specific scrollbar.
There's a function already exists to apply css to a widget:
def add_css(widget, css):
"""Add css for the widget, overriding the theme.
Can raise GLib.GError in case the css is invalid
"""
if not isinstance(css, bytes):
css = css.encode("utf-8")
provider = Gtk.CssProvider()
provider.load_from_data(css)
context = widget.get_style_context()
context.add_provider(provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
So I try to apply css as this:
self.scrollwin = sw = ScrolledWindow()
sw.set_shadow_type(Gtk.ShadowType.IN)
#get scrollbar
vscrollbar = sw.get_vscrollbar()
# 1rst attempt
# qltk.add_css(vscrollbar, '* slider {min-width: 20px;}')
#2nd attempt
qltk.add_css(vscrollbar, 'scrollbar.vertical slider {min-width: 20px;}')
I've got same error with 2 attempts:
'min-width' is not a valid property name (3)
Update 1
I try #Herbalist solution, scrollbar component is resized but "slider" always have same size. It add spaces on right and on left of "slider".
vscrollbar.set_size_request(50,-1)
Is it possible to resize slider of scrollbar ?
Screenshot of result (I outline part of scrollbar in green):
I'm not able to success with css, so I use deprecated method:
GtkRange:slider-width has been deprecated since version 3.20 and
should not be used in newly-written code.
Use the min-height/min-width CSS properties on the slider element. The
value of this style property is ignored.
As this:
qltk.add_css(vscrollbar, '* {-GtkRange-slider-width:40px}')
get_vscrollbar() returns a Gtk.Widget so you could try setting the "width-request" property
I'm trying to get the height of a div in angularjs, but it only returns the initial value and never updates:
vm.summaryHeight = $(".history-log-container").height();
console.log(vm.summaryHeight);//returns 0 and then never logs again.
How can I get the height of this div as it updates?
I tried this:
link: function ($scope, element, attrs) {
//console.log(element.height());
$scope.$watch(function(){
return element.height();
}, function(oldVal, newVal){
//returns the initial values then nothing else
console.log(arguments);
})
}
As others have said, the value will be taken once unless you specify otherwise. Try something like;
$(document).resize(function(){
// Your code here
});
If your window size changing affects the height of the target element then whenever the document is resized the value will be retaken. This might also work if you were to target the element rather than the document;
$('.history-log-container').resize(function(){
// Your code here
});
But you'd have to check that out- I just usually have all my window responsive sizings within the one document resizing function.
I'm having some problems with the resize of the Google Maps JavaScript API v3. If I set the CSS "parameters" right on load (just in the documentation) the map will show 100% height and width - no problem. But when I try to get the same result by clicking on a link it's not showing the whole map.
I have tested both css() and toggleClass() in jQuery on this event. toggleClass() makes the map goes invisible (hides the map completely rather than makes it full screen) with this code:
// jQuery
$('#weather-map').toggleClass('test');
// CSS
#weather-map.test {
height : 100%;
width : 100%;
top : 0;
left : 0;
position : absolute;
z-index : 200;
}
css() works (the map goes full screen) but the image above shows how the map renders upon full screen:
$('#weather-map').css({
'height' : '100%',
'width' : '100%',
'top' : '0',
'left' : '0',
'position' : 'absolute',
'z-index' : '200'
});
I wonder now, why does it act like this? Have I missed something or is this method not the right one to toggle full screen of the map?
Thanks in advance.
It's just because of how Google's mapping Javascript works. It renders based on the container's size, and doesn't add any kind of handler to re-render in case the container gets re-sized thereafter. I imagine that in your example above, you'd have to just call the map initialization code a second time to render the map again in your resized div.