Search code examples
csstwitter-bootstrapxformsxsltforms

XLSTForms with twitter bootstrap css


I am experimenting with XForms and I use the XSLTForms implementation.

I have troubles running the page with a link to bootstrap.css. I read that XSLTForms needs the CSS file to be a valid XML file in order to get parsed. So I have included a <css> ... </css> root tag enclosed with <![CDATA[ ]]> But still the page does not load at all.

I also included processing instructions for css conversion and debugging, but it does not work either:

<?xsltforms-options debug="yes"?>
<?css-conversion no?>

What I ultimately would like to achieve, for example, is to use bootstrap's responsive style rules and customize input controls and form elements.

What would you recommend me to do? Has anyone done something like this (I couldn't find).

UPDATE:

Even when I used the processing instruction <?css-conversion no?>, my css file was still not loading. Turned out that you need to explicitly close the link tag for the css file. So, it has to be like that:

<link type="text/css" href="myStyle.css" rel="stylesheet"></link>


Solution

  • When you use <?css-conversion no?> the external CSS files are not required to be valid XML files (and is better this way).

    XSLTForms uses a set of CSS rules that makes it not directly compatible with Bootstrap. You'll need to read the guidelines first: https://en.wikibooks.org/wiki/XSLTForms/CSS and use you browser Inspector tool a lot.

    Take a look to http://fhirforms.com/ to see an already running example of XSLTForms+Bootstrap