I'm making a Modal with TimePicker inside it. But the TimePicker Pop up doesn't have horizontal scroll bar, so it's like:
// here is my sample code
<div id="modal">
<Modal>
<Form>
<Form.Item>
<div id='time'>
<TimePicker defaultValue={...} getPopupContainer={triggerNode => triggerNode.parentNode as HTMLElement/>
</div>
</Form.Item>
</Form>
</Modal>
</div>
I had searched on google and tried to add prop getPopupContainer={triggerNode => triggerNode.parentNode} and getPopupContainer={() => document.getElementById('time')} but both of them is not working, same result. even get id modal. Anyone know what happen? Thanks
My expected:
I found my problem! I have some css variable override global style of Ant Design. I removed and it's work. Thank for your help.
Related
In my form, I have the following JSX written with React and after I create with the button, the success message will touch the button at the bottom, leaving no space. Is there anyway to add that space between? Thanks again.
<button className="btn btn-primary">Create a hat</button>
</div >
</form >
<div className={successClass} id="success-message">
You have created a new hat!
</div>
I tried googling methods to add properties into the button and message but nothing seems to split them apart.
Try adding padding-top to the success message div.
<button className="btn btn-primary">Create a hat</button>
</div>
</form>
<div className={successClass} id="success-message"
style={{paddingTop :"2rem"}}
>
You have created a new hat!
</div>
`
</form>
<div className={successClass} id="success-message">
The best way to position elements is by use of CSS, avoid things like {' '}
Second, make your page structure clear for example
<div class="form-wrapper" style="padding: 10px; margin-bottom:4px;">
<form>
<!-- put your create button here -->
</form>
</div>
<div class="success-msg-wrapper" style="padding: 10px;">
<!-- put your message div here -->
</div>
Finally, make use of class-based styling instead of inline css for better maintainability of the code.
I am using React Bootstrap Typeahead to navigate through an array of tree data. Each tree has an id that I need to access, but I don't want that to be the labelKey.
I've tried tying into onFocus, but the menu items never seem to gain it. onClick works fine, but I need to support keyboard navigation, too. Adding onKeyPress to the menu items doesn't seem to do anything.
Any help is appreciated. Thanks in advance.
Here is the relevant code:
<Typeahead
filterBy={filterByFields}
id='typeahead-search'
labelKey={(option) => `${option.scientific_name}`}
onInputChange={this.startSearch} // fills props.suggestions
options={this.props.suggestions ? this.props.suggestions : []}
placeholder="Enter a tree name"
renderMenuItemChildren={(option) => (
<div
<!--this is the data I need -->
data-tree-id={option.tree_id}
onClick={this.dropdownClickHandler}
>
<div>
<span>
{option.scientific_name}
</span>
</div>
<small>
<span>
{option.common_name}
</span>
</small>
</div>
)}
/>
I'm using antd TimePicker when I open it and scroll down, the popover scrolls with the page instead of staying in place.
I cant figure out why their official solution for the scrolling problem isn't working for me
https://ant.design/docs/react/faq#How-do-I-prevent-Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-scrolling-with-the-page
Here is my code:
<div className="timepicker__wrapper">
<span className="timepicker__mintime-label">
{getTranslate(QUESTION_MODULE.GENERAL.MINIMUM_TIME_LABEL)}
</span>
<TimePicker
getPopupContainer={triggerNode => triggerNode.parentNode}
onChange={onChangeMinTime}
format={timeFormat}
defaultValue={moment(item.minTime ?? '00:00', timeFormat)}
allowClear={false}
/>
</div>
If I console.log triggerNode.parentNode it points to the timepicker__wrapper exactly as it should.
Here you can see the anchor node
I solved this issue by adding position: relative to the anchor node. It would be nice to mention this in the docs
I am using a set if images in a row. There is a text box input above these images and based on the input i need to enable/disable images?
How to do this in React.
I tried adding "disable" to image tag and disabled=true but both didn't work.
const IBox = props =>
<div style={props.styles.imageContainer} >
<img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" /><span > </span>
<img id="image2" src={require('../../../public/images/image2.jpg')} alt ="Image2" /><span> </span>
<img id="image3" src={require('../../../public/images/image3.jpg')} alt ="Image3" /><span> </span>
<img id="image4" src={require('../../../public/images/image4.jpg')} alt ="Image4"/>
</div>
export default IBox;
There is no such thing as "disabling" images. You can only disable form elements, as they are the only interactive html elements. See w3c specification to see which items can be disabled exactly.
That is unless you write your own custom definition for disabling images. For example, you could add a class disabled to the image, and style that class to be greyed out, using CSS.
You could also combine CSS with WebComponents to have an element that with a disabled attribute. You could style its disabled style.
See also docs for the <img /> tag.
If you mean hide/show.. you simply may use state to disable your image i.e.
{this.state.img1 && <img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" />}
if by disable you mean to make it like grey, low opacity,etc... you may use an state :
style= this.state.disable? {{style_disable}}: {{style_enable}}
Use <input /> instead of <img /> as in this example.
You can provide the same functionality with the type="image" attribute. This way you can use the disabled attribute.
<input
type="image"
disabled={disabled}
/>
I have been using the timepicker and trying to customize the popup for which I might need to add a class to the popup . I tried using "popupClassName" but i don't see that class name getting added to the popup.
Kindly let me know how can i add a class to the timepicker popup .
It does work as documented. See https://codepen.io/JesperWe/pen/RVOwOV which adds a class and some CSS to give the popup a red shadow.
<TimePicker defaultValue={moment()} popupClassName="foobar"/>
result:
<div class="ant-time-picker-panel foobar ant-time-picker-panel-column-3 ant-time-picker-panel-placement-bottomLeft"
style="left: 24px; top: 63.7778px;">
<div class="ant-time-picker-panel-inner">
<div class="ant-time-picker-panel-input-wrap">
<input class="ant-time-picker-panel-input" value="02:32:41" placeholder="Select time"><a
class="ant-time-picker-panel-clear-btn" role="button" title="clear"></a>
</div>
<div class="ant-time-picker-panel-combobox">
<div class="ant-time-picker-panel-select">
<ul>...</ul>
</div>
<div class="ant-time-picker-panel-select">
<ul>...</ul>
</div>
</div>
</div>
</div>