Overflow text inside shape and button

@nitin291989 wrote:

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:

image.png1266x127 24.4 KB

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);

Posts: 11

Participants: 2

Read full topic