I'm using the react-day-picker library to have a calendar in my react form but the input is not following the bootstrap styles of the "form-control" className, and I want the input has the same size of the top inputs as the image
<div className="form-group">
<div className="row">
<label className="text-light col-lg-12" htmlFor="fecha">Nacimiento</label>
</div>
<DayPickerInput id="fecha" inputProps={{ className: 'form-control' }} value={this.selectedDay} onDayChange={this.handleDayChange}/>
</div>
Related
I have several components of Website A (e.g., a customized form) built in Bootstrap. I have Website B build in Docusaurus. Now, I would like to copy these components to Website B. As Bootstrap and Docusaurus have conflict in general. I'm thinking if it is possible to limit the css of Bootstrap to certain components.
For instance, initially, I have a form in a page myForm.mdx.md in Website B:
---
id: 'MyForm'
title: 'MyForm'
sidebar_label: 'MyForm'
---
import MyForm from '../src/components/MyForm';
Page containing MyForm
<MyForm>
</MyForm>
I tried to add <Head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" ... ... /></Head> to the component of Website A to build src/components/MyForm/index.jsx of Website B:
class MyForm extends React.Component {
constructor(props) {
super(props)
this.state = { successMessage: null }
}
componentDidMount() {}
submit(e) {
this.setState({ successMessage: true })
}
render() {
return (
<>
<Head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</Head>
<div className="container--fluid container">
<div className="row">
<div className="col">
<form
method="post"
action="https://www.mywebsite.com/download"
onSubmit={this.submit.bind(this)}
>
<div className="row">
<div className="col-lg-6 pt-3">
<div className="form-group">
<input
className="form-control"
placeholder="First name*"
name="firstname"
required
/>
</div>
</div>
<div className="col-lg-6 pt-3">
<div className="form-group">
<input
className="form-control"
placeholder="Last name*"
name="lastname"
required
/>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12 pt-3">
<div className="form-group">
{this.state.successMessage ? (
<div className="alert alert--success">
Thanks for downloading
</div>
) : (
<button
type="submit"
className="btn btnGreen form-control"
style={{background : "var(--ifm-color-primary-darker)" , border:"1px solid var(--ifm-color-primary-darker)" , color: "#fff"}}
>
Download
</button>
)}
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</>
)
}
}
export default MyForm
The display of Website B shows that the form does have the Bootstrap style. However, we can see the conflicts in other parts (or children components) of website B: sidebar, navigations, etc.
So does anyone know if it is possible to only apply the css of Bootstrap to the component MyForm?
No, you'll have to override any "problems" caused by Bootstrap with CSS applied AFTER bootstrap.css.
I am new to using react and i have started to write a program but i have hit a wall and don't know how to overcome it.
I am trying to display movie poster with their name and release date on the side of the poster. If you see the screenshot you can see thats not the case right now, the text is being placed below the poster.
How would i go about to make the poster and text side by side?
this is my render code if the problem is within there:
return (
<div className="App">
<h1>Movie logger app</h1>
<input value={word} onChange={handleChange} />
<button onClick={getMovieName}>Find Movie</button>
{data.map((item) => {
return <div key={item.id}>
<img src={item.poster} alt=""/> <h2>{item.title}</h2> <h4>{item.date}</h4>
</div>;
})}
</div>
);
This is more of a CSS question than a React question. You can try a flexbox layout, like so:
{data.map((item) => (
<div key={item.id} style={{ display: "flex" }}>
<img src={item.poster} alt="" />
<div style={{ marginLeft: 20, display: "flex", flexDirection: "column" }}>
<h2>{item.title}</h2>
<h4>{item.date}</h4>
</div>
</div>
))}
You could use bootstrap grid system to give each element the half of the screen.
https://getbootstrap.com/docs/4.0/layout/grid/
{data.map((item) => {
<div class="container">
<div class="row">
<div class="col-6">
<img src={item.poster} alt=""/>
</div>
<div class="col-6">
<h2>{item.title}</h2> <h4>{item.date}</h4>
</div>
</div>
</div>
})}
Another option could be to position your elements in a table that cover all the screen (not recommended )
The code inside the signing container something look like this
the label is not moving or getting hide after start typing in the text field
<div className="container">
<form className="while" onSubmit={this.onSubmit}>
<h5 className="grey-text text-darken-3"> Sign In</h5>
<div className="input-field">
<label htmlFor="email">Email</label>
<input type="email" id="email" onChange={this.onChange} />
</div>
<div className="input-field">
<label htmlFor="password">Password</label>
<input type="password" id="password" onChange={this.onChange} />
</div>
<div className="input-field">
<button className="btn pink lighten-1 z-depth-0">Login</button>
</div>
</form>
</div>
Try adding class="active" to the label. it works for me!
Make sure the label comes AFTER the input, as per the documentation.
https://materializecss.com/text-inputs.html
just add this hook in your project!
useEffect(() => {
window.M.updateTextFields()
},[])
it is activate the text fields every time when
component first loading
you can add active className on label
but this
I use summernote in a Laravel application.
<div id="editIssue" style="display: none">
<form class="form-horizontal" action="{{route('projects.issues.update', $issue)}}" method="put">
#csrf
<div class="form-group row">
<label for="title" class="col-sm-2 text-right control-label col-form-label">Title*</label>
<div class="col-sm-10">
<input type="title" class="form-control" name="title" id="title" placeholder="Title" value="{{$issue->title}}">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-2 text-right control-label col-form-label">Description</label>
<div class="col-sm-10">
<textarea id="description" name="description"></textarea>
</div>
</div>
<div class="form-group m-b-0">
<div class="offset-sm-2 col-sm-10">
<button type="submit" class="btn btn-info waves-effect waves-light m-t-10">Save</button>
</div>
</div>
</form>
</div>
I open the div by using jquery button with function show/hide.
When i open the div, the content text of summernote is behind the toolbar. When i scroll or resize the window, the content text is shown correctly.
When i remove style="display: none" the text is shown correctly.
Is there any conflict with summernote and show/hide div?
Before scroll:
After scroll:
We found out that when scrolling before opening the summernote textarea some css was added to the toolbar and the toolbar-wrapper. To fix this I just added the following code to remove the css that was added.
$('#myModal').on('shown.bs.modal', function(){
$('.note-toolbar-wrapper').removeAttr('style');
$('.note-toolbar').removeAttr('style');
})
This is available in Summernote by default now. You can control it by setting the followingToolbar boolean in the options.
$('#description').summernote({
followingToolbar: false
});
Init the summernote on toggle:
$('#buttonEditIssue').click(function () {
$('#showIssue').hide()
$('#editIssue').show()
$('#description').summernote({
placeholder: 'Enter your description',
tabsize: 2,
height: 150,
dialogsInBody: true,
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']]
]
});
})
I have made a group of checkboxes with *ngFor and I want if I click on each of them color of them change and if click again color returns to the previous color:
<div *ngFor="let chekb of amenities" class="checkbox col-md-4 nopadding">
<label>
<input class="removebox" type="checkbox" (change)="changecheckbox($event)" name="checked" [(ngModel)]="chekb.checked">
{{chekb.title}}
</label>
</div>
component:
public amenities: checkBoxClass[] = [
{title:"pool",value:"pool" ,checked:false},
{title:"parking",value:"parking", checked:false}
]
Actually it is a checkbox to choose any of them may be one or two or more.
How can I change color of them by click on them?
Thank you very much.
#component({
...
...
/****** added style ******/
style:[
`
mycolor:{background : red}
`
]
})
<div *ngFor="let chekb of amenities;let i=index" //modified
class="checkbox col-md-4 nopadding">
<label [class.mycolor]="chekb.checked"> //modified
<input class="removebox"
type="checkbox"
(change)="changecheckbox($event)"
name="checked"
[(ngModel)]="chekb.checked">
{{chekb.title}}
</label>
</div>