NT 7.14 NetWebBrowse XHTML options

[Rob Kolanko]

In my applications, I have a few NetWebBrowse  procedures that are not in NetWebForms. In order that these pages match in appearance of a form that has shading of a tab around the browse, I have added XHTML code in the  NetWebBrowse template.  The XHTML code routines are as follows:

Routine Name: TabShadingStart
Location: After Heading
XHTML:  <div class="nt-tab-inner nt-rounded">

Routine Name:  TabShadingEnd
Location : Before </form>
XHTML: </div>

I know up to NT7.06 this code worked fine in giving a tab shading around the browse and the update and  navigation buttons. In NT 7.14 this XHTML prevents the browse from working. Pressing on any navigation button results in XHTML error (via Firefly) :
mismatched tag. Expected: </ajax-response>.
   </div>

Now, if I delete  the “TabShadingEnd” routine, the form will work again except that the end of the shading goes through the Navigation buttons on the bottom. This does not make sense to me unless the default browse form has an extraneous “</div>” tag?

The above can be duplicated by adding the above XHTML on the Web1 example. 

Rob

[Bruce]

Hi Rob,

yeah, the idea of putting some html in one point which is a "start" of some block, and then the end somewhere else, is one that will break more and more as firstly the code refactors, but also as the browse updates and so on are optimized. It's also the bit that will break first when the "mode" (like page, content-body or popup) changes.

In many respects it's like an OMIT in one clarion embed, and an EndOfOmit in another - it does depend on a number of things remaining static (and was one of the problem areas when moving from Legacy to ABC).

So I'm probably leaning away from this as being a useful technique, and more towards finding alternate ways to solve the root problem.

I tried playing with the Example 1, and your code a bit, but didn't get it quite match a "browse embedded on a form". Perhaps the best approach is if you could paste a screen-shot of the look you are going for, as well as perhaps a screen-shot of where you do have a browse on a form - and hence is the effect you are trying to mimic. There may be other ways to achieve what you are after.

Cheers
Bruce

[Rob Kolanko]

Hi Bruce,
Attached is an example of browse procedure in NT7.06 where the XHTML code put a box of shading around the content of the page. It just looks better than boxes of content on blank background. The blank background is necessary if browse procedure is embedded in a form. But if there is no need to use a form, why include all the overhead? 
I was also wrong about the page working if I delete  the “TabShadingEnd” routine in NT.7.14. Firefox is the only browser that works, but this solution was bad form anyway.

Rob

[attachment deleted by admin]

[Bruce]

Hi Rob,

So just to clarify - this is a Form, which has the background set, and hence the browse also has the background set.
And what you'd like is that when a browse is called "by itself" (ie not on a form) it has a similar look?

I notice in the form, the form heading is outside the background area. Is this a requirement for the browse by itself as well?

Cheers
Bruce

[Rob Kolanko]

Hi Bruce,
No, there is just one NetWebBrowse procedure in the picture, no Form. Sorry, I should have shown a less complicated screen as example. The Predefined Events table is just static xHTML added after the heading, forget about it. I used to be able to do was add xHTML:
<div class="nt-tab-inner nt-rounded">
which gave the shaded area in the same theme fill colour as a tab from the heading to the end of the form where I added
</div>
No NetWebForm was used, it just looks like the browse is in a form. The shaded area is "called out" on the attached image. The xHTML code was added via the XHTML tab in the NetWebBrowse template.   This xHTML code will however crashes the web page in NT7.14.

Thanks
Rob

[attachment deleted by admin]

[Bruce]

Ok, here are a couple approaches;

a) this is the simplest - assign a style to the "procedure div" for the browse. In the attached pic A1 I made a custom style

.browse-back {
    background-color: #FFECA3;
    padding: 20px;
}

The padding is somewhat exaggerated here for effect. This is different from yours though because the heading is included. One solution to that is to set the background of the header explicitly;

.nt-browse-header {
    background: #EBF1FB;
    padding-bottom: 10px;
    padding-top: 10px;
}

Using the name above (in your custom.css file) overrides _all_ the browses headers in the program. (might not be what you want) but obviously you can create a custom style as well if you prefer.

Given our last conversation of the button positions, I decided to show that as well;
a) Break After Last button set off.

b) css style for Update Button Set set to
'nt-left'

c) and then just because I could, I showed embed footer cells having the same background as well;
that with the following in the custom.css file;
.browse-back {
    background-color: #FFECA3;
    padding: 3px;
}
.nt-browse-table-footer-empty{
   background-color: #FFECA3;
}
.nt-browse-header {
    background: #FFFFFF;
    padding-bottom: 3px;
    padding-top: 3px;
}
results in the pic A3.

I've attached the final app, and custom.css so you can play around with it as well.



[attachment deleted by admin]