In my form, I want toggle buttons. The following code is copied from react-bootstrap docs on toggle buttons. However, the radio-button circles are displaying when they should be hidden. How do I hide them?
import ButtonGroup from 'react-bootstrap/ButtonGroup'
import ToggleButton from 'react-bootstrap/ToggleButton
'
<ButtonGroup>
{radios.map((radio, idx) => (
<ToggleButton
key={idx}
id={`radio-${idx}`}
type="radio"
variant={idx % 2 ? 'outline-success' : 'outline-danger'}
name="radio"
value={radio.value}
checked={radioValue === radio.value}
onChange={(e) => setRadioValue(e.currentTarget.value)}
>
{radio.name}
</ToggleButton>
))}
</ButtonGroup>
Use the <ToggleButtonGroup /> component as the container. Set type to radio. Note that name is required when type is radio
See code below
<ToggleButtonGroup type="radio" name="radio">
{radios.map((radio, idx) => (
<ToggleButton
key={idx}
id={`radio-${idx}`}
variant={idx % 2 ? 'outline-success' : 'outline-danger'}
value={radio.value}
checked={radioValue === radio.value}
onChange={(e) => setRadioValue(e.currentTarget.value)}
>
{radio.name}
</ToggleButton>
))}
</ToggleButtonGroup>
The accepted answer didn't work for me, but adding this to my CSS did the trick:
[type='radio'] {
display: none;
}
h/t to this answerer
The issue appears to occur temporarily when upgrading to new react-bootstrap (v1=>v2): https://github.com/react-bootstrap/react-bootstrap/issues/5782
Some steps that can solve the issue:
Restart your react app
Clear cache (Google Chrome right click on refresh gives this option)
Restart docker container if applicable
Run npm list react-bootstrap to see if version is correct
Run npm ci for clean slate with your packages
If no combination of these works, file a separate issue or reply to issue linked above.
Alternative solution (not recommended)
.btn-group input[type='radio'] {
display: none;
}
The issue is actually related to failing to include the stylesheet. I had this problem and the other answers didnt help but including the stylesheet fixed it for me
import 'bootstrap/dist/css/bootstrap.min.css';
React-Bootstrap CSS
Related
(I'm using Vue 2.6) - I read the documentation on v-expansion-panels on vuetify which says it has disabled property to set, but it sets the whole v-expansion-panel disabled, and I want to disable a single v-expansion occurency or more, because I use a for to fill all expansion panels, like 10 occurencies for example, and I want to disable the occurency that has a certain condition. Can someone help? I already tried to use #click.stop inside expansion header, expansion content, but it does not work. I wanted to do like this. On number === 1, don't expand. Or I could even execute a function to return a false, and a message on screen.
<v-expansion-panels>
<v-expansion-panel
#click.stop="number === 1"
>
<v-expansion-header />
<v-expansion-content />
</v-expansion-panel>
</v-expansion-panels>
The v-expansion-panel takes a disabled prop and you can use with a condition to select the panel you want to disable.
<v-expansion-panel
v-for="(item,i) in 5"
:key="i"
:disabled="i === 2"
>
Demo: https://codepen.io/fu7zed/pen/GRQbbVx
API reference: https://vuetifyjs.com/en/api/v-expansion-panel/
I'm doing a test of an autocomplete component.
The problem is when I want to select an option from the dropdown, it shows me any option. When I did the test manually there are options but with cypress no. It worked and after no. I couldn't see the problem.
Does anyone know how to do it please?
(In cypress it didn't show any error)
Here the code of the autocomplete in js file
<Autocomplete
id={"name-label-" + label.customId}
options={options}
getOptionLabel={option => (option && option.name) ? option.name:''}
noOptionsText="No options"
renderInput={params => (
<TextField {...params} label="Select the name" fullWidth />
)}
data-cy="fichaSelectname"
onChange={(event, value) => handleOptionChange(event, value)}
value={option}
classes={classesAutocomplete}
/>
And here's the cypress code I used
cy.get('[data-cy=fichaSelectname]').click().type('{downarrow}').type('{enter}');
Did you try by selecting one element instead of just using the arrow buttons?
cy.get('[data-cy=fichaSelectname]').type('value{downarrow}{enter}');
Cypress did now show any stacktrace/error/info at all?
Well, first of all your code is wrong:
cy.get should be used like that: cy.get('[data-cy="fichaSelectname"]')
Try this.
I am using Angular/Material Autocomplete. While loading data to the Autocomplete getting serious performance issues,like the rendering takes around 30 seconds and it takes more than 10 seconds to become stable,data is loaded from the server, and the data received from the server is quite fast. To Over Come that issue i used cdkVirtualScroll, after scrolling down to end and clicking again the text box it's loading empty popup after scroll its loading values.
html
<mat-form-field>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" (opened)="panelOpened()">
<cdk-virtual-scroll-viewport itemSize="48" style="height: 240px" minBufferPx="96" maxBufferPx="144">
<mat-option *cdkVirtualFor="let option of options" [value]="option">
{{option}}
</mat-option>
</cdk-virtual-scroll-viewport>
</mat-autocomplete>
</mat-form-field>
TS
export class AppComponent {
options: string[] = [];
#ViewChild(CdkVirtualScrollViewport, {static: true}) viewport: CdkVirtualScrollViewport;
constructor() {
for (let i = 0; i < 10000; i++) {
this.options.push("#"+i);
}
}
panelOpened() {
if (this.viewport) {
this.viewport.checkViewportSize();
}
}
}
Check the ex: https://stackblitz.com/edit/angular-7vcohv?file=src%2Fapp%2Fapp.component.html
I'm not sure how many options the mat-autocomplete is targeted to support, but my suggestions to improve the performance are:
Fill the autocomplete only after the user typed at least 2 characters.
Implement a server-side search and fill the auto-complete options after you got smaller amount of options.
If you think this is an issue with the mat-autocomplete component, you can open an issue in the #angular/material repository.
I believe the core problem is that you are using viewChild to reference the viewPort but there are multiple viewports. The AutoComplete setup in the html had similar issues with the setup.
The below StackBlitz seems to be working. I would think the way you had it would work though if you only had one auto complete on the screen.
https://stackblitz.com/edit/angular-rzqjz8?file=src%2Fapp%2Fapp.component.ts
I want to put a form in a popup.
I've found a solution but I'm looking for something cleaner.
I didn't find a way to poping-up an existing tag with swal.
So I created an hidden form in my template :
<div id="myHiddenForm"><form role="form">
<md-input class="email" md-type="email" md-label="Email" md-validate="true"
md-validate-error="invalid email">
<i md-prefix class="material-icons">account_circle</i>
</md-input>
<button type="submit" md-button>
<i class="left material-icons">done</i>Submit
</button>
</form></div>
Then I created the popup with it's innerHTML.
swal({
html: document.getElementById('myHiddenForm').innerHTML,
showConfirmButton: false,
}).catch(swal.noop);
Then I can attach a callback to the submit button and this works finally.
Obviously, I can't use md-value.bind because the displayed form is a copy of the original.
I can access the input's value, using document.querySelectorAll('#myHiddenForm .email input')[0].value but I'm wondering if there's a better way to do this ?
Maybe there's a nice approach to combine aurelia-materialize-bridge and sweetalert2.
I know there's a modal component but it's not capable of keeping the focus inside the modal popup ; plus I already use swal2 everywhere else in this webapp because, you know, it is so sweet.
After a lot of tests and the full reading of the sweetalert2 documentation, I found the correct way to handle this. We simply need to move the <form> node.
swal({
html: '<span></span>'
, showCloseButton: true
, showConfirmButton: false
, onBeforeOpen: dom => swal.getContent()
.appendChild(document.querySelectorAll('#myHiddenForm form'))
, onClose: dom => document.getElementById('myHiddenForm')
.appendChild(swal.getContent().querySelectorAll('form'))
}).catch(swal.noop);
It's perfect to use with aurelia because it preserve everything (monitors, events, validation...).
We don't even need to manually bind the submit button like I did, We can use aurelia's usual way.
Conclusion: RTFM !
I'm using data-menu-top on this page because everything is fixed and uses Skrollr to animate the different sections into view. The reason everything is fixed is so that I could do full-page SVGs that cover the height of the page (if you think there's a better way to do this, I would love to be enlightened).
Here's a link to the project development page: http://pman.mindevo.com
The button that appears on the first section has data-menu-top="10300", and this works great on Chrome, but when I try to view it in Firefox (33.0) the link doesn't do anything at all.
I am initializing using this code:
<script type="text/javascript">
setTimeout(function() {
var s = skrollr.init({
});
skrollr.menu.init(s, {
easing: 'quadratic',
duration: function(currentTop, targetTop) {
return 1500;
}
});
}, 1000);
</script>
Am I properly using data-menu-top? Is this a bug I'm not aware of using fixed layouts that are hidden using height?
Do I need to change the layout somehow to accomplish what I want and have it work in Firefox?
So the problem with Firefox was the way that it handles <button> linking. Here's the way the button was in the HTML:
<button class="buy buypotato">
<a data-menu-top="10300" href="#potatoPurchase1" class="purchase-options first-popup-link">
<svg ....etc></svg>
</button>
In Firefox it wasn't doing anything upon clicking, and got me thinking perhaps I'm using "button" HTML element incorrectly. Anyways, changing it to a div like so:
<div class="buy buypotato">
<a data-menu-top="10300" href="#potatoPurchase1" class="purchase-options first-popup-link">
<svg ....etc></svg>
</div>
That allowed Firefox to utilize Skrollr-menu to scroll to where I needed it to.
There might be a better way to do the layout on this, I'm still experimenting.