Text field distortion

[Chetna Bulbul]

Hi Team,

I am using blockly version 9. For all the text fields, if the input is on focus, text inside it is coming in distorted manner. (Attached screenshot for reference).

From css perspective, I am just changing font-family of all fields to '72'. Apart from that, there is no over writing of styling.
Can someone suggest how to fix this?

Thanks,
Chetna

[Chetna Bulbul]

Just to add, on focus out it comes up properly. The issue is only there if input is in focus.

[Neil Fraser]

Could you be more specific regarding the CSS change you've made?  'font-family' is intended to be a font name, not a number like 72.  The text in the screenshot doesn't appear to be a font size of 72pt or anything of that nature.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/da8247ae-fbd5-4d2e-a792-2ed4a3a0cd43n%40googlegroups.com.

--

Neil Fraser, Switzerland
https://neil.fraser.name

[Chetna Bulbul]

Hi Neil, 

Even if we remove our own css, the text is coming up like this. For few characters, it appears normal. But for long text as shown in the screenshot, it appears like the characters are overlapping 

You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/AZjNZMer__8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAEx9HWErFPYOVYWTJp6o7hCHcnQ6og7ptzf0-tJRHk73jia%2B6w%40mail.gmail.com.

[Beka Westberg]

Hello!

It looks like the opacity of the html input has been changed, so you're seeing through the html input to the text on the block, which is slightly offset for sizing reasons. You should be able to use the chrome developer tools to inspect the html element, determine what is changing the opacity, and disable it =)

Hopefully that helps! If that's not the issue or you have any further questions please reply =)

--Beka

[Chetna Bulbul]

Hi,

I have checked and couldn't find any styling which might have changed opacity of html input.

I tried few things and found that after changing the style of blocklyWidgeDiv from

display : block to 

display : contents,

this issue of overlapping text is resolved. 

But natural behaviour of input field is disturbed. For example, when we select the text inside input field, functionality wise it works. Select all, cut, copy , etc works but selected text is not coming in blue color .

Also while typing, cursor is not visible.

Any suggestions?

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/d7e70421-5a83-4fb8-9e85-1c10246414ccn%40googlegroups.com.

[Christopher Allen]

Hi Chetna,

I have checked and couldn't find any styling which might have changed opacity of html input.

I tried few things and found that after changing the style of blocklyWidgeDiv from

display : block to 

display : contents,

this issue of overlapping text is resolved. 

So, I think this is effectively hiding the blocklyWidgetDiv itself, showing only the input blocklyHtmlInput; I'm not sure why this would fix the overlapping text issue (but I'm not as familiar with CSS as some of the other members of the team).

But natural behaviour of input field is disturbed. For example, when we select the text inside input field, functionality wise it works. Select all, cut, copy , etc works but selected text is not coming in blue color.

Also while typing, cursor is not visible.

It seems like display: contents on the div is making the input itself invisible, allowing you to see the SVG text element beneath, which is updated in response to changes in the field.  That would explain the behaviour you observe.

Any suggestions?

I think Beka's previous guess is probably correct.  My suggestion is that you try to create a minimal reproduction of the issue, and in the process of removing everything extraneous you'll probably locate the offending code.  If you do manage to get it down to e.g. a single HTML file with a single Blockly.inject call without resolving the problem then do consider posting a bug report.

Christopher

[Chetna Bulbul]

Hi Team,

Sorry for the late reply.

I have tried this and found that there is a central css on all buttons and input( which is getting applied for blocklyhtmlinput as well)  - 

Due to the above CSS( which gets prioritized), this issue is happening. In browser, on removing this css, it works perfectly fine.
But, we can not remove or change this in our code since it will affect al all places.

We tried to override this in the component where blockly is being used, but we are not able to override.
Could you suggest any way to override this.

Thanks,
Chetna

[Maribeth Moffatt]

Hello, I believe that all html inputs created by Blockly should have the `blocklyHtmlInput` class applied, so you could apply a style to this class in a declaration that has greater specificity than the one in your existing css and it should be applied.

Maribeth

[Chetna Bulbul]

Hi Maribeth,

Thanks for your quick response.
The existing css has the specificity: (0,0,1) and we are trying to apply css to class  blocklyHtmlInput  like below -


As per my understanding, it should have specificity (0,1,0) and it should be applied. But I don't see it getting applied.

[Maribeth Moffatt]

Hi, are you sure that css is actually being injected / used on your page? Can you try to add another property to check (e.g. set the text color to red or something obvious)? Normally if a css property is being overridden somewhere else, in the browser console you'd see the property still listed with a line through it, like how `border-radius` is being overridden somewhere in your screenshot. But the `background-color` property isn't even showing up in the list, so I think the problem may be that your css is not being applied at all.

[Chetna Bulbul]

Hi,

Yes correct. That's the actual issue I am stating. It is not getting applied(I feel it is not getting applied due to the existing css which i stated earlier in this mail thread).
What changes can I make to get it applied?

[Maribeth Moffatt]

Hi Chetna, what I mean is I don't think this CSS is even being loaded onto your page. I don't think that it is simply being overridden by some other CSS. 

How are you loading the CSS from your screenshot onto the page? 

[Chetna Bulbul]

I am working on angular project. 
The component which is using blockly, I am applying the css code in the component's corresponding scss file.  Other css used in the same file (for eg :- for blocklycontainer) is getting applied and working fine (screenshot for reference).

[Viktar Tserashchuk]

Hi Chetna,

Angular uses something called View Encapsulation to isolate CSS rules within a particular component (https://angular.io/guide/view-encapsulation).

Therefore, your changes are not applied to the html created by Blockly.

I usually change CSS for Blockly like this:

 :host ::ng-deep .blocklyTreeRow {
    padding-right: 2px;
}

[Chetna Bulbul]

Hi Viktar,

Yes we have already tried using host and ng deep, it is working for other elements like blocklyNonEditableText,blocklyText,blocklyTreeLabel etc. Unfortunately, it is not working for  blocklyHtmlInput.

[Viktar Tserashchuk]

I see. It seems that this input element is not rendered within the div with blockly container, and because of that it doesn't make sense to put the style for  .blocklyHtmlInput into the Angular component that renders the blockly workspace.

What you need is to define the style in the file with the Angular's global styles (styles.css). 

[Chetna Bulbul]

Hey Viktar,

We have tried applying the background-color to blocklyHTMLInput in styles.scss file as well. Unfortunately, it doesn't work 😟
Will appreciate any other suggestions.

Thanks,
Chetna