Overflow text inside shape and button

nitin291989 · May 2, 2018, 10:25am

How to keep the text inside shape and button, and adjust the size of shape and button automatically as per the text length.

Currently, text is overflowing the shape and button like this:

Code for Shape:

myDiagram =
	$(go.Diagram, "myLegendDiagramDiv",
			{
		isReadOnly: true,
		"animationManager.isEnabled": false,
		contentAlignment: go.Spot.Right,
		allowHorizontalScroll: false,
		allowVerticalScroll: false,
		allowZoom: false,
		padding: 2
			});				  


myDiagram.add(
	$(go.Part, "Auto",
		$(go.Shape, "Rectangle", { fill: null, stroke: "black", strokeWidth: 2 }),
		$(go.Panel, "Horizontal",				    	      
				$(go.Shape, "Square", { fill: "#ecffd6", margin: 5, desiredSize: new go.Size(15, 15) }),					
				$(go.TextBlock, "Available",
						{ font: "10pt sans-serif", wrap: go.TextBlock.WrapDesiredSize, margin: new go.Margin(5, 20, 5, 0), alignment: go.Spot.Center, verticalAlignment: go.Spot.Center }         
				),
				$(go.Shape, "Square", { fill: "#fffff5", margin: 5, desiredSize: new go.Size(15, 15) }),
				$(go.TextBlock, "Unavailable",
						{ font: "10pt sans-serif", wrap: go.TextBlock.WrapDesiredSize, margin: new go.Margin(5, 20, 5, 0), alignment: go.Spot.Center, verticalAlignment: go.Spot.Center }         
				),
				$(go.Shape, "Square", { fill: "#e6e6e6", margin: 5, desiredSize: new go.Size(15, 15) }),
				$(go.TextBlock, "Inactive",
						{ font: "10pt sans-serif", wrap: go.TextBlock.WrapDesiredSize, margin: new go.Margin(5, 5, 5, 0), alignment: go.Spot.Center, verticalAlignment: go.Spot.Center }         
				)																							
		)));
			

myDiagramPart = $(go.Part, "Auto",												
		$("Button",
				{
					name: "calScheduleFC",
					cursor: "pointer",
					click: function() {} 
				},
				
				$(go.TextBlock, "Calculate Schedule", { margin: 2, wrap: go.TextBlock.WrapDesiredSize })
		)
	);
	myDiagram.add(myDiagramPart);

walter · May 2, 2018, 11:12am

Your code looks OK to me. Could you give us the code and data so that we can reproduce the problem ourselves?

nitin291989 · May 2, 2018, 11:15am

The code provided above is the only code responsible for the above shown diagram. I’m facing this issue when trying using multiple languages.

walter · May 2, 2018, 11:18am

But your screenshot is not the result of running the code, because there is additional text in your screenshot that is not shown in the code.

nitin291989 · May 2, 2018, 11:33am

Actual, this problem is coming when tested with languages other than English. From the code, string in “English” is translated into some “mock” value which appears like the way it is in the above diagram.

nitin291989 · May 2, 2018, 11:36am

With “English” string, and in “English” language only:

When used, “InactiveInactive InactiveInactiveInactive InactiveInactiveInactiveInactive” instead of “Inactive”.

walter · May 2, 2018, 11:39am

But there appears to be some Japanese text too. I’m wondering if somehow it is being measured incorrectly. That’s why we need to be able to reproduce the problem.

nitin291989 · May 2, 2018, 11:42am

Above diagram shows, nothing to do with language. Same behavior for “English” and "Non-English.

walter · May 2, 2018, 11:49am

Here’s what I get when I use your code, unmodified except for explicitly setting the Part.location for those two Parts that your code adds to the Diagram:

Clearly that looks correctly measured. But more importantly it does not include the Japanese text that your screenshot shows and that we would like to reproduce in order to determine the cause of the problem.

nitin291989 · May 2, 2018, 11:55am

No issue, if japanese text is not there, try to use a very long string the way i used above for “Inactive”.

walter · May 2, 2018, 12:21pm

nitin291989 · May 2, 2018, 2:10pm

Wonder, why same is not working for me.

Could you please provide the code which you used, if there is any difference apart from button’s loc.

Thanks.

walter · May 2, 2018, 2:26pm

I used your code verbatim – by copy and paste – except that I also specified the Part.location so that the two Parts would be at specific locations. No other changes. Well, changing the “Inactive” string the second time.

simon · May 2, 2018, 2:27pm

example: https://codepen.io/simonsarris/pen/WJjPbP

nitin291989 · May 19, 2018, 9:37am

The problem is occuring in case of RTL languages only, like, “Arabic”, and others.

Behavior is different on different browsers:

1. IE11 - Working fine

2. Google Chrome - Text goes out of Button and overlap with square shape

Also, there is difference in the space between text and square shape in above images.

3. Mozila Firefox - Text goes out of Button and overlap with square shape

Also, there is difference in the space between text and square shape in above images.

Everything is working fine for Non-RTL languages:

Please suggest, how this issue can be resolved?
Thanks.

Here is my code:

isRtl = (document.getElementsByTagName("body")[0].dir == "rtl");

myLegendDiagram =
	$(go.Diagram, "myLegendDiagramDiv",
	{
		isReadOnly: true,
		"animationManager.isEnabled": false,
		contentAlignment: ((isRtl)? go.Spot.Left : go.Spot.Right),
		allowHorizontalScroll: false,
		allowVerticalScroll: false,
		allowZoom: false,
		padding: 2
	});				  

myLegendDiagramRect = 
	$(go.Part, "Auto",
		$(go.Shape, "Rectangle", { fill: null, stroke: "black", strokeWidth: 2 }),
		$(go.Panel, "Horizontal",				    	      
			$(go.Shape, "Square", { fill: ((isRtl)? "#e6e6e6" : "#ecffd6"), margin: 5, desiredSize: new go.Size(15, 15) }),
			$(go.TextBlock, (isRtl)? "غير فعال" : "Available",
					{ font: "10pt sans-serif", wrap: go.TextBlock.WrapDesiredSize, margin: new go.Margin(5, 20, 5, 0), alignment: go.Spot.Center, verticalAlignment: go.Spot.Center }         
			),
			$(go.Shape, "Square", { fill: "#fffff5", margin: 5, desiredSize: new go.Size(15, 15) }),
			$(go.TextBlock, (isRtl)? "غير متاح" : "Unavailable",
					{ font: "10pt sans-serif", wrap: go.TextBlock.WrapDesiredSize, margin: new go.Margin(5, 20, 5, 0), alignment: go.Spot.Center, verticalAlignment: go.Spot.Center }         
			),
			$(go.Shape, "Square", { fill: ((isRtl)? "#ecffd6" : "#e6e6e6"), margin: 5, desiredSize: new go.Size(15, 15) }),
			$(go.TextBlock, (isRtl)? "متاح" : "Inactive",
					{ font: "10pt sans-serif", wrap: go.TextBlock.WrapDesiredSize, margin: new go.Margin(5, 5, 5, 0), alignment: go.Spot.Center, verticalAlignment: go.Spot.Center }         
			)																							
		));

myLegendDiagramPart = $(go.Part, "Auto",												
	$("Button",
		{
			name: "calScheduleFC",
			cursor: "pointer",
			click: function() {} 
		},
		$(go.TextBlock, (isRtl)? "احتساب الجدول الزمني" : "Calculate Schedule", { margin: 2, wrap: go.TextBlock.WrapDesiredSize })
	)
);

if (isRtl) {
	myLegendDiagram.add(myLegendDiagramPart);
	myLegendDiagram.add(myLegendDiagramRect)							
} else {
	myLegendDiagram.add(myLegendDiagramRect)
	myLegendDiagram.add(myLegendDiagramPart);
}

walter · May 19, 2018, 12:10pm

Thanks for the example – we’ll investigate this after this weekend.

nitin291989 · May 19, 2018, 12:31pm

@walter … Thanks!!

nitin291989 · May 20, 2018, 7:39am

Few more examples with same problem:

simon · May 21, 2018, 1:48pm

I’m not sure what it is, here’s an example with your code:

https://codepen.io/simonsarris/pen/vjbMxR?editors=1010

On my machine, this is what I see in Chrome, Firefox, and IE Edge:

They look consistent, but the font also looks slightly different on my machine. Are you also loading a custom font on your page? (From Google Fonts or TypeKit or somewhere else?)

nitin291989 · May 21, 2018, 2:50pm

No, i’m not using any custom font.