I am using
console.log("+++++++++++++++++++++++++", document.getElementById("liqcont").attributes);
before the return{} part of a .tsx file.
Typescript is returning an error
TS2531: Object is possibly null.
I need the style properties of the liqcont div to see what class properties have been actually rendered. Any other way to do that?
You can try using refs, and then in componentDidMount get all attributes of that element with the ref. Something like this should work :
class Test extends React.Component {
componentDidMount(){
let attributes = this.refs["wrapper"].attributes;
}
render(){
return (
<div ref="wrapper">
........
</div>
)
}
}
React.render(<Test />, document.getElementById('container'));
Hope this helps.
Related
How can I make the <vue-autosuggest> input look like the input from BootstrapVue (<b-input>)?
To apply the form-control class to vue-autosuggest's inner <input>, as required for the Bootstrap <input> styles, you could use the inputProps prop (automatically applied to the <input>):
<template>
<vue-autosuggest :input-props="inputProps">
...
</vue-autosuggest>
</template>
<script>
export default {
data() {
return {
inputProps: {
class: 'form-control',
}
}
}
}
</script>
Interestingly, that class used to be added by default in vue-autosuggest 1.x, but was removed in 2.x.
demo
You need to modify the the <input> tag of the vue-autosuggest component to include the class form-control from Vue-Bootstrap.
You will not be able to add this class directly to the component as the component wraps the input within a div block. Bootstrap CSS requires the the element to be of type input to properly match the CSS selectors.
If we look here https://github.com/darrenjennings/vue-autosuggest/blob/master/src/Autosuggest.vue at the component itself we see
<input
:type="internal_inputProps.type"
:value="internalValue"
:autocomplete="internal_inputProps.autocomplete"
:class="[isOpen ? `${componentAttrPrefix}__input--open` : '', internal_inputProps['class']]"
v-bind="internal_inputProps"
aria-autocomplete="list"
:aria-activedescendant="isOpen && currentIndex !== null ? `${componentAttrPrefix}__results-item--${currentIndex}` : ''"
:aria-controls="`${componentAttrIdAutosuggest}-${componentAttrPrefix}__results`"
#input="inputHandler"
#keydown="handleKeyStroke"
v-on="listeners"
>
This must be modified in your local version to include the bootstrap class.
I'm using an Agular form control to control a "select" validity.
When said "select" is invalid, class "ng-invalid" can be found on the "select".
Class "ng-valid" is, when "select" is valid.
However, pseudo class remains ":valid" either way.
The problem is I'm using a third party library for style which is based on pseudo classes to handle style.
Take a look at this example,
https://stackblitz.com/edit/angular-xypbcc
I'd like that the pseudo class :invalid apply (and it's css style), when class is "ng-invalid", when select is empty.
(I know I could add the required to the select element, but I actually have other validators in my real use case)
Thanks
the easy way is copy the .css of inactive to .ng-invalid
A work-around is use setCustomValidity You can use a directive
#Directive({
selector: "[invalid]"
})
export class InvalidDirective implements OnInit, OnDestroy {
subscription$: any;
#Input("invalid") checkAtFirst: boolean = false;
constructor(private control: NgControl, private el: ElementRef) {}
ngOnInit() {
this.subscription$ = this.control.statusChanges.subscribe(res => {
this.el.nativeElement.setCustomValidity(res == "INVALID" ? "error" : "");
});
if (this.checkAtFirst && this.control.invalid)
this.el.nativeElement.setCustomValidity("error");
}
ngOnDestroy() {
this.subscription$.unsubscribe();
}
}
The directive inject in the constructor the ngControl (the input) and the elementRef (the HTMLElement) and subscribe to statusChange. I use the input if you want to check at first
So you use like
<select invalid=true formControlName="fcselect">
//or
<select invalid formControlName="fcselect">
You can see the example in the stackblitz
When Gutenberg creates a class, it seems to be of the format
div.wp-block
div.editor-block-list__insertion-point
div.editor-block-list__block-edit
div.editor-block-contextual-toolbar
div
<your actual block html goes here>
I'd like to be able to add a class to that top div.wp-block element so I can properly style my block in the editor. The class is dynamically generated based on an attribute so I can't just use the block name class. Is there a clean way of doing this? I can hack it using javascript DOM, but it gets overwritten quickly enough.
https://wordpress.org/gutenberg/handbook/designers-developers/developers/filters/block-filters/#editor-blocklistblock
const { createHigherOrderComponent } = wp.compose
const withCustomClassName = createHigherOrderComponent((BlockListBlock) => {
return props => {
return <BlockListBlock { ...props } className={ 'my-custom-class' } />
}
}, 'withCustomClassName')
wp.hooks.addFilter('editor.BlockListBlock', 'my-plugin/with-custom-class-name', withCustomClassName)
You can add class in your block edit view by using className that is present in this.props, className will print class in following format wp-blocks-[block_name]
edit( { className } ) { // using destructing from JavaScript ES-6
return <div className={ className }></div>
}
Suggestion
Always try to look for manipulating DOM via React instead of manipulating DOM directly because React manages it's own state and issues can occur by manipulating DOM directly.
I am using the Grid component and have a cellRenderer. In it I attempt to add a backgroundColor style to the outer div.
customColumnRenderer(props: GridCellProps): React.ReactNode {
...
props.style.backgroundColor = "hotpink";
...
return <div style={props.style}
... </div>;
}
All is good at first, but then I scroll vertically a bit and I get this exception:
Uncaught TypeError: Cannot assign to read only property 'backgroundColor' of object '#<Object>'
When I look in the debugger. props.style looks like a simple Object to me. The doc says
"You can add additional class names or style properties as you would like."
Any thoughts on what I might be doing wrong?
Best workaround I could come up with is to merge in style props from a different object using the spread operator. Something like this:
customColumnRenderer(props: GridCellProps): React.ReactNode {
...
let myStyles = {backgroundColor: "hotpink"};
let styles = {...props.style, ...myStyles};
...
return <div style={styles}
... </div>;
}
I am using ReactJS with redux.
I using scss.
lets say my path is:
http://localhost:3000/login
I need to add to this page:
html:{ overflow:hidden}
and on other pages i want to remove this attribute.
Anyone have a clue?
You can change the style attribute of the html tag:
class MyPage extends React.Component {
componentWillMount() {
this.htmlTag = document.getElementsByTagName('html')[0];
this.htmlTag.setAttribute('style', 'overflow: hidden');
}
componentWillUnmount() {
this.htmlTag.setAttribute('style', '');
}
...
}
I don't know how is your project architecture, but you can add a class (className) into your HTML tag in differently ways.
If you want, you can also use your redux state.
You check if you are in X page, if it's ok, pass a boolean at true and if it's true, put your css.
I prefer the first solution.
You could just import a className, let's say loginStyle, and make it so:
html: {
overflow: hidden;
}
Then, you just put it as a condition let's say on your header (has to be an element present in every page).
Something like
const isLogin = window.location.pathname === login ? true : false ( <= this is not the real condition, but make it so isLogin equals true is you are on your login page).
<Header className={${className1} ${className2} ${isLogin ? loginStyle : ' '}}/>
And your style will only be applied on your login page. Maybe not the simpliest, but at least this would work :)