Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #101442
    edwardsmarkf
    Member

    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?
     

    #101443
    edwardsmarkf
    Member

    HORRIBLE SOLUTION:  (for now)

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

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

    #101449
    admin
    Keymaster

    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/

    #101453
    edwardsmarkf
    Member

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

    #101457
    admin
    Keymaster

    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/

    #101465
    edwardsmarkf
    Member

    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.

    #101466
    yavordashew
    Member

    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/

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.