Crud switch label

[blondie63]

Looking on doc https://backpackforlaravel.com/docs/6.x/crud-fields#switch-1 i see that switch field can have:
label
onLabel
offLabel

because switch have fixed width onLabel & offLabel must be very short

Is there a way to change switch width or dynamical change 'label' ?

[backpack-ai-bot[bot]]

🚨 Bot is not sure about this answer. Please verify. 🚨

Based on the information from the knowledge sources, the switch field in Backpack allows you to set a label, onLabel, and offLabel. However, the documentation does not explicitly mention a way to change the width of the switch directly or dynamically change the label.

For changing the width of the switch, you might need to customize the CSS associated with the switch field. Unfortunately, the provided knowledge sources do not include specific instructions or examples for adjusting the switch width.

Regarding dynamically changing the label, one of the GitHub issues (#4451) discusses changing labels based on other field values. It suggests that you can find the label from the field wrapper and manually change it using JavaScript. Here's a brief idea of how you might approach it:

// Example JavaScript to change the label dynamically
field.wrapper.find('label').text('New Label');

This approach involves using JavaScript to locate the label element and modify its text content. However, this is a general suggestion and may require adaptation to fit your specific use case.

For more detailed guidance, you might want to explore the Backpack documentation or community forums further: Backpack Documentation.

If you have more specific requirements or need further assistance, consider reaching out to the Backpack community for more tailored advice.

ℹ️ Please note our AI Bot does not reply to follow-ups, this will be the only AI answer in this thread. If the AI helped you find the answer, please mark it as answered or write details below so it can learn. Then close the conversation. If not, please give more information for when a human reads this. ℹ️

Relevant sources:

Github Issue (closed): Field improvement proposals - for, setLabelFromFormRequest and others
Editable Columns|Usage Part 1
Columns|switch
Editable Columns|Usage Part 1
Github Issue (closed): [4.1][Package / Custom Field] New field type - Pill Switch / On Off It
Github Issue (closed): [Feature Request] Allow changing labels in new CRUD fields JS API
Added switch field
Fields|switch
Github Issue (closed): [Feature] Add switch field to backpack/pro

[jcastroa87]

Hello @blondie63,

The best approach in this case is to create a custom field based on the existing switch field. This will allow you to customize the width and dynamically update the label using JavaScript as needed.

You can generate a custom field by running:

php artisan backpack:field switch_dynamic --from=switch

Once generated, you can modify the field’s Blade view and add JavaScript logic to adjust the width dynamically or change the label based on the switch state.

Let me know if you need help implementing this! 🚀

Cheers!

[blondie63]

@jcastroa87 Thanks, i'll try to do or is better to wait Backpack v7 ? :)

[jcastroa87]

Meanwhile, use the custom approach, in v7 we are focus to launch ASAP, I don't think this will include soon.

Cheers.