text-align: left not working in content

Hi,
Using the latest version (1.9.6), running textcat.teach recipe and attempting to text-align: left the card content.

After reviewing similar topics, I've tried
custom_theme: {
... other items
,"card_css": {"text-align": "left"}
}

and
"card_css": {"textAlign": "left"}

and in global_css
"global_css": ".prodigy-sidebar {display: none} .prodigy-sidebar-wrapper {display: none} .prodigy-content {align-text: left}",

Still getting text centered:

Even in the browser developer mode, I'm not finding a way to force the text to be left aligned.

Probably something simple that I'm overlooking ;>)

thanks in advance...Steve

Hi! The card_css setting shouldn't live inside the custom_theme, so I think that's the problem here. The property names should be added in camel-case notation, i.e. textAlign.

If you want to inspect it in your browser's dev tools, the .prodigy-content div is the one to look at. It sets the text align and is also the container that receives the card_css. An alternative would be to set "global_css": ".prodigy-content { text-align: left }".

Hi @ines,
Thanks.
FYI, when I try "card_css": {"textAlign": "left"} outside of the custom theme I get an error:
Invalid settings found in prodigy.json and/or recipe config

card_css -> textAlign value is not a valid dict
card_css value is not a valid boolean

Thanks for catching my typo in the global_css! That works now.

...Steve

Ah sorry, seems like I was wrong. Edited my comment above. And glad it's working now :smiley:

Hi @ines
Opening this issue up again, if that's okay. I have a similar issue to sleclair0.

I have edited prodigy.json to the following:

{
"custom_theme":{<other settings>, "card_css":{"textAlign":"left"}}
}

However I'm not seeing a change in the alignment of the text when I restart textcat.manual. I'm following the camel case update. I've looked into similar issues in other support tickets - is the global_css setting also textAlign? I've tested both with no results. Any idea what I may be doing wrong?

Thanks

Hmm, I'm not sure why the card_css wouldn't be working :thinking: The "global_css" lets you pass in any CSS that's applied to the whole page. This gives you more flexibility and lets you style everything on the page, not just the annotation card. (Here's a very "extreme" example of what's technically possible :sweat_smile:)

In your prodigy.json (or recipe config), it should then look like this:

{
    "global_css": ".prodigy-content { text-align: left }"
}

Hi! I saw another post with the global_css setting, so I had added it so that the final prodigy.json looks like this:

{
"custom_theme":{<other settings>, "card_css":{"textAlign":"left"}, "global_css": ".prodigy-content {textAlign: left}"}
}

Is it possible that the order of custom settings matters? I updated this and then reran "prodigy textcat.manual etc" but the text still shows up like this (sorry for the awful censoring:) ):

In the "global_css", it should be text-align, not textAlign (because it's just a raw string of CSS).

If it still doesn't work, maybe it's not reading the prodigy.json correctly? Where's the prodigy.json that you're editing? It should either be in your current working directory, or in your Prodigy home directory (by default, .prodigy in your user home – you can also run prodigy stats to find the exact path).

Thanks for the text-align tip. Updated that.

prodigy.json sits in my home prodigy folder (I believe...). It's confusing because we have prodigy running on an AWS server. If I relocate prodigy.json (or duplicate the file?) to my current working directory, do I need to change the way that I run the prodigy textcat.manual command? I am pretty sure it's reading in the json file though, because when I input the fields incorrectly, running prodigy throws me an error (very similar to the one that the user above commented when adding the card_css in the wrong spot in the json file).
^I just tested changing some of the other custom settings in my prodigy.json file, and the changes were picked up when running textcat.manual. Looks like it is reading the file okay. I now have just the following in my file, and it's still not able to align to the left:
{
"custom_theme":{"card_css":{"textAlign":"left"}}
}

However when I have something like this, it runs the way I want it to:
{
"custom_theme":{"cardMaxWidth":1800}
}

Update: got it working! Not sure why the custom_theme setting isn't working, but placement of global-css seemed to do the trick.

{
"custom_theme":{<random custom settings>},
"global_css": ".prodigy-content {text-align: left}"
}

Thanks for all your help!

1 Like

Quick follow up. Without using prodigy.json shouldn't the following custom recipe do the job?

    ...
    return {
        "view_id": "classification",
        "dataset": dataset,
        "stream": stream,
        "config": {"global_css": ".prodigy-content {text-align: left}"},
    }

For some reason I still get center aligned.

That should work, yes – unless your prodigy.json also has a "global_css" setting, in which case the recipe config will be overwritten. (I agree that it feels a bit unintuitive, but the idea behind it is to have the recipe define defaults and allow users to overwrite them, either via their global or local config.)

1 Like