Rounded toggle button issue
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 42/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- css
- Domain
- documentation, frontend
Research direction
Start with docs/products/buttons.mdx and scss/product/components/_buttons.scss, then reproduce the documented TypeError while building the documentation. Trace the reported slice error to the rounded toggle example or its styling, and consider the work complete when the example builds without error and renders the intended rounded toggle.
Written by the indexing model from the issue text.
Description
Signed-off-by: ashishjain ashish.jain@mayadata.io
Trying to add css for Rounded-Toggle-Button , but error giving --
./docs/products/buttons.mdx
TypeError: (intermediate value).slice is not a function
docs/products/buttons.mdx
### Button group with Toggle
<Playground>
<h2>Toggle Switch</h2>
<label class="btn-pill-switch">
<input type="checkbox" style="display: none;">
<span class="pill-toggle pill-round ">primary</span>
</label>
</Playground>
_scss/product/components/buttons.scss
.btn-pill-switch {
position: relative;
display: inline-block;
vertical-align: middle;
width: 48px;
height: 28px;
}
.pill-toggle {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align:center;
padding-top:4px;
background-color: white;
}
.pill-round {
border-radius: 34px;
border:1px solid gray;
}
input:checked + .pill-toggle {
background-color: blue;
color:white;
border:1px solid blue;
}
Attached screenshot for desire result --
- Dominant language
- CSS
- Stars
- 6
- Forks
- 6
- PR merge metrics
- No merged PRs in 30d
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from mayadata-io/de-code
-
Difficulty 2/5 1-3 hours Newbie friendliness 20/100
mayadata-io/de-code#140 ·
-
Difficulty 3/5 1-2 days Newbie friendliness 35/100
mayadata-io/de-code#137 ·
-
Icons
Difficulty 4/5 3-5 days Newbie friendliness 35/100
mayadata-io/de-code#136 · 1 comment ·
-
Fix wave icon Open
mayadata-io/de-code#105 · 1 assignee ·
-
page Typography
Difficulty 5/5 Over a week Newbie friendliness 20/100
mayadata-io/de-code#56 ·
All issues in mayadata-io/de-code
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
certification
Difficulty 1/5 Under an hour Newbie friendliness 80/100
-
Difficulty 1/5 Under an hour Newbie friendliness 85/100
bisq-network/support#2181 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 85/100
-
tutorial updates Open
Difficulty 1/5 Under an hour Newbie friendliness 80/100
sveltejs/svelte.dev#2241 ·