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
Related
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%">
I would like to render a list of items using react-virtualized, however some of the items could change the size.
I have added a demo, where each item has a button and when someone clicks the button then the item needs to expand and push the below items lower:
https://plnkr.co/edit/GG2bSIC5M1Gj7BR1pOii
The use case is similar to facebook posts, when someone comments it will expand the post and push the other posts lower.
ReactDOM.render(
<List
className='List'
autoHeight
width={300}
height={400}
rowCount={list.length}
rowHeight={30}
rowRenderer={
({ index, isScrolling, key, style }) => (
<div
className='Row'
key={key}
style={style}
>
{list[index]}
<Expander /> /* contains the button, which when click it will expand more text*/
</div>
)
}
/>,
document.getElementById('example')
Is any way to achieve this?
UPDATE
I am realizing that there must be a way to force the List to update items and recalculate positions. There is an example with InfiniteLoader (react-virtualized example) which is using registerChild in the List as a ref. And it seems that when InfiniteLoader receives answer from the server it capable of forcing list to re-render rows.
I have tried another example with forceUpdate on list, however the List is still not updating.
https://plnkr.co/edit/RftoShEkQW5MR5Rl28Vu
As per the Documentation forceUpdateGrid() should be called instead of forceUpdate().
https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#public-methods
I faced the similar issue and solved it by calling forceUpdateGrid() inside componentWillReceiveProps method.
componentWillReceiveProps(){
this.refs.forceUpdateGrid();
}
render(){
<List
ref={ref => this.refs = ref}
.....
/>
}
Try using Collection from react-virtualized instead of List. It should help :)
add key={Math.random()} the parent of the list item solved my issue.
<ListWidget key={Math.random()}>
<Autosizer>{
.....
<List
.....
/>
.....
}</Autosizer>
</ListWidget>
Note: not recommended, it's just a workaround to get PR accepted
I've duplicated the search box webpart so i can make changes. I'm trying to add a localization string to the placeholder attribute.
This isn't working:
<cms:CMSTextBox ID="txtWord" runat="server" EnableViewState="false" MaxLength="1000"
ProcessMacroSecurity="false" placeholder="<%= CMS.Helpers.ResHelper.GetString("kff.Search--PlaceHolderCopy")%>" />
nor does this:
<cms:CMSTextBox ID="txtWord" runat="server" EnableViewState="false" MaxLength="1000"
ProcessMacroSecurity="false" placeholder='<%= CMS.Helpers.ResHelper.GetString("kff.Search--PlaceHolderCopy")%>' />
I have a JS Snippet that does work, but i'm hoping to avoid copy in JS files.
var $searchField = $('.searchTextbox');
if ($('body').hasClass('ENCA')) {
// search field placeholder copy
$searchField.attr('placeholder', 'Search For Stuff');
}
else {
$searchField.attr('placeholder', 'Recherche');
}
Can I add the localization string to the server tag, or should it be done in the code behind. I'm not sure the best location in the code behind for this either, I can't see a Page_Load block.
You could add the following line in the SetupControl method in the codebehind:
txtWord.Attributes.Add("placeholder", ResHelper.GetString("kff.Search--PlaceHolderCopy"));
You cannot really use the <%= syntax to set properties of server-side controls.
Also, please note that the CMSTextBox control has a WatermarkText property, which might be what you are looking for. It uses the TextBoxWatermarkExtender control from the AjaxControlToolkit library.
There is no need to duplicate the webpart and have duplicate code just for something this simple. Just create a different webpart layout for that webpart and add the following code above the Panel:
<script runat="server">
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
txtWord.Attributes.Add("placeholder", ResHelper.GetString("yourstring"));
}
</script>
I have a bunch of divs like this:
<div class="bear"></div>
<div class="dog"></div>
How do I get a nodelist that includes all divs with class of bear and dog? I tried:
Y.get(".bear .dog").each(function() {
});
But it returns null. Anyone have any suggestions? Thanks!
Based on how CSS selectors work, it should be .bear, .dog
Along with VoteyDisciple's answer, you should change the get to all.
For example:
YUI().use('node',function(Y) {
console.log(Y.get(".bear, .dog").size()); // prints out 1
console.log(Y.all(".bear, .dog").size()); // prints out 2
});
YUI().use('node',function(Y) {
console.log(Y.get(".bear + .dog").size());
console.log(Y.all(".bear + .dog").size());
});
This could be done to select a node which has both bear and dog as classes.
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.