Question about form elements


Topic: Question about form elements

iparker asked 2 years ago

Hello,

I have some questions about different form elements and hope you can help me with this.

1.) I tried to place some inline checkboxes, but these are not displayed inline. When I inspect the element I see following style:

.form-inline .form-check { width: 100%; }

So why this is not an inline element?

2.) What is the best way to set a checkbox right to it's label?

3.) Is there a way to hide the labels for an switch-element or just output the righter label (the false label)?

4.) I created a slider and there is no "tooltip/marker" with the value of the slider when I move it like in the examples at https://mdbootstrap.com/docs/vue/forms/slider/. Why?

5.) Is it possible to define the "step size" in a slider?

6.) Is it possible to output the week number in date picker / calendar?

7.) What is the right way to define the format in the date picker? I tried but this does not work.

<mdb-date-picker v-model="date" label="basic example" format="DD.MM.YYYY" />

Thanks for some help with this!

Best regards,

Timo


Magdalena Dembna staff premium answered 2 years ago

Hi, In the future, we would appreciate if you could separate whose questions into topics - some of those answers might help other users as well but they're not so easy to find when unrelated questions are being asked together. 1) I think the best way to position elements in the row would be to use a grid and wrap checkboxes in mdb-col elements - this way you can control break-points as well. It's hard to tell without a code snippet where lays a problem, but the solution below should work as well:

 <div class="form-inline">
          <mdb-input
            type="checkbox"
            id="checkboxArray1"
            v-model="checkArray"
            checkboxValue="Jack"
            label="Jack"
            class="mb-2 pl-0"
          />
          <mdb-input
            type="checkbox"
            id="checkboxArray2"
            v-model="checkArray"
            checkboxValue="John"
            label="John"
            class="mb-2 pl-0"
          />
          <mdb-input
            type="checkbox"
            id="checkboxArray3"
            v-model="checkArray"
            checkboxValue="Mike"
            label="Mike"
            class="mb-2 pl-0"
          />
        </div>

2) That's not one of the default MDB options - I suppose you should inspect elements in the dev tools and change styling. 3). You can pass an empty string to remove a label

<mdb-switch onLabel="" offLabel="OFF"></mdb-switch>

4) It's impossible to tell where is the problem without a code snippet. Please create a separate topic and provide a code

5, 6) Unfortunately we don't have such options

7) DD-MM-YYYY, but Date Picker doesn't have format prop - you need to pass options object with this field

Kind regards, Magdalena


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 Vue
  • MDB Version: 6.4.0
  • Device: x
  • Browser: x
  • OS: x
  • Provided sample code: No
  • Provided link: Yes