Hi, I’m tryiung to add a button in a listview subitem’s cell. I understand it’s best to do this with HTML.
Dim lvsiButton As New ListViewItem.ListViewSubItem
lvsiButton.AllowHtml = True
lvsiButton.Text = “<a href=’#’ class=’myButton’>Edit</a>”
li.SubItems.Add(lvsiButton)
Me.lvIssues.Items.Add(li)
I have a multi-line CSS style of myButton from http://www.bestcssbuttongenerator.com … which outputs as CSS.
The CSS Editor doc says the ThemeBuilder’s CSS Editor needs it in JSON format.
Original CSS:
.myButton { -moz-box-shadow:inset 0px 1px 0px 0px #9acc85; -webkit-box-shadow:inset 0px 1px 0px 0px #9acc85; box-shadow:inset 0px 1px 0px 0px #9acc85; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b)); background:-moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%); background:-webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%); background:-o-linear-gradient(top, #74ad5a 5%, #68a54b 100%); background:-ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%); background:linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74ad5a', endColorstr='#68a54b',GradientType=0); background-color:#74ad5a; border:1px solid #3b6e22; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:13px; font-weight:bold; padding:6px 12px; text-decoration:none; } .myButton:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a)); background:-moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%); background:-webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%); background:-o-linear-gradient(top, #68a54b 5%, #74ad5a 100%); background:-ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%); background:linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a54b', endColorstr='#74ad5a',GradientType=0); background-color:#68a54b; } .myButton:active { position:relative; top:1px; }
WiseJ JSON conversion attempt
“myButton”: {
“-moz-box-shadow”: “inset 0px 1px 0px 0px #9acc85”,
“-webkit-box-shadow”: “inset 0px 1px 0px 0px #9acc85”,
“box-shadow”: “inset 0px 1px 0px 0px #9acc85”,
“background”: “-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b))”,
“background”: “-moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%)”,
“background”: “-webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%)”,
“background”: “-o-linear-gradient(top, #74ad5a 5%, #68a54b 100%)”,
“background”: “-ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%)”,
“background”: “linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%)”,
“filter”: “progid: DXImageTransform.Microsoft.gradient(startColorstr=’#74ad5a’, endColorstr=’#68a54b’, GradientType=0)”,
“background-color”: “#74ad5a”,
“border”: “1px solid #3b6e22”,
“display”: “inline-block”,
“cursor”: “pointer”,
“color”: “#ffffff”,
“font-family”: “Arial”,
“font-size”: “13px”,
“font-weight”: “bold”,
“padding”: “6px 6px”,
“text-decoration”: “none”
}“myButton:hover”: {
“background”: “-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a))”,
“background”: “-moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%)”,
“background”: “-webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%)”,
“background”: “-o-linear-gradient(top, #68a54b 5%, #74ad5a 100%)”,
“background”: “-ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%)”,
“background”: “linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%)”,
“filter”: “progid: DXImageTransform.Microsoft.gradient(startColorstr=’#68a54b’, endColorstr=’#74ad5a’, GradientType=0)”,
“background-color”: #68a54b
}
“myButton:active”: {
“position”: “relative”,
“top”: “1px”
}
Hi Andrew,
You don’t have to convert css to json. That is necessary only if you want to add custom css to a wisej theme in relation to a widget. See the material theme, it adds a pseudo element to create the animated underline. Everything in Wisej is ultimately standard html and css so you can simply add a css file to your project and either reference it in the starting page (usually Default.html) or add it as an embedded resource.
When you add it as an embedded resource you also have to uncomment (or add) the WisejResources attribute in AssemblyInfo to let Wisej bundle the css files.
I have attached a sample project that shows both approaches. You can remove one of the two. I also added the role attribute to the button html. You can see in the sample that you can easily detect clicks on inner html elements.
HTH
Best,
Luca
Please login first to submit.