I am playing around with React Components and I came across this website that goes over different ways to use Form Control with bootstrap styling. I want to create a text area that dynamically changes in size when user presses enter, but with the following exercise a scroll bar gets added. I could just change the number of rows, but is there a way to make the text field change in size every-time a user creates a new line
<Form.Group controlId="exampleForm.ControlTextarea1">
<Form.Label>Example textarea</Form.Label>
<Form.Control as="textarea" rows={1} />
</Form.Group>
React bootstrap examples
Thank you for your time and answer
This package would have the behavior you are looking for: react-textarea-autosize
For making it bootstrap-like, I'd suggest adding a bootstrap css className to this component (more info):
<TextareaAutosize className="form-control" />
Related
After failing to load 5 TinyMCE editors on one page, I decided to create "edit" buttons which then loads the editor inside a modal.
<Modal.Body>
<FormGroup className="mb-3">
<Editor name="text" label="Text" /> //My TinyMCE object
</FormGroup>
</Modal.Body>
But when any of the TinyMCE features opens a modal of its own, none of its input controls are getting focused. Tried setting autoFocus to false on the Bootstrap Modal but still no use. I found this has been addressed in the past, as in this question. However, like the same, most responses are tailored for jQuery, which I'm not familiar with. Any React based solution?
Assuming you're using the react-bootstrap library, then you'd need to set the enforceFocus prop to false (instead of autoFocus). See https://react-bootstrap.github.io/components/modal/#modal-props
The reason this is needed is that bootstrap will try to ensure that the focus never leaves the modal dialog for accessibility purposes. This is normally fine, however in this case it conflicts with TinyMCE which itself needs to open new modal dialogs and focus the content inside (as you've already alluded to).
I am building a React app with a hefty search functionality. Essentially, I need to conditionally render Radio buttons based on other Radio buttons input. I am using the MUI library for Radio buttons.
Here's an example of the type of functionality that I need
if (value === 'Option1') {
return <Option1Radios />
}
I know this has to do with useState, so the actual code will look nothing like the above example, but that's the best way I can explain what I'm looking for.
Currently, I have the basic set of radio options that are necessary for all searches at the top. When the user reaches the 3rd set of radio buttons, I need to take their choice in those radio buttons, and render a large selection of radio buttons based upon that 3rd selection. My current plan is to create components for each set of radio buttons that can appear, and then set it up to render those components when the proper button is checked (Option1Radio component, Option2Radio component, etc.)
Example.js
<Form.Row>
<FormControl>
<FormLabel id="demo-row-radio-buttons-group-label">Options</FormLabel>
<RadioGroup
row
aria-labelledby="demo-row-radio-buttons-group-label"
name="row-radio-buttons-group"
>
<FormControlLabel value="Option1" control={<Radio />} label="Option1" />
<FormControlLabel value="Option2" control={<Radio />} label="Option2" />
<FormControlLabel value="Option3" control={<Radio />} label="Option3" />
</RadioGroup>
</FormControl>
</Form.Row>
I have been looking for a resource on how to conditionally render Radio buttons in this way, but I've been unable to find anything. I would imagine there is some resource that shows me the proper way to set these up, so ideally if someone could link me to that (or even just a website that has implemented this type of searching that I could inspect,) that would be very helpful. If not, if someone could possibly give a code example on how to get this done I would greatly appreciate it.
My assumption on how this needs to be done:
I assume that in my main search page, I need to set the state of the search form.
I assume that I need to change the state of the search form to reflect the value of the specific radio option, so that it will render the appropriate set of options.
Thank you for the help and I'm happy to provide anything else that may help. I know this may seem like a ridiculous question, essentially asking for documentation/guide, but I have searched for a few hours now to no avail! Thank you again!
You can do conditional rendering like this:
Define the state to control the rendering:
const [contition, setCondition] = useState(false);
This code only displays <Option1Radios /> when your condition is true:
return {condition && <Option1Radios />};
Here is an article about it: https://medium.com/geekculture/stop-using-for-conditional-rendering-in-react-a0f7b96200f8. ps: I still prefer && syntax specially in TypeScript where you can ensure the variable is always a boolean.
I'm using the TextField component in multi-line mode to edit the query text (sort of like a simple code editor), but it doesn't display line numbers. Can I somehow program to show the line numbers next to it?
<TextField
className="mt-8 mb-16 mx-4"
label="Query Text"
autoFocus
id="my_query"
name="my_query"
value={form.my_query}
onChange={handleChange}
variant="outlined"
multiline
rows={16}
fullWidth
/>
I tried to use react-simple-code-editor, but it didn't work for me due to the architecture of my web application (there is no onChange event and e object, but only onValueChange - without the e event object), and my form automatically transmits changes onChange to the form. In short, react-simple-code-editor doesn't suit me.
And it would be nice if someone could suggest how to display line numbers using the standard TextField component in multiline mode from the material-ui library.
I have an SVG file that I import in my React web page. The problem is the SVG displayed has some of its colors wrong.
As you can see on the web page, there are 3 SVG. 2 of them are displayed with wrong colors. But the first one has original colors. Although the 3 SVG are imported and used exactly the same way.
In MyPage.jsx, I import them
import Hanshake from '../images/handshake.svg';
import Logistics from '../images/logistics.svg';
import Designer from '../images/designer.svg';
Then simply use it like this:
<Col xs={24} md={8} className='about_illustration_text'>
<Hanshake />
Some text
</Col>
<Col xs={24} md={8} className='about_illustration_text'>
<Logistics />
Some text
</Col>
<Col xs={24} md={8} className='about_illustration_text'>
<Designer />
Some text
</Col>
I didn't find any CSS conflicting.
What's wrong with those SVG ?
First SVG codepen
2nd SVG codepen
3rd SVG codepen
There are conflicting CSS rules. Each SVG uses <linearGradient> definitions (look inside the <defs> sections), and they use the same Ids.
These Gradients get referenced by style attributes like this:
style="fill:url(#_Linear11);"
After inserting all SVG content into one page, there are multiple <linearGradient> elements with the same id as part of the same DOM. Ids must be unique throughout a page, or references will overwrite each other.
You are overwriting your fill styles with the fill:url(#_Linear1) rule (the #_Linear1 part). If you put 2 of that SVG in the same CodePen, you will see how they change its fill since they are conflicting. Things gets odd with 3 in the same file.
Change your url(#_Linear1) to a rgb plain color/background or use a unique identifier for each background element.
The caps lock icon is popping up as an inbuilt feature of React Native - TextInput component. I would like to style this icon so I can apply the right padding to it.
No documentation on this feature, but seems to be turned on when secureTextEntry prop is true for the component.
<DefaultInputField
id="password"
placeholder="Enter password..."
label="Password"
secureTextEntry=true
/>
If you only want to apply (right) padding you could do the following.
Wrap your input field with a View and apply the border styling to the view. Apply the (right) padding to this View.
Remove the border styling from your input field and make fit perfectly within your view.
If done correctly this will visually yield the same result but you can control the right padding.