I ran into an issue with a WEBDEV Style today and I wonder if it, or something similar doesn’t have something to do with some of the reports issues some users have had in v25 and v26 with style issues on certain controls after upgrading.

Along with showing you the actual change I made to resolve the specific issue we had with a control, what I feel is of more value is giving you a behind the scenes view of how I determine what the issue was.

So first the problem, in the below screen shot, License Count and Cardholder Name are not showing a border around the input area. All the edit controls on this page are using the exact same style, and there is nothing special about these two controls. So what gives?

I spent a little time looking for the usual suspects, such as the style using an image for the border and the image not existing, overrides on that specific control, etc. And couldn’t find anything.

So I brought out the big guns (Chrome Developer Console) , and started digging deep. Using inspect Element I watched the HTML, especially the CSS classes, for both Cardholder Name (not working correctly) and Billing Address (working correctly).

Here’s Cardholder Name, when not in focus

Here’s Billing Address when not in focus

Well it just so happens that one of the states for WEBDEV controls is Input Not Empty. That sounds like a good place to look next! Before we do, you might be wondering why, the control is getting Input Not Empty, especially for License Count which obviously isn’t empty and Billing Address, which works correctly, appears to be empty but doesn’t get the class. Well I have no earthly clue, and one of the things I have learned from experience is sometimes I don’t need to know why, I just need to solve the problem, so moving on to problem solving.

So I went into style editing for the Card Holder Name control. Selected the Input area (CSS) element, and clicked the + overrides … link. Note: for this specific control, not editing the WEBDEV style at this point.

Scrolled the State selection over to Input not empty

And choses the border tab

And now we see that they are all set to None, meaning no border line, which is exactly what is happening to us. I feel this is a bug, if there are overrides for the individual sides, then the display for the entire border should reflect that somehow, and if all 4 sides have the same override, then the display for the entire border should match. However, I do not know if PCSOFT considers this a bug or feature. BTW also note that the number of overrides for this state is showing 4, which is our 4 overrides for Line for each side.

I changed all 4 to <Undefined> and the state no longer showed any overrides. But even more importantly the control now showed correctly in the browser!

BTW, I noticed there were other states with this same issue and fixed them as well. This was a converted project and I am wondering if these type of style override issues on converted projects isn’t the cause of some of the v25/26 upgrade issues a few folks have had with specific controls?

We are done quite yet. Remember at this point I have only applied my changes to the Card Holder Name control. If we go back into the control’s style tab, we will see it now shows 10 overrides for the base style (Style1).

We want those overrides to be applied to all of the controls using Style1, So we choose Update style in the project and press the Update Button

• WEBDEV