Topic: Question about form elements
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 5 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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