Elements with .form-control inside a .form-outline div do no


Topic: Elements with .form-control inside a .form-outline div do not have outlines

Cory Albrecht asked 3 years ago

Expected behavior

That form fields would have outlines around them.

Actual behavior

Form fields do not have outlines.

Resources (screenshots, code snippets etc.)

This is with NodeJS 16 using the Pug templating engine. I tried the javascript given here, but no luck.

login.pug:

extends layout

block content
    main
        div(id='intro' class='bg-image shadow-2-strong' style='height: 100vh;')
            div(class='mask d-flex align-items-center h-100' style='background-color: rgba(0, 0, 0, 0.08);')
                div(class='container')
                    div(class='row justify-content-center')
                        div(class='col-xl-5 col-md-8')
                            form(class='bg-white rounded-5 shadow-5-strong p-5')
                                div(class='form-outline mb-4')
                                    input(type='email' id='loginUserID' class='form-control')
                                    label(class='form-label' for='loginUserID') User ID
                                div(class='form-outline mb-4')
                                    input(type='password' id='loginPassword' class='form-control')
                                    label(class='form-label' for='loginPassword') Password
                                div(class='row mb-4')
                                    div(class='col d-flex justify-content-center')
                                        div(class='form-check')
                                            input(class='form-check-input' type='checkbox' value='' id='loginRememberMe' checked)
                                            label(class='form-check-label' for='lognRememberMe') Remember me
                                    div(class='col text-center')
                                        a(href='/login/forgot-password') Forgot password?
                                button(class='btn btn-primary btn-block' type='sumbit') Sign in

layout.pug:

doctype html
html
  head
    title= title
    script(src='/external/jquery/jquery.min.js')
    script(src='/external/jquery-ui/jquery-ui.min.js')
    script(src='/external/bootstrap/js/bootstrap.min.js')
    script(src='/external/mdb-ui-kit/js/mdb.min.js')
    link(rel='stylesheet', href='/external/bootstrap/css/bootstrap.css')
    link(rel='stylesheet', href='/external/mdb-ui-kit/css/mdb.min.css')
    link(rel='stylesheet', href='/external/fontawesome/css/all.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    header
      nav(id='sidebarMenu' class='collapse d-lg-block sidebar collapse bg-white')
        div(class='position-sticky')
          div(class='list-group list-group-flush mx-3 mt-4')
            a(class='list-group-item list-group-item-action py-2 waves-effect waves-light active' href='#')
              i(class='fas fa-tachometer-alt fa-fw me-3')
              span Main Dashboard
            a(class='list-group-item list-group-item-action py-2 waves-effect waves-light' href='#')
              i(class='fas fa-toggle-on fa-fw me-3')
              span Devices
      nav(id='main-navbar' class='navbar navbar-expand-lg navbar-light bg-white fixed-top')
        div(class='container-fluid')
          button(class='navbar-toggler' type='button' data-mdb-toggle='collapse' data-mdb-target='#sidebarMenu')
            i(class='fas fa-bars')
          a(class='navbar-brand' href='#')
            i(class='fas fa-robot')
          form(class='d-none d-md-flex input-group w-auto my-auto')
            input(autocomplete='off' type='search' class='form-control rounded' placeholder='Search' style='min-width: 225px')
            span(class='input-group-text border-0')
              i(class='fas fa-search')
          ul(class='navbar-nav ms-auto d-flex flex-row')
            li(class='nav-item dropdown')
              a(class='nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow' href='#' id='navbarDropdownMenuLink' role='button')
                i(class='fas fa-bell text-primary')
    block content
  script.
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelectorAll('.form-outline').forEach((formOutline) => {
        new mdb.Input(formOutline).init();
      });
      document.querySelectorAll('.form-outline').forEach((formOutline) => {
        new mdb.Input(formOutline).update();
      });
    });

Grzegorz Bujański staff answered 3 years ago

We do not officially support the integration of MDB with pug. Are the inputs in which no border is added are visible after loading the page, are they in a hidden element, e.g. a modal or dropdown?


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: Yes