Bootstrap - 4 framework causing issues in template using ngx-boostrap

[neil-coutinho]

Issue type

I'm submitting a (check one): [x] Bug report [ ] Feature request [ ] Regression (something that used to work, but stopped working in a newer version) [x] Support request [x] Documentation issue or request

Prerequisites

Before posting, make sure you do the following (check all): [x] Confirm you are using the latest versions of all necessary packages (or if not, explain why not) [x] Search GitHub for a similar issue or PR [x] If submitting a Support request, also search Stack Overflow for similar issues Note: Please cross-post GitHub support requests to Stack Overflow, and include a link in your GitHub issue to your Stack Overflow question. We do currently respond to support requests on GitHub, but we eventually expect to stop, and will then refer all support questions exclusively to Stack Overflow.

Current behavior

When using the Bootstrap - 4 framework there seems to be some conflict with my Gradient Able template, When typing into any input box the whole screen flickers. I narrowed it down to a conflict between the bootstrap 4 css and the template's ngx-bootrstrap css.

Commenting out the stylesheets from angular2-json-schema-form.es5.js resolved the problem

`'bootstrap-4': { framework: Bootstrap4FrameworkComponent, stylesheets: [

            ],
            scripts: [
                '//code.jquery.com/jquery-3.2.1.slim.min.js',
                '//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js',
              ,
            ],
        }`

I also set load external assets to false

<json-schema-form framework="bootstrap-4" loadExternalAssets="false" [schema]="formSchema" [model]="formModel" [layout]="formLayout" (onSubmit)="submit($event)" [(model)]="formData"> </json-schema-form>

How do I create my own custom framework to avoid modifying anything in the node_modules/angular4-json-schema-form folder

Expected behavior

IMPORTANT: How can we reproduce your problem?

You can checkout my repo at https://github.com/neil-coutinho/qdemo.git

You can view my sandbox at http://localhost:4200/schema

Environment

OS name & version: Browser name & version: Angular version: Angular JSON Schema Form version(s): Other relevant software or packages:

Any other relevant information

[lucasgranberg]

Have you read this?: https://github.com/dschnelldavis/angular2-json-schema-form#changing-or-adding-frameworks

[neil-coutinho]

@lucasgranberg yes I did but could not quite get it to work. Do I simply duplicate the Bootstrap4 framework files sans the CSS and do I update it within the node_modules folder itself?

[lucasgranberg]

The idea is to never change anything in the node_modules folder. To add your own framework I would start by trying this.

constructor(private frameworkLibrary: FrameworkLibraryService) {
    frameworkLibrary.setFramework({
        framework: YourFrameworkComponent,                                // required
        widgets:     { 'your-widget-name': YourWidgetComponent,   ... },  // optional
        stylesheets: [ '//url-to-framework-external-style-sheet', ... ],  // optional
        scripts:     [ '//url-to-framework-external-script',      ... ]   // optional
    });
}

However as I understand it no assets should be loaded if loadExternalAssets is not set to true. I think your problem might be in how you load your css/scss files on other places in the project (just a guess).

[neil-coutinho]

Correct. I do not want to modify anything in the node_modules folder. So looking at the Bootstrap4 framework am i doing the correct thing here

Forgive me, but I'm new to Angular and trying to create custom widgets in my project

[neil-coutinho]

@lucasgranberg do you have a plunker or an example of a customFramework? Even when loadExternalAssets = false the cdn files for the bootstrap-4 framework are loaded. I'm trying to create a duplicate of the bootstrap4 framework without he use of the boostrap 4 css file

[lucasgranberg]

No, do you have a plunker where your problem can be reproduced? I only went by the documentation and what I saw in the code. Maybe something else is loading the bootstrap assets?

[neil-coutinho]

@lucasgranberg Sorry I do not have a plunker, but in my repo you can see that I have loadExternalAssets = false Also see

[neil-coutinho]

@lucasgranberg

Putting square brackets around loadExternalAssets resolved the issue.

<json-schema-form framework="bootstrap-4" [loadExternalAssets]="false" [schema]="formSchema" (onSubmit)="submit($event)"> </json-schema-form>

[rmayuri]

@neil-coutinho HI, I am using bootstrap4module framework, the form is getting loaded but I am not able to read the form values, could you please provide any example to read the values and applying css. below are my fiels for your reference,

login.component.ts import { Component } from ''; @component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] })

export class LoginComponent { title = 'Optum Navigator'; mySchema = { "properties": { "msid": { "type": "string", "required":true, "htmlClass": "mystyle", }, "password": { "type": "string", "widget": "password", "required":true }, } }; myform = { "form": [ "msid", "password", { "type": "submit", "name": "btnSubmit", "title": "Login",

} ] }; public OnSubmitFn(event:any){ console.log("login"+event); } }

login.component.html <json-schema-form loadExternalAssets="true" [schema]="mySchema"
[form]="myform " (onSubmit)="OnSubmitFn($event)"

login.component.css

.mystyle {
    border: 2px solid red;
    border-radius: 4px;
}

Thanks in advance.