I'm triggering onBlur javascript function to turn the border of inputs red if the entry is invalid.
This is working fine except for Datepicker.
I can style its border using classname but I need to use inline style to make it change depending on what is input. How can I do this?
My code:
state= {
borderColors:{
startDetails: 'none',
}
}
borderColor = (e, field) => {
e.preventDefault()
let borderColors = this.state.borderColors
e.target.value === '' ? borderColors[field] = 'tomato' : borderColors[field] = '#00988f'
this.setState({borderColors})
}
<DatePicker
className="datePicker"
timeIntervals={15}
selected={values.startDetails}
onBlur = {event => this.borderColor(event, 'startDetails')}
onChange={(event) => this.props.changeField(event, "startDetails")}
showTimeSelect
dateFormat="d MMM yyyy HH:mm"
required
placeholderText={'Date & Time Event Starts'}
style={{borderColor: this.state.borderColors.startDetails}}
/>
I worked around this by deleting the border around datePicker by setting its width to zero in css file.
Then I wrapped datePicker in a div, gave it a border and set an inline style in the div to set the border color according to the value in state that is set by the function
Related
I am having issues with react Plotly displaying correctly when a graph loaded in a hidden tab is selected. It seems this is a known issue where every tab but the default tab will not resize appropriately because it doesn't know the hidden graph's dimensions.
To get around this I would like to dynamically update the tab height to be equal to the height of the default tab. Something like this: Change div height when tab is selected.
The issue is, I am unable to select the tab height value on DOM load. I thought I could add a componentDidMount function with an evenlistener for window load like such:
constructor(props) {
super(props)
this.state = {
value: 0
};
this.handleLoad = this.handleLoad.bind(this);
}
componentDidMount() {
window.addEventListener('load', this.handleLoad);
}
handleLoad() {
console.log("firstTab height: " + $('#firstTab').offsetHeight)
}
This issue is, the console log is outputting firstTab height: undefined.
When i inspect the web page and put the command $('#firstTab').offsetHeight into the console I am able to come up with a height of 697 px.
I don't want to hardcode the tab pixel size. Can anyone guide me as to why I am failing to grab the element height on window load?
Try using clientHeight property.
componentDidMount() {
const height = document.getElementById('firstTab').clientHeight;
}
I think instead of using event listener, you can do something like this.
componentDidMount() {
const height = this.firstTab.clientHeight;
console.log(height) // => gives you height
}
render() {
return (
<div
id="firstTab"
ref={ (firsTabElement) => { this.divElement = firstTabElement } }
>
Tab Content
</div>
)
}
After the first render if you are not hiding or putting any condition to remove the firstTab from the DOM. It will be available to you in componentDidMount lifecycle.
As a means to learn, I am trying to build an autocomplete feature. I am following this example:
https://codesandbox.io/s/8lyp733pj0.
I see two issues with this solution:
1.) Conflict with mouse hover and keydown. If I use the keypad to navigate the list the active item gets highlighted and if I use my mouse at the same time another item will get highlighted. This results in 2 highlighted fields.
2.) If i select an item by pressing enter it will fill the input field with the selected text but if I press enter again it will change that text to the index 0 item I believe.
Can someone please help me in understanding how to resolve these issues. I have tried hover and focus for css but it still doesn't achieve the expected outcome.
My approach (not sure if this is the correct one):
If keyboard is being used then the mouse event should be disabled and vice versa.
I've also tried removing this.setState({activeSuggestion: 0}) for the enter event.
Thanks for your help - it's taking me some time to grasp the concepts of state with React.
The onKeyDown function updates correctly the value ofactiveSuggestion. I sugest you to add a scroll in the select when activeSuggestion is not vissible.
In my opinion, you need to update the value of activeSuggestion with theonMouseEnter function.
When you do that, remember to remove the line 32 from styles.css: .suggestions li:hover.
Only the element with .suggestion-active must have the active styles. Not the hovered ones. The idea is that onMouseEnter must update the value of activeSuggestion.
Here is the code:
// Autocomplete.jsx
//in line 84, after function onKeyDown, add:
onMouseEnter = e => {
try {
e.persist();
const currentIndex = parseInt(e.target.dataset.index, 10);
this.setState({ activeSuggestion: currentIndex });
} catch (reason) {
console.error(reason);
}
}
// then, create const onMouseEnter after the render() method:
render() {
const {
onChange,
onClick,
onKeyDown,
onMouseEnter,
state: {
activeSuggestion,
filteredSuggestions,
showSuggestions,
userInput
}
} = this;
// In the li nodes (line 123), add props onMouseEnter and data-index:
<li
className={className}
key={suggestion}
onClick={onClick}
onMouseEnter={onMouseEnter}
data-index={index}
>
{suggestion}
</li>
Remember to remove the line 32 from styles.css: .suggestions li:hover.
Hope it helps.
I have 2 nested <div>s, both with tooltip().
When I hover over the
inner <div>, the outer <div> also shows it's tooltip.
I tried to work around this by setting the inner <div>'s title
to an empty string on :hover.
$(inner).hover({
$(outer).attr('title','');
},{
$(outer).attr('title','original title');
});
I created a codepen examplenote: I changed title to 'red' so you can see that the title did indeed change.
Why is it that changing the title doesn't change tooltip's content?
How do we change the Bootstrap Tooltip's content? (this should be a stackoverflow question of it's own)
Answering #1:
By inspecting the elements and watching it change with your JS code, i noticed a attribute on the divs called data-original-title which still holds "blue" when you enter green (this is what the tooltip element reads and displays). By changing your script to
$('#a').attr({"data-original-title": "red"});
the blue becomes red. Does this answer your question?
Use .tooltip('hide') and .tooltip('show')
this was answered in part by #BuddhistBeast, thanks!
$("#b").on('mouseover', function(){
$('#a').tooltip('hide');
}).on('mouseleave', function(){
$('#a').tooltip('show');
});
$('[data-toggle="tooltip"]').tooltip({
animated : 'true',
placement : 'bottom',
container: 'body'});
You can check whether you are currently hovering inside of the inner block
jQuery:
$(document).ready(function(){
var bIsShown = true;
$("#b").on('mouseenter', function(){
bIsShown = true;
}).on('mouseleave', function() {
bIsShown = false;
})
$("#a").on('mousemove', function(){
if(bIsShown) {
$(this).data("bs.tooltip").$tip.removeClass("in");
}
else {
$(this).data("bs.tooltip").$tip.addClass("in");
}
})
$('[data-toggle="tooltip"]').tooltip({
animated : 'fade',
placement : 'bottom',
container: 'body'});
});
Your Example: http://codepen.io/anon/pen/JGqXPw
I have three divs which i set float:left side by side.
In all these three divs, i have one textbox, one checkbox and one button. I have set checkbox set to visible = false initially. On click of button i am setting the checkbox visibility to true. by doing this div position gets adjust to left and causing layout problem. How can i set div style to avoid this layout displacement problem.I want there should not be any control displacement while show and hiding the checkbox I am newbie in css.
Here is my fiddle link Link
How about using the css property visibility? The visibility attribute allows the element to be hidden, but leaves the space where it would have been. For more information about it, read here.
DEMO: http://jsfiddle.net/Lppme028/22/
CSS
#txt
{
visibility: hidden;
}
JavaScript
$(document).ready(function () {
$("#btn").click(function (){
$("#txt").visibilityToggle();
})
});
jQuery.fn.visibilityToggle = function() {
return this.css('visibility', function(i, visibility) {
return (visibility == 'visible') ? 'hidden' : 'visible';
});
};
I would like to customize the shape of Kendo Tooltips for a grid.
I saw the example on kendo site, it has the arrow outside the box, and the box has a nice rounded shape.
Working on css, using .k-tooltip I can change width, height, background. But I get a square box with the arrow inside which sometimes overrides part of the text content.
I thought that callout would help but I was not able to get anything.
How can I change shape, image and position of the arrows, shape of the box ?
Moreover, how can I trigger the tooltip only when part of the text in a grid cell is visible ?
Thanks a lot for any hint
regards
Marco
I think "arrow" you mean callout. You can turn off callout by:
$(document).ready(function() {
$("#target").kendoTooltip({
callout: false
});
});
About your question "Moreover, how can I trigger the tooltip only when part of the text in a grid cell is visible?"
If I understand you correctly you would like to show tooltip only when there is text with ellipsis (partially visible in the cell), but you don't want to show a tooltip if there is a full text is visible or if there is no text in the cell. If that is the case, you can do this way:
function initializeTooltip(element, filter) {
return element.kendoTooltip({
autoHide: true,
filter: filter,
callout: false,
content: function (e) {
var target = e.target,
tooltip = e.sender,
tooltipText = "";
if (isEllipsisActive(target[0])) {
tooltipText = $(target).text();
}
tooltip.popup.unbind("open");
tooltip.popup.bind("open", function (arg) {
tooltip.refreshTooltip = false;
if (!isEllipsisActive(target[0])) {
arg.preventDefault();
} else if (tooltipText !== $(target).text()) {
tooltip.refreshTooltip = true;
}
});
return tooltipText;
},
show: function () {
if (this.refreshTooltip) {
this.refresh();
}
}
}).data("kendoTooltip");
};
// determanes if text has ellipsis
function isEllipsisActive(e) {
return e.offsetWidth < e.scrollWidth;
}
$(function () {
initializeTooltip($("#yourGridId"), ".tooltip");
});
tooltip in this case is class name of the column that you would like to use tooltip for, but you can call that class anyway you wish. In case if you are using Kendo ASP.NET MVC it will look something like this
c.Bound(p => p.ClientName)
.Title("Client")
.HtmlAttributes(new {#class = "tooltip"});