Forums

Find answers, ask questions, and connect with our
community all around the world.

Home Forum Omnis General Forum Display text horizontally for the left side tab control

  • Display text horizontally for the left side tab control

    Posted by rolanddo on February 17, 2024 at 7:04 am

    Hi everyone,

    I am trying to make a Tab panes with the side that set to kJSTabsSideLeft. However, I want my text is in Horizontal not vertical like its default. Is there any ways that I could make it? The icon is displaying correctly now, and I want the text to display at the same way as the icon.

    Thanks!!!
    Roland

    Andreas Pfeiffer replied 4 months, 3 weeks ago 4 Members · 8 Replies
  • 8 Replies
  • Andreas Pfeiffer

    Administrator
    February 19, 2024 at 10:48 am

    Hi Roland,

    why not simply use buttons for this?

    Best,

    Andreas

    • rolanddo

      Member
      February 19, 2024 at 11:01 am

      Hi Andreas, thanks for your answer. I thought there is a field for doing that. Yeah, I will switch to use buttons. However, I got the problem when trying to use the custom css classname. I have add my new css class to the user.css folder inside html folder similar to the document. However, that css class name not pop up im Omnis studio cssclassname property. I tried your sample Contact Web App Library and it works fine in your library but I could not find where you set up for that. Thank you!

    • Deleted User

      Deleted User
      February 20, 2024 at 7:56 am

      Hi Andreas,

      My custom CSS classname not show up in my Library like your demo Library in this screenshot below. I have added my custom CSS class name in the html//users.css like in the document but I could not find how to set it up in the library. Could you let me how to set it up?
      Thank you!

      • Andreas Pfeiffer

        Administrator
        February 20, 2024 at 8:00 am

        Roland,

        Just type in the css class name (without the leading dot). Once you have used it it should appear in the drop list too.

        Best,

        Andreas

  • Götz Krija

    Member
    February 19, 2024 at 11:03 am

    Hello Roland,

    I think this can be done via CSS.

    The following CSS works for me in Omnis Studio 11 when I add it to the user.css file in C:\Users\[USER]\AppData\Local\Omnis Software\OS 11 35659\html\css\:

    a.ctrl-tabs-vertical-text-left {
    transform: rotate(0deg);
    width: 200px !important;
    top: 0px !important;
    padding-top: 20px !important;
    }

    Götz

    • rolanddo

      Member
      February 19, 2024 at 11:08 am

      Thank you so much, I tried to add new css class but that css classname not pop up in studio. For example: I add a class:

      .mainTab{

      //css code here

      }



      And when I check the cssclassname field in control tab it not showing up. How did it work for you?

      • Götz Krija

        Member
        February 19, 2024 at 11:19 am

        You do not need to add the CSS class to $cssclassname. Leave it empty and just add the following to the user.css file in your Omnis installation:

        a.ctrl-tabs-vertical-text-left {
        transform: rotate(0deg);
        width: 200px !important;
        top: 0px !important;
        padding-top: 20px !important;
        }

        • rolanddo

          Member
          February 19, 2024 at 11:21 am

          Oh, got it. Thanks in advance!

Log in to reply.