inline-radio buttons
Closed this issue · 4 comments
How do i get inline-radio buttons?? Currently radio buttons break to next line one after other.
My code is
{{#md-radios
selection=model.currentlyemployed
optionValuePath='id'
optionLabelPath='Currently employed'}}
{{md-radio value=1 name="Yes"}}
{{md-radio value=2 name="No"}}
{{/md-radios}}
P.S Though this is not a issue i cannot find any support on this.Thanks in advance
Looking at the materialize docs, it seems that they don't currently support/demonstrate this use case. Can you share a runnable example (e.g. jsbin or codepen) just using materialize that does this?
It looks like it should work as long as you make the containing elements inline, inline-block, etc.
http://jsbin.com/tidedut/edit?html,output
As we update code to support materialize 1.0 this problem might go away. One of the things that will probably change using the block form of ember-radio-button.
Yes officially materialize doesn't support this case.But workaround is same as you have given in the bin.
Link to bin.
How do i achieve this?? (It looks like it should work as long as you make the containing elements inline, inline-block, etc).Below is my code
<div class="left-align col l2 m2">
Currently employed
{{#md-radios
selection=model.currentlyemployed
optionValuePath='id'
optionLabelPath='Currently employed'
}}
{{md-radio value=1 name="Yes"}}
{{md-radio value=2 name="No"}}
{{/md-radios}}
</div>
There you go; the answer is right there in your response :)
You are not stuck using styling from ember-cli-materialize of even materialize. Look at the resulting HTML that is rendered and style it to make it look however you want. For example, pass class='inline-radio' (your own made-up class name to use for styling) to md-radios then put something like this in app/styles/app.scss:
.inline-radio > .materialize-selectable-item {
display: inline-block;
}
Full demo here: https://github.com/jacobq/ecm-issue-651-example