I am using the Terrace style, and I want to add a button to the right of my selects in my custom sections of mylightbox.
Unfortunately, in the Terrace style, the selects extend full width so there is no space for a buton and so the button appears on top of the select. I attached an image showing the issue.
How can I reduce the width of the selects? Is there a CSS class that I can modify to do it?
Also, can I style the button itself via the CSS classes to change the color of the button? Presumably, I’d be able to use the same CSS class to add an icon to the button?
Hi,
the default selects always have 100% width, ‘style=“width:100%;”’ is hardcoded so it can’t be decreased. You’ll need to define your custom control in order to change it
Also, Have can I access the current value of the related select? Is it available in the section object that is passed to the button click event?
You can get all info with scheduler.formSection method:var select = scheduler.formSection("controlName");
var domElement = select.node;//html node
var value = select.getValue();
the default selects always have 100% width, 'style="width:100%;"' is hardcoded so it can't be decreased. You'll need to define your custom control in order to change it
Would be nice if it was applied via a CSS class so that we could override it.
Thank you for the suggestion, we’ll do it in the nearest time.
As for selected text, you can get select box with following code:
var select = scheduler.formSection("type").node.getElementsByTagName("select")[0];
and get text with:
var text = select.options[select.selectedIndex].innerHTML;