I am experiencing the strangest issue. I do have a component that's style is controlled by some object it's handling. As the object is manipulated (by some inner component click), the whole view collapses to a height of 0.
I have tried to apply the view changes via ngStyle, ngClass, plain ol'javascript - but nothing ever worked. Second strange thing - handling outer component's component styles is perfectly working.
Object
const valueMap = {
width: '100%',
...
}
Pseudo Component Tree
<component-a>
<component-b [ngStyle]="{'width': valueMap.width} [valueMap]="valueMap">
<div (click)="changePosition()">Button</div>
</component-b>
</component-a>
Method
changePosition() {
this.valueMap.width = this.valueMap.width==='100%' ? '50%' : '100%';
}
I would really expect the component-b to collapse to a width of 50%, but not having the height collapse to zero. I can see in the code, that as I click the button the style is applied to the element - and if in Chrome DevTools I deactivate the applied style and activate it again, it is showing properly. Never had something like this. Can someone please help?
Thanks in advance. André
I tried to recreate your problem. altough i couldnt get the error you seem to be having, i think i can see the issue at hand:
from your html
<component-a>
<component-b [ngStyle]="{width: 'valueMap.width'} [valueMap]="valueMap">
<div (click)="changePosition()">Button</div>
</component-b>
</component-a>
i could get, that your "valueMap" is an Input() within component-b.
so i did that on my end aswell and declared valuemap on the outermost component (the one using component a and b)
i recreated your html and found parsing errors and whatnot until i realized something:
<app-collapse-on-click>
<app-collapse-child [ngStyle]="{'width': valueMap.width, 'background-color': 'rebeccapurple'}" [valueMap]="valueMap">
<div><button (click)="changePosition()">Button</button></div>
</app-collapse-child>
</app-collapse-on-click>
when using ngStyle, the style is interpreted as an object. meaning, in your case you need to remove the ' arround valueMap.width and add them to width.
i added the background color to get a visual result other than just the style html.
hope that somehow helps.
regards
Alan
Related
I'm rebuilding a project in React JS which i did in Vanilla JS, i came across to add, remove classes from <body> tag, i am also doing something when screen resizes.
I did this, this is a related piece of code, there's actually bunch of code:
...
document.body.onclick = (e) => {
const { lengua } = e.target.dataset
setLenguaOpen(lengua ? true : false) // if the target i or you clicked has data-lengua attr (a button has), a dropdown shows up
switchTheme // in another component i'm toggle 'switchTheme' (it is boolean), and here what i'm doing depending on it
? document.body.classList.add('dark-theme') // in my css, i'm changing values of variables i defined for colors and background-colors if body.dark-theme
: document.body.classList.remove('dark-theme')
}
window.addEventListener('resize', (e) => {
if (e.target.innerWidth >= 850) {
document.body.classList.remove('menu-open')
}
})
...
<FaBars onClick={() => document.body.classList.toggle('menu-open')}/> // a menu is located on 0 top: -60px when screen size < 850, i'm transforming body to y:60px to slide down the menu
It's working fine, but i think DOM Manipulation is preferably not used by most developers in React. I could do it differently to achieve what i wanted, but now i'm curios to learn how good React developers do what is done by DOM M..., especially the above example. If you have a better approach, i would love to hear it.
If you wanna see what exactly i'm talking, see that project: axelreid-store.netlify.app.
The code i shown is related to header section (languages dropdown, theme switcher, and menu toggle)
I'm sorry if this is a weird question!
Thanks!
Avoiding direct DOM manipulation when working with React is a good general principle, however there are quite a few cases when it is the best or only approach for solving a problem.
Accessing elements above the React application's top level element requires direct DOM manipulation. This also — definitely — is not going to clash with React's own DOM updating methods because they only affect elements inside the application.
For now, I am not using any other styling or .css files on my page. The Alert's width extends to the whole page. I am trying this but it doesn't make any difference:
function StatusMessage(){
if (isRemoved){
return (
<Alert style={{
width:'50%',
}}
className='alerts' severity="success"> User Removed</Alert>
)
}
}
Can't reproduce, just threw into my React project and style={{width:'50%'}} works.
Ideas for debugging:
remove redundant className='alerts', that as well may mess it up when yourself or some library by accident defines CSS on such class.
report within what container it resides: block, flex-box and others behave differently, although I tested on first two and both worked fine for me.
Use browser debugger and report what CSS rules actually applied or were overruled to the element that may give more insights to help you.
We're building a wordpress builder on ReactJS and encountered a weird looking problem.
In the
screenshot you can see a wrapperStyle object with some CSS styling.The styling should change based on this.props. When this.props changes, the console.log for this object returns
this.props.fullSlideshowWidth = 1920px
and
this.props.slideshowWidth = 1400px
I expected the style attribute in DOM to change it's value too, however it doesn't change.
For example if I access a full width slideshow page, the style attribute will have max-width: 1920px. If I access a different page with a normal slideshow the style attribute will remain the same, although the value in console.log will change.
You might try;
var wrapperStyle = {};
wrapperStyle.marginBottom = this.getFlux()...;
wrapperStyle.maxWidth = this.props...;
wrapperSytle.height = this.props...;
Thank you guys who tried to help me, I solved the issue by editing the props:
slideshowWidth = {this.state.settings.images.sizes.slideshow.width+'px !important'}
I just removed !important out of it and works without a problem, I still do not understand why !important had such a big influence on the prop.
I bounced into a problem when I was trying to create a title on the first view I created within my application.
At first, i hopped over all the push actions I had within my application and applied after this create.view screen a title as refered in the code under here
this.StembureauView = Ext.create('UtrechtStem.view.Stembureaulijst_View', {
title: 'Stembureaulijst'
});
this.getMainnav().push(this.StembureauView);
this works fine, and I seem to have no problem with it. However, the first screen, so my main view, as loaded first view, doesnt accept the title statement.
Ext.create('UtrechtStem.view.MainNav', {
fullscreen: true,
title:'stembureau zoeker'
});
if i add nicely behind the fullscreen statement a title statement, it wont accept it. (this is done outside sencha architect, cause appearantly i cant modify it within sencha artchitect) It just shows blank. I tried removing the toolbar, to see if that was the mistake, but it didnt. I tried addding manualyy outside Sench
Does anybody have a clue why it wont accept the title statement there and to see if there is a work arround?
guess your class UtrechtStem.view.MainNav is inherited from the Ext.navigation.View. If yes, you can not set its title direct. Instead it borrow the active child's title.
Have a look at the doc site
Cheers, Oleg
I've got some trouble in understanding the following behavior. I'm having a container <div> which contains a few inline-block <div> nodes. Example view:
Now my requirement is, to prepend new foobar inline-block <div> elements. No Problem, using jQuery -> .prependTo() to the rescue(applied on the parent container). Now comes the issue, the first time using .prependTo() "something, somewhere" creates an untrackable margin on the right side from the newly inserted element (it lookes like this to me). Example:
As you can see, only the very first element has this margin (again, I cannot track the space using Firebug/DevTools, it seems like its not there). All further insertions are just fine. Using .insertBefore() on the very first element also works fine and looks great. Unfortunatly I cannot use .insertBefore() in my particular usecase, that is why I'm asking for some heads-up here.
What do I miss ? Where comes this strange margin/spacing from ?
How to avoid it ?
Here is the jsfiddle playground where the above images come from:
http://jsfiddle.net/r7d6s/
I only tested on Firefox 4/5/6 so far.
It's the whitespace inside your parent div (i.e. line break). It gets sanitized to an ordinary space by HTML renderer. Remove it:
<div id="area"></div>