CSS for a dropdown

[Raga Mounika]

Hi Team,

For my customization I need to have a dropdown for an element 'x'. The element x has generated text and <title> inline for element.
I should get a drop down after the generated text.
I tried with the below code but it did not work( I am getting dropdown first followed by generated text) .Please help me with a proper solution in CSS.

Code: Select all

*[class~='troubleshooting/x'] {

   -oxy-foldable: false;

    content:"x ";

    font-weight: bold;

 }

 *[class~='troubleshooting/x'] > *[class~='topic/title'] {

    display:inline;

  }

 x:not(title){ 

  content:"x ";

  font-weight: bold;

  }

  x > *{

  font-weight:normal;

}

*[class~='troubleshooting/x']! > [class~='topic/title'] {

   content:"x: ";

}

  

*[class~='troubleshooting/x']! > [class~='topic/title']:empty {

    content:"x ";

 }

x:before(5) {

 content:

    oxy_combobox(           

            edit, "@outputclass",

            editable, false,

            labels, "collapsed, expanded, static"

            values, "collapsed, expanded, static",

            columns,9,fontInherit,true);

      font-family:arial, helvetica, sans-serif;

      font-size:7px;

}

Regards,
Mounika

[alex_jitianu]

Dear Mounika,

Have you tried putting the form control on an "after" element? Like this:

Code: Select all

x:after(5) {

    content: 

    oxy_combobox(

edit, "@outputclass", 

editable, false, 

labels, "collapsed, expanded, static"

 values, "collapsed, expanded, static", 

columns, 9, fontInherit, true);

    font-family: arial, helvetica, sans-serif;

    font-size: 7px;

}

Best regards,
Alex

[Raga Mounika]

Hi Alex,

I used "after" element earlier itself. If I use after I am getting the dropdown after the generated text and title element which is not my requirement.
I want generated text followed by dropdown and then title element in the same row.

For more clarity on software I am using DITA CMS in Eclipse domain.

Regards,
Mounika

[alex_jitianu]

Hi Mounika,

Unfortunately, with the built-in form controls that's not possible. In theory, using selectors you can distinguish between these situations. For example:

Code: Select all

<root>

    <x>xxxx</x>

    <x>xxxx<title>yyyy</title></x>

</root>

Code: Select all

x:after {

    content: oxy_combobox(edit, '@a');

}



x:has(title):after {

    content: "";

}



x title:before{

    content: oxy_combobox(edit, '@a');

}

What's not good in the above example is that although the combo appears in the right position, when there is a <title> element it will edit an attribute on the <title>, not on the <x> element. To fix this you will need to implement a custom form control. Such a form control will be able to set the attribute on the parent element. If you want to do that please let me know and I will send you the source code for the built-in combo box form control. You can use it as a starting point and you wont have to change much to it.

Best regards,
Alex