How to remove the large whitespace area?

, ,
1

Since the manual ner present the sentences by tokens, and I cannot copy the sentence to the clipboard. So, I insert a custom HTML block to the task. But the whitespaces between my button and the tokens are too large. How to set the custom CSS to remove the whitespaces?

2

I think this might be the padding around the annotation card? If you open your browser's developer tools and hover over the section, it'll show you the container, its class name. and where the spacing comes from. For example, like this:

Screenshot 2020-01-05 at 13.21.18
Screenshot 2020-01-05 at 13.21.181712×498 29.2 KB

If it's the .prodigy-content, you could probably do something like .prodigy-content:last-child { padding-top: 0}. Or even a negative margin, if you want to move it further up – like margin-top: -20px.

3

Actually, it came from the automatic generated class name like "cxxxxx".

1990×768

If I disable the white-space property from c01151 class name , the whitespaces will disappear. However, I don't know how to disable it from custom setting. It seems that the css class name were generated from javascript file.

4

That container also has the class .prodigy-content, though, so you should be able to override it via that class as well (the auto-generated class names are generated at build time so they should be consistent within the same version of Prodigy, too).

Alternatively: the spacing here is caused by the fact that newlines \n are rendered, so you could also just remove all leading newlines from your HTML template.

5

I set .prodigy-content{white-space:normal;} , it finally removed the whitespaces. However, I cannot double click to assign the entity name any more. It just selected all the tokens. :pensive:

The following are my hmtl & javascript code. There are actually no newlines \n in my template.

<style type="text/css">
   #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
</style>
<textarea id="input" >{{text}}</textarea>
<button class="custom-button" onClick="copyText()">
    <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
</button>

function copyText() {
  var input = document.getElementById("input");
  input.select(); 
  document.execCommand("copy"); 
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copied! ";
}
6

Yes, it's needed for the NER interface. That's why I suggested using .prodigy-content:last-child to only apply it to the last container.

And the HTML template does contain newlines – it's 7 lines, so there are 6 newlines that will be rendered if you enable pre-style whitespace.

7

Understood! Thanks.
Setting .prodigy-container .c01167{white-space:normal;} can also override the pre-wrap.

1 Like