External CSS error

[azaleas]

I'm trying to use Bootstrap CSS on my project. Whenever I add a class I get this error on WYSIWYG window:

This page cannot be displayed due to an unexpected error, or invalid content.
It may display if you undo your last action.


But, when I run the form it shows the project and that the class is added successfully.

[Jon]

It usually means that there is a syntax error somewhere on the page and the parser in the page editor can't handle it. The page editor uses XHTML and all tags have to be correctly closed. At runtime you are probably using HTML instead of XHTML (this choice is configured in Form Properties), but browsers are generally more forgiving.

You should check the syntax of whatever is being introduced when this error occurs. You might use the browser tools to do this.

[alexmcclune]

Hi,

I've had the same trouble as well - I was advised that you could use the Custom Layout with Velocity...unfortunately I haven't had a chance to try it yet.

I did see the Bootstrap working when I ran the forms, everything worked as expected but obviously it isn't displayed in the designer.

[kotinkarwak]

v5.0.0
The error message shown on adding of the css script bootstrap.min.js adding to form or via template both options show error.

Checked through the html tags and look ok.

Very basic project file with all local resources
https://mega.nz/#!qQxHBJBb

UPDATE: noted that the CSS file can be added but the mentioned situation only happens when a class is added to a control that would be derived from the CSS file I.e 'row'

[Jon]

Where are you adding the row class, to which control, where is it configured? Do you have the exception that is causing the problem - this may be shown in the console window if you start the designer with start_ebase_designer.bat or alternatively in UfsClient/logs/ebase-designer.log.

In both V4 and V5, Ebase Xi uses a software component called Flying Saucer to render the WYSIWYG page view, and there are a number of problems with this which can give the sort of problems you are describing. We will be replacing this in the near future.

[kotinkarwak]

Class added to a form control

[Jon]

There is no form control in Ebase. Can you clarify please.

[kotinkarwak]

Sorry, meant frame control.

[Jon]

We don't have one of those either! By "control" I mean one of the items that you drag from the Palette View onto a page.

[kotinkarwak]

panel container, changed id in html Element properties

[AJDulk]

The error with Bootstrap is caused by their clearfix.

Their version is as follows:

Code: Select all

// Clearfix
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/

.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

I have replaced it with the following and this works:

Code: Select all

// Clearfix
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
//
// Source: http://cssmojo.com/the-very-latest-clearfix-reloaded/

.clearfix() {
  &:after {
    visibility: hidden;
    content: " "; // 1
    display: block;
    height: 0;
    clear: both;
  }
}

BTW: This is found in the "clearfix.less" file from "bootstrap-3.3.7\less\mixins" in the self compilable bootstrap download.