I'm trying to dynamically bind the layout of one part of my component. I'm just not seeing an exact prop to bind to for this.
I tried to use a v-bind hooked to the justify as well as used v-bind:style but am not seeing a direct way to to do this.
<v-layout v-bind="{justify: setLayout(isPdfLoaded)}" style="margin-top: 5.5%">
setLayout(bool: boolean): string{
if(bool === true){
return 'justify-start'
} else {
return 'justify-center'
}
},
<v-layout :justify-center="!isPdfLoaded" :justify-start="isPdfLoaded" style="margin-top: 5.5%">
ended up going with this and it works.
Using a ternary operator also works
<v-layout :class="isPdfLoaded ? 'justify-start' : 'justify-center'" style="margin-top: 5.5%">
Related
Does lit-html have by any change something like React's ref feature?
For example in the following pseudo-code inputRef would be a callback function or an object { current: ... } where lit-html could pass/set the HTMLElement instance of the input element when the input element is created/attached.
// that #ref pseudo-attribute is fictional
html`<div><input #ref={inputRef}/></div>`
Thanks.
In lit-element you can use #query property decorator. It's just syntactic sugar around this.renderRoot.querySelector().
import { LitElement, html, query } from 'lit-element';
class MyElement extends LitElement {
#query('#first')
first;
render() {
return html`
<div id="first"></div>
<div id="second"></div>
`;
}
}
lit-html renders directly to the dom so you don't really need refs like you do in react, you can use querySelector to get a reference to the rendered input
Here's some sample code if you were only using lit-html
<html>
<head>
<title>lit-html example</title>
<script type="module">
import { render, html } from 'https://cdn.pika.dev/lit-html/^1.1.2';
const app = document.querySelector('.app');
const inputTemplate = label => {
return html `<label>${label}<input value="rendered input content"></label>`;
};
// rendering the template
render(inputTemplate('Some Label'), app);
// after the render we can access it normally
console.log(app.querySelector('input').value);
</script>
</head>
<body>
<div class="app"></div>
<label>
Other random input
<input value="this is not the value">
</label>
</body>
</html>
If you're using LitElement you could access to the inner elements using this.shadowRoot.querySelector if you're using shadow dom or this.querySelector if you aren't
As #WeiChing has mentioned somewhere above, since Lit version 2.0 you can use the newly added directive ref for that:
https://lit.dev/docs/templates/directives/#ref
-- [EDIT - 6th October 2021] ----------------------------
Since lit 2.0.0 has been released my answer below
is completely obsolete and unnecessary!
Please check https://lit.dev/docs/api/directives/#ref
for the right solution.
---------------------------------------------------------
Even if this is not exactly what I have asked for:
Depending on the concrete use case, one option to consider is the use of directives.
In my very special use-case it was for example (with a little luck and a some tricks) possible to simulate more or less that ref object behavior.
const inputRef = useElementRef() // { current: null, bind: (special-lit-html-directive) }
...
return html`<div><input ref=${inputRef.bind}/></div>`
In my use case I could do the following:
Before rendering, set elementRef.current to null
Make sure that elementRef.current cannot be read while the component is rerendered (elementRef.current is not needed while rendering and an exception will be thrown if someone tries to read it in render phase)
That elementRef.bind directive will fill elementRef.current with the actual DOM element if available.
After that, elementRef.current can be read again.
For lit-html v1, you can define your own custom Derivative:
import { html, render, directive } from "lit-html";
function createRef(){ return {value: null}; }
const ref = directive((refObj) => (attributePart) => {
refObj.value = attributePart.committer.element;
});
const inputRef = createRef();
render(html`<input ref=${ref(inputRef)} />`;
// inputRef.value is a reference to rendered HTMLInputElement
I have a styled component:
const StyledComponent = styled.div`
...
`;
and I want to focus it when the component that uses it is mounted:
class someComponent extends React.Component {
componentDidMount() {
this.sc.focus();
}
render() {
return (
<StyledComponent innerRef={(elem) => { this.sc = elem; }}>
...
</StyledComponent>
);
}
}
this technique does not work - is there a solution for this?
You can't focus non-interactive elements without the use of tabIndex ("tabindex" in normal HTML). The "div" element is considered non-interactive (unlike anchor links "a" and button controls "button".)
If you want to be able to focus this element, you'll need to add a tabIndex prop. You can use .attrs if desired to have it be added automatically so you don't need to write the prop every time.
This link
has an example with both React 16 React.createRef() and the callback method.
Have you tried setting the autoFocus attribute, or is that not fit for your use case?
Try passing the autoFocus prop to your StyledComponent like <StyledComponent autoFocus />.
So basicly how do I add a css class? I've given this a go but it ain't working:
<DatePicker
className="form-control
dateInput"
selected={startDate}
onChange={function(date){
startDate = date;
}
}
/>
Thanks, Ed.
(It's been compiled with webpack by the way.)
Depending on where you want to add the css class, you can either use className prop or popperClassName. For more, please read the docs: https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md
I need to avoid to show the keyboard when a selectOneMenu is selected on mobile devices
Someone suggests to use h:selectOneMenu in this question:
How do I prevent the keyboard from popping up on a p:selectOneMenu using Primefaces?
But I need to use the p:selectOneMenu component
You can override the SelectOneMenu focusFilter function.
What we have to do is adding one more condition, if it's not a mobile device do the focus otherwise don't do it.
Here's the overridden function, just execute it in the document.ready.
//check if it's a mobile device
mobileDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
PrimeFaces.widget.SelectOneMenu.prototype.focusFilter = function(timeout) {
if(!mobileDevice) {
if(timeout) {
var $this = this;
setTimeout(function() {
$this.focusFilter();
}, timeout);
}
else {
this.filterInput.focus();
}
}
}
Then we check if it's a mobileDevice again, if so we remove the foucsInput this time
if(mobileDevice) {
for (var propertyName in PrimeFaces.widgets) {
if (PrimeFaces.widgets[propertyName] instanceof PrimeFaces.widget.SelectOneMenu) {
PrimeFaces.widgets[propertyName].focusInput.remove();
}
}
}
Note: This has been fixed in PrimeFaces 5.2.
A small working example can be found on github, And an online Demo.
Try these on the id of your selectOneMenu (using jQuery)
$(".mySelect").focus(function() {
$(this).blur();
});
OR
$('body').on("focus", '.mySelect', function(){
$(this).blur();
});
OR other example using the blur attribute (using just javascript):
If the HTML for these fields looked like this:
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
Then the JavaScript would be:
document.getElementById('username').blur();
document.getElementById('password').blur();
Blur: is an event is sent to an element when it loses focus
These worked for me before.
I hope this helps!
:)
I'm kind of like stuck trying to implement YUI autocomplete textbox. here's the code:
<div id="myAutoComplete">
<input id="myInput" type="text" />
<div id="myContainer"></div>
</div>
<script type="text/javascript">
YAHOO.example.BasicRemote = function() {
oDS = new YAHOO.util.XHRDataSource("../User/Home2.aspx");
// Set the responseType
oDS.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
// Define the schema of the delimited results
oDS.responseSchema = {
recordDelim: "\n",
fieldDelim: "\t"
};
// Enable caching
oDS.maxCacheEntries = 5;
// Instantiate the AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
oDS.generateRequest = function(sQuery) {
return "../User/Home2.aspx?method=" + "SA&Id="+document.getElementById("lbAttributes")[document.getElementById("lbAttributes").selectedIndex].value +"&query="+sQuery;
};
oAC.queryQuestionMark =false;
oAC.allowBrowserAutoComplete=false;
return {
oDS: oDS,
oAC: oAC
};
}
</script>
I've added all the yahoo javascript references and the style sheets but it never seems to make the ajax call when I change the text in the myInput box and neither does it show anything... I guess I'm missing something imp...
#Kriss -- Could you post a link to the page where you're having trouble? It's hard to debug XHR autocomplete without seeing what's coming back from the server and seeing the whole context of the page.
#Adam -- jQuery is excellent, yes, but YUI's widgets are all uniformly well-documented and uniformly licensed. That's a compelling source of differentiation today.
To be honest, and I know this isn't the most helpful answer... you should look into using jQuery these days as it has totally blown YUI out of the water in terms of ease-of-use, syntax and community following.
Then you could toddle onto http://plugins.jquery.com and find a whole bunch of cool autocomplete plugins with example code etc.
Hope this helps.