Grid cell rounded corners

1

I’m trying to put rounded corners on a common grid cell. I’m using (for the top right obviously)…

MenuGrid.cell(0,c).style.borderTopRightRadius = "20px"

…without success although when I put it in the Grid’s cellstyle properties it will show rounded corners in the design screen but not when the app is run. Any ideas?

2

Are there any errors in the Chrome Console?

The Design Screen uses a different rendering engine than Chrome, so that is also a possible reason for the difference.

3

No errors, just no results. Quick google search says it can’t be applied to ‘td’ cell level. ‘tr’ table level corner radius works ok. Not a big deal, just thought someone might have a work around.

4

The reason you see the effect in other places is because they’re not using tables but instead are using flex containers and you can do a lot more styling with them.

If you’ve never used flex, it’s really pretty easy and w3schools has (as usual) a good tutorial.

Also, (and I used this guys example as a starting point), check out this tutorial and go to the bottom and click on the “edit on codepen” link and then apply your .css to the column and see what you get. Aww heck… just hit that codepen and replace his .css with this:

.some-page-wrapper {
  margin: 15px;
  background-color: white;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  border: 2px solid black;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  overflow: hidden;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.double-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 2;
}

.blue-column {
  background-color: blue;
  height: 100%;
}

.green-column {
    height: 100px;
    background-color: green;
}
1 Like