Button Placement on Lightbox

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?


Apologies, I hadn’t noticed the CSS class in the docs. I can see now that I can style the button via CSS

.dhx_custom_button_MYBUTTONNAME{
}

Now I just need to know how to reduce the width of the select.

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?

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.

Thanks for the code about the select value.

Wouldn’t it just need a minor change to the following line to have the width of the selects user-definable rather than being hard-coded?

var html="<div class='dhx_cal_ltext' style='height:"+height+";'><select style='width:100%;'>";

Couldn’t

<select style='width:100%;'>

be replaced by something like

<select class='dhx_cal_lselect'>

and add the class to the CSS.

Then we could over-ride the class if we wished to.

Follow-up question.

You kindly supplied the necessary code to get the VALUE of the select using

var select = scheduler.formSection("controlName");
var domElement = select.node;//html node
var value = select.getValue();

How would I alter that to get the TEXT being displayed in the select rather than the value of the select?

Hi,

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;

Thanks for that. It will be perfect for my needs.