1

I am trying out bootsfaces 1.0.1 (https://www.bootsfaces.net) in a primefaces 5.3 project.

It works well but the problem is if i add even a single element in a page, the page gets distorted (squeezed)

See original screen without a bootsfaces element.

Page without bootsface input text

Then here is how the page looks after adding just a text box using <b:inputText placeholder="Type something here..." value=""/>

page with a input text, note it's smaller and squeezed to the left

How do i solve this issue?

UPDATE

I have Established that this is not a bootsfaces problem. It will happen the moment you just add bootstrap css. Both bootstrap 2 and 3 even without having any bootstrap element on the page.

Stephan Rauh
  • 3,069
  • 2
  • 18
  • 37
Tom Mwenda
  • 155
  • 3
  • 16
  • Most likely related: http://stackoverflow.com/questions/28183661/using-primefaces-with-bootstrap-causes-changes-in-padding-sizing-borders – Kukeltje Dec 21 '16 at 09:35
  • I had the theme set to "bootstrap", but changing to some other theme doesn't help. – Tom Mwenda Dec 21 '16 at 09:50
  • The bootstrap THEME in PrimeFaces is not the problem, bootsfaces containing the bootstrap css is causing the problems (imo) – Kukeltje Dec 21 '16 at 10:15
  • Your edit is exactly where the link I posted is about. So effectively this question is a duplicate – Kukeltje Dec 21 '16 at 10:17
  • I just wanted bootfaces for its components. Eg already styled inputs. I will find an alternative. – Tom Mwenda Dec 21 '16 at 10:24
  • PF has a premium theme that should be compatible with the bootstrap css. Search for that. Might be a 'cheap' solution – Kukeltje Dec 21 '16 at 10:26
  • Sorry, I was wrong, that is a a change in PrimeNG, not PrimeFaces – Kukeltje Dec 21 '16 at 10:43
  • @TomMwenda I suggest you open a bug ticket at the PrimeFaces bug tracker (https://github.com/primefaces/primefaces/issues). You're not the only person trying to combine Bootstrap with PrimeFaces. Maybe the PrimeFaces team is going to work on the topic once they see that many people are stuck with the CSS incompatibility. – Stephan Rauh Dec 21 '16 at 18:58
  • Thank you Stephan for your response. I will open one if none already exists – Tom Mwenda Dec 22 '16 at 09:53
  • @Kukeltje Thank you for your help, but i would not opt for spending on a premium theme just for getting nicely styled inputs. I will hope that primefaces team will make the framework more friendly with bootstrap – Tom Mwenda Dec 22 '16 at 09:56
  • It was not a change in the theme, it was a change in PrimeNG, not in PrimeFaces. If you file an issue to have them make the changes in PrimeFaces too, they might consider it for PF 7 maybe. And the themes costs are very low, way lower than you (and us!!!) spending lots of time on fixing things like this. – Kukeltje Dec 22 '16 at 09:59
  • You're right, the prices are very low, but still, sometimes even such a low price in unaffordable. Just think of students - even in rich countries they usually don't have much money. Or think of employees who don't have a budget of their own. Having to pay for something just to evaluate it is often a show-stopper. – Stephan Rauh Dec 23 '16 at 09:25

1 Answers1

2

Update Dec 27,2016: I've written an article and created a project on GitHub in order to solve the problem. The first results look encouraging. Basically, you only need to include the CSS file resetBSToPF.css add insert the CSS style class "pf" to some of the PrimeFaces components in order to use both BootsFaces and PrimeFaces in the same project. Most CSS rules defined in the file work recursively, so that shouldn't be much of a problem.

Currently, the CSS file is merely a sketch covering some important use cases, but I suppose there's still a lot to be done. Let's make this a community effort! I'm sure this solves the incompatibility quickly.

My old answer: People often report that it's difficult to combine PrimeFaces and BootsFaces (or Bootstrap in general). However, I think there are a few PrimeFaces components that are more problematic than others. The datatable seems to be one of them. You could try to replaces the PrimeFaces datatable by the BootsFaces datatable. The PrimeFaces datatable is much more powerful, but in most cases, you don't need the advanced features. You still need to override some of the CSS, but hopefully that's not too difficult.

By the way, this Portuguese article explains why Bootstrap and PrimeFaces are incompatible, although it doesn't explain how to solve the issue.

Stephan Rauh
  • 3,069
  • 2
  • 18
  • 37
  • 1
    The duplicate I referred to explains it in lesser words why they are incompatible to ;-) If OP specifically states he/she wants to use the styled inputs, I'd say the PrimeFaces bootstrap theme comes close enough. And regarding using the BootsFaces datatable (I could say I agree, but I won't. If on one place you need the advanced features (and that chance is high), you'll get inconsistencies. What I'd do is for the components that fail, override the `box-sizing` and switch it back to `border-box` – Kukeltje Dec 22 '16 at 08:30
  • Probably the best strategy is to use BootsFaces for the bread-and-butter-components, and PrimeFaces for the advanced components, such as the charts. That way, you only need to correct a few CSS rules. But of course, that's not what Tom wants to do. The incompatibility is annoying - we designed BootsFaces specifically to be a companion framework of PrimeFaces. – Stephan Rauh Dec 23 '16 at 12:23
  • Compliments for the css effort! – Kukeltje Dec 27 '16 at 13:10
  • I am going to test this solution today. Thank you for the effort @StephanRauh – Tom Mwenda Jan 05 '17 at 06:34