How to apply default webix font style to a html div tag?

How to apply default webix font style to a html div tag?

Tagged:

Comments

  • edited July 23

    Hey @webix_B_123, Webix UI is actually using a freely available font called Roboto, you can get it here - https://fonts.google.com/specimen/Roboto (but since you are already using Webix, it is included in the codebase, so you don't need download and/or link it). Here are the default font settings you can get from the webix.css file:

      font-family: Roboto, sans-serif;
      font-size: 14px;
      font-weight: 400;
      color: #475466;
      letter-spacing: 0.2px;
    
  • edited July 23

    The scenario is:
    I have span tag along with font-awesome icon as list item. So the like below.

    "</div class="webix_scroll_cont">/
    </a webix_l_id="asc_id" class="webix_list_item fa fa-sort-alpha-asc"
    style="width:auto; height:34px; overflow:hidden;" role="menuitem"
    tabindex="0">/
    </span class="colHeaderItems">/Ascending<//span>/
    <//a>/
    <//div..>/"

    here span is getting font-family from "fa". how can I inherit from "webix_list_item".

    I hope font-family will change on change of webix theme

  • edited July 23

    As far as I can see your text is wrapped inside a span with your icon </span class="colHeaderItems">Ascending</span>, all you need to do is move your text outside the span for it to inherit from the webix main font: </span class="colHeaderItems"></span>Ascending, here's an example https://snippet.webix.com/be12a2av. The default webix font will get applied to every element inside webix.ui unless it gets overwritten by another rule, as it is with your case.

  • edited July 23

    That's all right.

    please check my case

    https://snippet.webix.com/g0w2qqgb

  • edited July 23

    So in your example you're applying icon css

    $css: 'webix_icon mdi mdi-access-point
    

    to the whole menu item, and you're also storing css inside your value,

    value: '<span class="colHeaderItems">Ascending</span>'
    

    which is sub-optimal. You can achieve the same results with the use of template, which is the recommended way to do this: https://snippet.webix.com/ht9rbhxx. Please note that I've also wrapped the menu item inside a div to align it vertically and horizonally.

  • it is also possible to define icon in the item
    https://snippet.webix.com/tlhts2dk

  • Thanks @Dzmitry for your solution.

    @Intregal thanks for short answer

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!