Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Boostrap4 style error #3729

Closed
3 of 4 tasks
Dannergal opened this issue Jun 7, 2023 · 7 comments
Closed
3 of 4 tasks

Boostrap4 style error #3729

Dannergal opened this issue Jun 7, 2023 · 7 comments

Comments

@Dannergal
Copy link

Prerequisites

What theme are you using?

bootstrap-4

Version

5.x

Current Behavior

I follow the steps from: https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/bootstrap-4
and get this:

image

I call the Form:
import Form from '@rjsf/bootstrap-4';

Expected Behavior

I expected to happen the same in Demo:
https://rjsf-team.github.io/react-jsonschema-form/

image

Steps To Reproduce

  1. sudo yarn add react-bootstrap @rjsf/core
  2. sudo yarn add @rjsf/bootstrap-4
  3. import Form from '@rjsf/bootstrap-4';

Environment

- OS: MACos Ventura Version 13.4 (22F66)
- Node: v18.14.1
- NPM: 9.3.1
- yarn: 1.22.19
  "dependencies": {
    "@rjsf/bootstrap-4": "^5.8.1",
    "@rjsf/core": "^5.8.1",
    "@rjsf/utils": "^5.8.1",
    "@rjsf/validator-ajv8": "^5.7.2",
    "axios": "^1.4.0",
    "markdown-to-jsx": "^7.2.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.4",
    "react-dom": "^18.2.0"

Anything else?

I have the same result with:
import Form from '@rjsf/bootstrap-4';
import Form from '@rjsf/core';

image

@Dannergal Dannergal added bug needs triage Initial label given, to be assigned correct labels and assigned labels Jun 7, 2023
@Dannergal
Copy link
Author

Dannergal commented Jun 7, 2023

@heath-freenome @epicfaace I saw that you are contributor, Can you help me please?

@heath-freenome
Copy link
Member

@Dannergal can you provide a codesandbox.io example? I'm literally walking out the door for a 6 day vacation so I may not be able to look into it for a bit. @nickgros may also be able to help while I'm gone depending on how busy he is.

@Dannergal
Copy link
Author

Sure! thanks!, please I have another question about this library #3723

@Dannergal
Copy link
Author

Dannergal commented Jun 7, 2023

@nkrietenbrink
Copy link

nkrietenbrink commented Jun 9, 2023

Hey! I had the same issue! On the docs of react-bootstrap, they say you have to install bootstrap as well and import the css in your project. So I installed bootstrap npm install bootstrap and imported the styles like this:
@import 'bootstrap/scss/bootstrap';

After that, the style is as expected.

@nickgros nickgros added awaiting response and removed needs triage Initial label given, to be assigned correct labels and assigned labels Jun 9, 2023
@Dannergal
Copy link
Author

Thanks @nickgros , but i cant , i have the error:
image

@nickgros
Copy link
Contributor

@Dannergal this is an issue with your build configuration, not RJSF, so we can't support you. A simple fix would be to import Bootstrap 4 CSS via CDN instead of NPM. See Bootstrap 4 docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants