Forums Ignite UI for ASP.NET Core
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Rohit Rawat
1375
option in combo box editor coming properly if text width is large.
posted

Hello sir/mam,

I am facing one issue in iggrid i.e when option in combo box editor coming properly if text width is large.Please help me fix it out. Can we use ... and just show text on hover as tooltip in combo box?

  • 0
    Offline posted

    Hi Rohit, the issue you’re facing with the igGrid combo box editor where long text options aren’t displaying properly can be resolved by applying CSS text-overflow handling. You can set the combo box item style to white-space: nowrap; overflow: hidden; text-overflow: ellipsis; so that long text is truncated with “...”, and then use the title attribute or a jQuery tooltip to display the full text on hover. This approach ensures that your dropdown remains clean and readable while still giving users access to the complete option text—similar to how a deck company near me listing might show shortened names in a compact layout but display full details when hovered over.

  • 0
    Offline posted

    Hello Rohit, the issue you’re facing in igGrid with the combo box editor is common when the option text is too wide to fit in the dropdown. A practical solution is to use CSS to truncate the text with text-overflow: ellipsis; and white-space: nowrap; so that the visible text fits neatly, and then enable a tooltip to show the full text on hover. This way, users see a clean layout while still being able to view the complete option when needed. For example, in a project like xxbrits, applying this approach helped maintain a tidy interface while providing full text visibility via tooltips.

  • 0
    Offline posted

    Hi Rohit, the issue you’re facing with the combo box editor in iggrid where long text values don’t display properly can usually be solved by applying CSS styling to limit the width of the dropdown items and then using text-overflow: ellipsis; overflow: hidden; white-space: nowrap; so the text shows as ... when it exceeds the set width, while adding a title attribute or tooltip to display the full text on hover; this approach ensures better UI handling of large text values, much like how businesses seek professional support from ISO consultants in Iraq to simplify and present complex compliance requirements in a user-friendly manner.

  • 0
    Offline posted

    Hello Rohit, the issue you're facing in the igGrid combo box editor is likely due to the text width exceeding the container size, causing layout overflow. Yes, you can definitely implement ellipsis (...) for long text entries using CSS like text-overflow: ellipsis; white-space: nowrap; overflow: hidden; and then add a tooltip using the title attribute to show the full text on hover. This approach helps maintain a clean UI while still giving users access to full details—similar to how Skyline menu items are often shortened in dropdowns on smaller screens, with full names shown on hover. Let me know if you need a working code snippet!

  • 660
    Offline posted

    Hello,

    Thank you for reaching out regarding the issue with long text in the combo box editor inside the igGrid.

    As per your request, I’ve implemented a solution that ensures:

    • Long text is truncated with ellipsis (...) for cleaner display.
    • A tooltip appears on hover, so users can still view the full value if it's cut off.

    This is accomplished with a combination of CSS for ellipsis and JavaScript to apply the title attribute dynamically when the combo dropdown is opened.

    CSS for ellipsis:

    .ui-igcombo-listitem {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

    This will ensure that overly long text is neatly truncated within the combo dropdown items.

    JavaScript for tooltip:

    $(document).on("igcombodropdownopened", function (evt, ui) {
    setTimeout(function () {
        $(".ui-igcombo-listitem").each(function () {
            $(this).attr("title", $(this).text());
        });
    }, 0); // slight delay ensures the dropdown items are fully rendered
});

    This code binds to the combo box's dropdown open event and dynamically adds a tooltip (title) to each list item.

    The described scenario could be observed here:        

     

    Working Demo (Live Sample)

    Please check out the working example here:
    https://jsfiddle.net/georgianastasov/bnvrwcqf/9/

    This demonstrates exactly how the text truncation and tooltip behavior will work inside your grid.

    Let me know if you need help integrating this into your environment or would like further customization.

    Regards,

    Georgi Anastasov

    Associate Software Developer

    Infragistics