<FormField style="display: inline;">
<Checkbox />
<span slot="label">test</span>
</FormField>
<script lang="ts">
import FormField from '@smui/form-field';
import Checkbox from '@smui/checkbox';
</script>
I'm trying to create a list of checkboxes with labels beside them, but the labels are jumping to the next line. I really can't figure out why.
Shouldn't the inline take care of this?
I'm using the svelte material ui btw.
CodePudding user response：
You have probably forgotten to import the css file for the material ui component. You need to import css file for each one of them.
import '@smui/checkbox/bare.css'
import '@smui/form-field/bare.css'
...
Add these lines to your top-level component inside the <script> tag, so these css styles will be available in all the nested components. I am not sure if there is a way to import all css files at once though.
CodePudding user response：
The display:inline should not be on the <Formfield>, it needs to be on the two elements that are siblings (usually, your checkbox and the span).
BUT your checkbox is not a <input type="checkbox" /> element, it is a component. Therefore, you must check inside the component and see what code is in there. Perhaps the checkbox is surrounded by a div? What is being output into the DOM (use DevTools F12 to check what html is rendered)
A solution is to use flexbox on the <Formfield> element. Instead of display:inline, try using display:flex -- that alone might fix your problem.
Some useful links for quick flexbox info: