Closed ericobi closed 5 years ago
What you were expecting:
I need to add 10 or 15 tabs in the edit page.
What happened instead:
tabs are added but I can't scroll to the behind ones. and also not mobile responsive.
Steps to reproduce:
simply add 10 or 20 tabs.
Related code:
export const ProviderEdit = props => ( <Edit {...props}> <TabbedForm> <FormTab label="About Provider"> <TextInput source="name" validate={required()} /> <TextInput source="email" validate={required()} /> <TextInput source="avgRating" validate={required()} /> <TextInput source="numReviews" validate={required()} /> <TextInput source="address" validate={required()} /> <TextInput source="website" /> <TextInput source="School name" /> <TextInput source="Year of graduation" /> <TextInput source="RCDSO certification year" /> <TextInput source="Specialty" /> <TextInput source="Memberships and certifications" /> <BooleanInput label="isApproved" source="isApproved" /> </FormTab> <FormTab label="Important Texts"> <LongTextInput source="Biography"/> <LongTextInput source="Why do patients love your practice?"/> <LongTextInput source="Top 3 treatments you offer in your practice1"/> <LongTextInput source="Top 3 treatments you offer in your practice2"/> <LongTextInput source="Top 3 treatments you offer in your practice3"/> </FormTab> <FormTab label="Checkboxes"> <BooleanInput source="Cosmetic (veneers, whitening)" /> <BooleanInput source="Fillings" /> <BooleanInput source="Emergency dental care" /> <BooleanInput source="Roots canals" /> <BooleanInput source="Invisalign" /> <BooleanInput source="Braces" /> <BooleanInput source="Pediatric dentistry" /> <BooleanInput source="Crowns" /> <BooleanInput source="Bridges" /> <BooleanInput source="Dentures" /> <BooleanInput source="Oral surgery- wisdom teeth, impacted teeth" /> <BooleanInput source="Specialists Endo" /> <BooleanInput source="Specialists OMFS" /> <BooleanInput source="Specialists Perio" /> <BooleanInput source="Specialists Prostho" /> <BooleanInput source="Specialists Ortho" /> <BooleanInput source="Specialists Pedo" /> <BooleanInput source="Dental Implants" /> <BooleanInput source="Surgical implant placement" /> <BooleanInput source="bone grafting" /> <BooleanInput source="sinus lifts" /> <BooleanInput source="implant restoration" /> <BooleanInput source="Full-mouth Rehabilitation" /> <BooleanInput source="TMJ Treatment" /> <BooleanInput source="Sleep Apnea Treatment" /> <BooleanInput source="Sedation" /> <BooleanInput source="Periodontal surgery" /> <BooleanInput source="Parking" /> <BooleanInput source="Transit Access" /> <BooleanInput source="Beverages (hot)" /> <BooleanInput source="Beverages (cold)" /> <BooleanInput source="Tv in waiting room" /> <BooleanInput source="Tv in Operatories" /> <BooleanInput source="blankets/pillows" /> <BooleanInput source="Wifi" /> <BooleanInput source="Nitrous sedation" /> <BooleanInput source="Hot towel" /> <BooleanInput source="lip balm" /> <BooleanInput source="handicap accessible washroom" /> <BooleanInput source="kids play area" /> <BooleanInput source="Digital x-rays" /> <BooleanInput source="IntraOral Camera" /> <BooleanInput source="Panoramic X-rays" /> <BooleanInput source="Dental Laser" /> <BooleanInput source="CBCT" /> <BooleanInput source="Digital Scanner (itero)" /> <BooleanInput source="Cerec crowns (same-day crowns)" /> <BooleanInput source="Laser Whitening" /> <BooleanInput source="Paperless practice" /> <BooleanInput source="Direct Billing | Assignment of Benefits" /> <BooleanInput source="In house payment plans" /> <BooleanInput source="3rd party payment plans" /> <BooleanInput source="Ontario Fee guide followed" /> <BooleanInput source="Discounts given with discretion" /> </FormTab> <FormTab label="Images"> <ImageInput source="images" label="Profile Image" accept="image/*" multiple> <ImageField source="url" title="pathname" /> </ImageInput> <ImageInput source="office_images" label="Office Image" accept="image/*" multiple> <ImageField source="url" title="pathname" /> </ImageInput> </FormTab> <FormTab label="Hours"> <BooleanInput source="weekend appointments" /> <BooleanInput source="evening appointments" /> <ArrayInput source="hours"> <SimpleFormIterator disableRemove disableAdd> <BooleanInput source="availability" /> <TextInput source="start" /> <TextInput source="end" /> </SimpleFormIterator> </ArrayInput> </FormTab> <FormTab label="Reviews"> <ArrayInput source="review"> <SimpleFormIterator> <TextInput source="reviewRating" /> <TextInput source="reviewerName" /> <LongTextInput source="reviewText"/> </SimpleFormIterator> </ArrayInput> </FormTab> <FormTab label="Provider Badge"> <BooleanInput source="On time" /> <BooleanInput source="Friendly staff" /> <BooleanInput source="Office Amenities" /> <BooleanInput source="knowledge based expertise" /> <BooleanInput source="Advanced dental technology" /> <BooleanInput source="years of experience" /> <BooleanInput source="advanced training in area" /> <BooleanInput source="convenience" /> <BooleanInput source="insurance friendly" /> </FormTab> </TabbedForm> </Edit> )
Other information:
Environment macOS Mojave node:v11.10.1
First, this is a duplicate of #3116 and #2317 (with a solution implemented by #3288). Second, I would advise against a form with so many tabs anyway. It is most probably not very usable
What you were expecting:
I need to add 10 or 15 tabs in the edit page.
What happened instead:
tabs are added but I can't scroll to the behind ones. and also not mobile responsive.
Steps to reproduce:
simply add 10 or 20 tabs.
Related code:
Other information:
Environment macOS Mojave node:v11.10.1