Setting the exact size of a widget

Custom Widgets
1

image
image826×149 9.2 KB

I’m having trouble figuring out how to make my custom button widget scale properly. I can disable overflow scrollbars but that really doesn’t fix the problem. To try to figure out what this size is, I set it to 100x50 and looked at the code. The iframe has no explicit size, and the div the iframe is contained in ends up being 180.436px by 78.2021px. So that’s a peculiar set of numbers… is that my 100x50 with calculated space for something around it?

Edit: playing around a little, I think it’s only the initial size of the

2

customWidget-Chris’s Fancy Button.json (6.7 KB)

Does anybody want to try my custom button? It definitely still needs work. I tried to make one that’s a little more 3D than the built-in button and added the ability to change its visibility dynamically. You set a single color and it computes the gradient to make the button look a little nicer. There is a dimensions input but at the moment that’s not being used - I’m trying to make it so that you just resize the widget and the button fills the available space. It KIND of works but not quite - it fills the width, but not the height.

One thing that’s strange is that when you resize the button it goes back to the defaults while you are dragging. That’s definitely not what I want but I can’t spend more time today figuring out how to make it stop doing that. Based on behavior, what it seems to be doing is that when you resize the widget it puts a totally blank one in first (it sends the inputs but they’re at the default empty values), then when you are done resizing it sends it all the value changes again.

3

I think you hit the nail on the head – those inputs are the initial size of the widget, but it can still be resized in the app editor. Making widgets scale to the given size is definitely a best practice – let the app builder control the final size.

To help with that, you can use width: 100vh; height: 100vh; on your container / button to make it take up the full size. I’d suggest also doing font sizing with em instead of pt/px so it scales with the widget as well.

Re the resize issue – that’s a performance optimization we did (it happens with some of the other widgets as well). At some point we’ll try to have it keep the same initial parameters, but since it doesn’t affect the widget running in the player, it’s low on the priority list.

4

Also, in r230, new custom widgets will come with some default CSS to help them better match Tulip widget styling. It won’t affect existing widgets (and you can always delete the default CSS if you don’t need it), but might be helpful for you here.

5

Yeah, having the default CSS would be helpful; at least I can match fonts. And if there’s a default CSS there, I can probably override/build upon it. I’m looking to make the buttons (in particular) look less flat. The hover effects are really useful cues with a mouse, less useful on a touch screen though, so YMMV there.

I didn’t know about VH but that’s better than % because of the extra margin. I’m still not filling to 100% (or 100vh) though for my button, hmm. Can you tell that I’m a real developer but I’m a fake web developer :smiley:

1 Like
6

Can you link me to the custom widget and I’ll take a look at the sizing?

In case you want it before r230 comes out, here’s the default CSS:

body {
	background-color: white;
	font-family: Sans-Serif;
	font-size: 40px;
	padding: 10px;
}

button {
	background-color: #3A89EB;
	border-radius: 4px;
	border-width: 0;
	color: #fff;
	cursor: pointer;
	font-size: 24px;
	padding: 16px;
}

button:active {
	background-color: rgb(3, 106, 214);
}

input {
	border: 1px solid #DFE1E5;
	border-radius: 3px;
	color: #182339;
	font-size: 40px;
	padding: 8px;
}

select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' class='sc-fznWqX bsCTUN'%3E%3Cpath d='M7 10l5 5 5-5z'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	background-size: auto 55%;
	border: 1px solid #DFE1E5;
	border-radius: 3px;
	color: #182339;
	font-size: 40px;
	padding: 15px;
	padding-right: 45px;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 24px;
	text-align: left;
}

th {
	color: #47556C;
	background-color: #FAFBFC;
	border: 1px solid #DFE1E5;
	font-weight: 400;
	padding: 4px;
}

td {
	border: 1px solid #DFE1E5;
	padding: 12px 4px;
}
7

Is that how you share them? I attached the widget .json to this thread somewhere, but I keep updating it.

8

@wz2b,

Pulling a snippet out of your code the way @mglidden did is totally kosher if you are just looking to share some part of a widget (like just the CSS). I’d recommend the whole export/attach approach if you have a finished widget you want to share. This will make it easier for others to download it and add it to their instance.

Pete