How to provide stylings to preferences items.

[Abhay0196]

Hi,

I have my custom preference category(say ABC) and inside which I have a sub category(say XYZ). Under this I have a preference option for which I have attached a snap. In snap it is pointed that checkbox and the sentence are not aligned properly.

Below is the code for adding this preference item:

export const xyzSchemaGenerator = (extensionName: string) => ({
    type: 'object',
    properties: {
        [`ABC.XYZ.${extensionName}.sampleSubCategory`]: {
            description: `Sample sub category of ${extensionName}`,
            additionalProperties: {
                type: 'string'
            }
        }
    }
});

It is properly binded in the frontend-module.ts file.

FYI, this behavior is same for default properties as well.

Requesting you to provide suggestion on how it be aligned properly or is there anything missing the given code.

[msujew]

Hey @Abhay0196,

you're missing the type property. See:

theia/packages/core/src/browser/core-preferences.ts

Lines 58 to 63 in 0cb16bc

	'breadcrumbs.enabled': {
	'type': 'boolean',
	'default': true,
	'description': nls.localizeByDefault('Enable/disable navigation breadcrumbs.'),
	'scope': 'application'
	},

I believe TypeScript would correctly complain about it missing if you add the PreferenceSchema type as the return type of your function.

If that doesn't help, you can always just import a custom .css file in your code which targets the HTML elements in Theia. That way you can write any CSS to align your checkbox how you like.

[Abhay0196]

Thanks a lot @msujew for the response. It worked.