setting with of comboBox

[edwardsmarkf]

hell0 – i asked this before but cannot find the answer.   i have the following code:

  placeholder     = ‘Select recent email or enter new one:’

but the results are displayed like so: (notice truncation of placeholder)

Select recent email or enter new…

i tried setting drop-down-width, drop-down-max-width, etc but the css continues to look like this in the browser console:

.smart-combo-box .smart-action-button input.smart-input {
flex-grow: 1;  
align-self: center;
width: var(--smart-editor-addon-width);
min-width: var(--smart-editor-addon-width);
min-height: 100%;
max-height: 1rem;
vertical-align: middle;
margin: 0;
}

i have also tried playing with these values:

div.smart-content {
width : 400px;
}
:root smart-combo-box {
--smart-editor-addon-width : 500px ;
}

what is the best way to expand the width of a drop-down ?  and also, what is the best way to change the css variables starting with a double-dash?
 

[edwardsmarkf]

HORRIBLE SOLUTION:  (for now)

window.onload = () => {
document.getElementsByTagName('DIV')[5].style.width='400px';

[edwardsmarkf]

bad solution:   https://codepen.io/edwardsmarkf/pen/zYoqeoY
i hope you can come up with something better.

[admin]

Hi,
The ComboBox API can be found on this page: https://www.htmlelements.com/docs/combobox-api/. There you will find dropDownWidth and dropDownHeight Javascript properties.
Example:

 <smart-combo-box drop-down-width="800" placeholder='please select whatever coffee you want to drink' selected-values=["Cappuccino"]>

Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[edwardsmarkf]

hello – i apologize, but i cannot get your solution to work properly for me:
https://codepen.io/edwardsmarkf/pen/zYoqeoY

[admin]

Hi,
The example shows how to set the dropDownWidth i.e change the drop down size, when you open it. Do you try to achieve something else?
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[edwardsmarkf]

https://codepen.io/edwardsmarkf/pen/zYoqeoY
sorry, i am not explaining myself properly.  let me please try again.
my placeholder is defined like this:
Please select whatever coffee you want to drink
but my placeholder value is being truncated:
Please select whatever coffee you want…
the only solution i see is doing something like this:

window.onload = () => {
document.getElementsByTagName('DIV')[0].style.width='600px';
}

i am hoping that you have a better solution.

[yavordashew]

Hi edwardsmarkf,
Another solution for you could be to use the ‘::placeholder’ pseudo-element of the input element.With it you can change font size, color and etc.
For example:
//In your CSS file:

input::placeholder{
   font-size:15px;
   color:black;
}

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts