friendsofcake / bootstrap-ui Goto Github PK
View Code? Open in Web Editor NEWCakePHP: Transparently use Bootstrap
License: MIT License
CakePHP: Transparently use Bootstrap
License: MIT License
Let's discuss first before I create a PR for that. Any inputContainer
gets an additional class {{type}}
as you can see here: https://github.com/FriendsOfCake/bootstrap-ui/blob/master/src/View/Helper/FormHelper.php#L61
Bootstrap doesn't require this class, so I think it shouldn't be a part of the BootstrapUI plugin. The additional class makes it more complicate to include libraries like https://github.com/flatlogic/awesome-bootstrap-checkbox.
With additional {{type}}
class:
Without additional {{type}}
class:
For sure I need to override the RadioWidget from BootstrapUI anyways to get this working and sure I can also override the inputContainer
template but it wouldn't be necessary if we stick to the Bootstrap conventions what the idea of the plugin is I think.
I try dashboard theme in my app. But pagination design like below. (Out of alignment)
Is this my mistake or default design? I use default dashboard theme and default baked template.
My index.ctp
code is below.
<div class="paginator">
<ul class="pagination">
<?= $this->Paginator->prev('< ' . __('previous')) ?>
<?= $this->Paginator->numbers() ?>
<?= $this->Paginator->next(__('next') . ' >') ?>
</ul>
<p><?= $this->Paginator->counter() ?></p>
</div>
Chrome, firefox, safari are same.
As per in the read-me, I download the plugin using composer and loaded the plugin using Plugin::load('BootstrapUI');
As soon as I add the following lines in AppView.php,
$this->loadHelper('Html', ['className' => 'BootstrapUI.Html']);
$this->loadHelper('Form', ['className' => 'BootstrapUI.Form']);
$this->loadHelper('Flash', ['className' => 'BootstrapUI.Flash']);
$this->loadHelper('Paginator', ['className' => 'BootstrapUI.Paginator']);
it throws the error Helper Class xxxxx could not be found
Latest Version : Cakephp & Bootstrap-UI.
I have a test case:
public function testCustomGridMerge()
{
$config = [
'align' => 'horizontal',
'grid' => [
'md' => [
'left' => 1,
'middle' => 10,
'right' => 1
],
'lg' => [
'left' => 2,
'middle' => 8,
'right' => 2
],
],
];
$this->Form->config($config);
debug($this->Form->config());
$this->Form->create($this->article);
$result = $this->Form->input('title');
debug($result);
}
The result is
'grid' => [
'left' => (int) 2,
'middle' => (int) 6,
'right' => (int) 4,
'md' => [
'left' => (int) 1,
'middle' => (int) 10,
'right' => (int) 1
],
'lg' => [
'left' => (int) 2,
'middle' => (int) 8,
'right' => (int) 2
]
],
It always looks first for left/middle/right to be present though...
My idea was to do sth like
public function config($key = null, $value = null, $merge = true) {
if ($key === 'grid') {
$merge = false;
}
return parent::config($key, $value, $merge);
}
but that resulting in larger cakephp internal issues.
So for right now I extend and hack around this issue on project level.
To fix this we should either not allow merging for this key, or change the logic to first look for the specific grid keys, then for the size type (less efficient).
http://getbootstrap.com/css/#forms-inline
Looks like generating class="form-horizontal"
should in fact be class="form-inline"
for Bootstrap 3.
As there is a repo for it on Packagist.
https://packagist.org/packages/twbs/bootstrap
Should the plugin either require
it, or suggest
it and provide a shell task to symlink the resources into the webroot/css
folder?
Hello,
it seems to me that the Form-Element 'textarea' is not implemented!?
Regards,
cls
hi, it would be great if this package used twitter/bootstrap from composer and connected to the styles provided by this package (if possible). thanks. dan
So this folder structure is mainly for the files on the plugin users end in the cake webroot folder. Actual file names are inaccurate. The current file structure doesn't allow fonts to work automatically in this bootstrap plug in. CSS code within bootstrap would have to be changed for it to work.
The current folder structure is:
webroot:
css:
bootstrap:
thecssfile.css
js:
bootstrap:
thebootstrap.js
jquery:
jquery.js
A new proposed file structure is:
webroot:
bootstrap:
css:
cssfiles
js:
javascripts
jquery:
jquery
fonts:
fonts
However I realized this problem: people might want to use the bootstrap folder for other things, ex a wordpress blog or something along those lines. If this is an issue then I can see why a file structure like this shouldn't be used/encouraged.
Another possible solution is to just tell them to throw their assets with the others in the webroot folder, IE putting all bootstrap js files in webroot/js rather than throwing files in bootstrap directories, and changing the default template accordingly. I will attach a pull request with the first proposed solution.
Error: Unsupported operand types vendor\friendsofcake\bootstrap-ui\src\View\Helper\FlashHelper.php
I think the 3.1 flash messages have more nesting and therefore break with the current bootstrap plugin.
Radio buttons are not displayed correctly with horizontal layout.
Example:
$this->Form->create($user, ['align' => [
'sm' => [
'left' => 6,
'middle' => 6,
'right' => 12
],
'md' => [
'left' => 4,
'middle' => 4,
'right' => 4
]
]]);
echo $this->Form->input('group_id', ['type' => 'radio', 'options' => ['Admin', 'User']]);
Produces this code:
<div class="form-group">
<div class="col-sm-offset-6 col-md-offset-4 col-sm-6 col-md-4">
<div class="radio">
<label class="control-label col-sm-6 col-md-4">Group</label>
</div>
</div>
</div>
Running the same code with bootstrap-ui form helper disabled will produce the correct HTML:
public $helpers = [
'Html' => ['className' => 'BootstrapUI.Html'],
//'Form' => ['className' => 'BootstrapUI.Form'],
'Flash' => ['className' => 'BootstrapUI.Flash'],
'Paginator' => ['className' => 'BootstrapUI.Paginator'],
];
<div class="input radio">
<label>Group</label><input type="hidden" name="group_id" value="">
<label for="group-id-0">
<input type="radio" name="group_id" value="0" id="group-id-0">Admin
</label>
<label for="group-id-1">
<input type="radio" name="group_id" value="1" id="group-id-1">User
</label>
</div>
Is there a way to get bootstrap-ui to render radio buttons correctly within horizontal layouts?
I have improved this file in my project ,using a table of two columns to show the keys and values of the item.
I wonder if you are interesting in making a PR of this.
With 3.1 having been released now and the last official release is 42 commits behind master, it seems logical to push a new release.
Using 0.3.1
with Cake 3.1 causes a Fatal in the FlashHelper.
Using dev-master
works, but I'd rather use a release as this repo has no develop
branch, so I can't be guarantee that master
is stable.
Hello!
If there are more than one errors on an input field, FormHelper
puts <ul>
inside <p>
which is not valid html5 code. This leads to ugly and problematic thinks like Chrome closing the <p>
tag automatically before the list and adding another <p></p>
after the list like this:
<p class="help-block"></p>
<ul>
<li>This field is required</li>
<li>Please provide an email address!</li>
</ul>
<p></p>
I suggest to replace <p>
with <div>
in $_templates = ['error']
in FormHelper.php
:
<div class="help-block">
<ul>
<li>This field is required</li>
<li>Please provide an email address!</li>
</ul>
</div>
Bootstrap only defines .help-block
so this change should not break anything.
Same applies to help
template.
Bernhard
What's best way to extend the included FormHelper templates? For instance if I wanted to add a custom dateFormGroup and dateWidget.
I realize I can handle like this at view level, but I'd prefer to change app wide:
$templates = [
'dateFormGroup' => '{{label}}<div class="col-md-8"><div class="input-group date">{{input}}{{error}}{{help}}</div></div>',
'dateWidget' => '<input type="text" class="form-control" name="{{name}}" {{attrs}} /><span class="input-group-addon"><span class="fa fa-calendar"></span></span>'
];
$this->Form->templates($templates);
Form->input('Name', ['type' => 'submit'])
outputs a label, probably leaking through after changing the templates behind it.
We can default the label to false here probably.
We should focus on opening a new branch to prepare for the future:
Details can be seen here: http://v4-alpha.getbootstrap.com/migration/#forms
Bootstrap 4 failing with this plug in can be demoed here:
http://sandbox3.dereuromark.de/sandbox/bootstrap
In the Demo none of the bootstrap 4 js is included as of currently. The minified bootstrap css is however included and can be seen to not work with current plug in since bootstrap decided to change some class names.
I just started testing and I think it would be nice if the default layout has some sort of condition that, when set, downloads the default css and js from cdn.
This way new users can quickly get up and running with nice visuals without manually having to setup these assets first.
If this sounds reasonable I will create a PR, suggestion on where to set the option would be appreciated.
Is there a way to hide the close button in alerts? It would be nice if there was a way to hide this in all alerts.
This is a (multiple allowed):
Installed the bootstrap-ui in a project using cells.
Cells should render forms and other elements.
Cells were rendered with contents from BootstrapUI.default
The UIViewTrait forces layout usage
if (empty($this->layout) || $this->layout === 'default') {
$this->layout = 'BootstrapUI.default';
}
I think the problem is that empty($this->layout)
is greedy. When cells are rendered the CakePHP framework assigns $this->layout = false
but then bootstrap-ui sets the layout anyway.
Loading a template config file (e.g. config/search_templates.php
) is currently broken in 0.3.0:
echo $this->Form->create(null, ['type' => 'get', 'class' => 'search', 'templates' => 'search_templates']);
results in
Error: Unsupported operand types
File /var/www/html/vendor/friendsofcake/bootstrap-ui/src/View/Helper/FormHelper.php
Line: 367
Temporary work-around is to load the template file after create with
$this->Form->templates('search_templates');
This may be the best course of action to fix the problem.
I suggest to remove the lines:
if (empty($this->layout) || $this->layout === 'default') {
$this->layout = 'BootstrapUI.default';
}
from initializeUI()
in the UIViewTrait
, because doing so you kind of force the user to create another template name and set it into its own AppView
.
Or change the method to support some args and then enable, like:
public function initializeUI(array $args)
{
if ($args['useBsLayout'] && (empty($this->layout) || $this->layout === 'default')) {
$this->layout = 'BootstrapUI.default';
}
}
and inside your AppView you pass what you need: $this->initializeUI(['useBsLayout' => true]);
.
=)
I just noticed the packagist version is pointing at an outdated version. Could it be the update hook is not active?
I need to inject attributes to the input container, but the template looks like it won't allow me to do that.
'inputContainer' => '<div class="form-group{{required}}">{{content}}{{help}}</div>',
It would be really nice to be able to inject any kind of attributes to any element. Maybe there is a workaround for that? If I could at least do something like in Cake2 'div' => false
it would allow me to manually wrap the input.
The background is that I need to modify plenty of the markup to use Angular JS directives.
What I'd like to be able to generate
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
<span id="inputGroupSuccess4Status" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
Use-case
The use-case that I have here is that I would like to create a monetary input field with help text, and prefix the input with the currency to make the user realise that I'm looking for a float.
When loading helpers in View\AppView I get the following error:
Fatal error: [Cake\View\Exception\MissingHelperException] Helper class HtmlHelper could not be found
The baked Template has tb_sidebar
area, But BootstrapUI has no $this->start('tb_sidebar');
. So we must add this own. And we must add css for this parts.
Should you add this to default ?
Please think this problem.
When we set align property in form create, by default textbox and textarea width depends on that property value. Is it possible to set different width for different textbox and textarea for same form?
Hi, I'm new to CakePHP. I've followed the instructions, but I don't have the proper layout. I've copied the layouts from your examples folder and transferred them to src/Template/Layout/TwitterBootstrap, and extended a view to try it out but the layout did not change. I also tried to replace CakePHP's ../Layout/default.ctp with bootstrap-ui's default.ctp and still nothing. What am I missing?
Edit: also when I inspect element, it looks right, as it uses the bootstrap's style sheet and script, along with Jquery's.
As requested. Please consider implementing these additions so generated forms will support validation feedback out-of-the-box.
To add optional feedback icons support the "has-feedback" class has to be added to (only the) textual input elements with class "form-control".
HTML example from the Bootstrap 3 page:
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
Working CakePHP generated example:
<div class="form-group has-error has-feedback">
<label class="control-label" for="url">Url</label>
<input name="url" required="required" id="url" class="form-control" type="text">
<span class="fa fa-times form-control-feedback" aria-hidden="true"></span>
</div>
Produces something like this:
please note: that checkbox should not have the "has-feedback" class.
The horizontal form needs a slightly different layout, as shown in the Bootstrap code below:
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
Currently generated CakePHP code:
<div class="form-group has-feedback has-error">
<label class="control-label col-md-2" for="url">Url</label>
<div class="col-md-10">
<input name="url" required="required" id="url" class="form-control" type="text">
</div>
<span class="fa fa-times form-control-feedback" aria-hidden="true"></span>
</div>
Now produces something like:
In the images above the Bootstrap "help-block" span element is used to display the validation messages. I think adding an empty span by default would be a nice addition too (so they only have to be filled using JS, not created).
Working CakePHP generated example:
<div class="form-group has-error has-feedback">
<label class="control-label" for="url">Url</label>
<input name="url" required="required" id="url" class="form-control" type="text">
<span class="fa fa-times form-control-feedback" aria-hidden="true"></span>
<span class="help-block">
<ul class="list-unstyled">
<li>A minimum of 10 characters is required</li>
<li>A valid email address is required</li>
</ul>
</span>
</div>
Currently generated Cake code::
<div class="form-group has-feedback has-error">
<label class="control-label col-md-2" for="url">Url</label>
<div class="col-md-10">
<input name="url" required="required" id="url" class="form-control" type="text">
</div>
<span class="fa fa-times form-control-feedback" aria-hidden="true"></span>
<span class="help-block">
<ul class="list-unstyled">
<li>A minimum of 10 characters is required</li>
<li>A valid email address is required</li>
</ul>
</span>
</div>
The horizontal checkbox is not generated as shown on the Bootstrap pages.
This could be due to the generated html but.... somehow removing the form-control class also seems to solve the issue.
Bootstrap example code:
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
Currently generated Cake code:
<div class="form-group has-feedback">
<div class="col-md-offset-2 col-md-10">
<input name="force" value="0" type="hidden">
<label for="force">
<input name="force" value="1" id="force" class="form-control" type="checkbox">Force
</label>
</div>
</div>
When using $this->Form->input('admin')
I get the following HTML output:
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="hidden" name="admin" value="0">
<label for="admin">
<input type="checkbox" name="admin" value="1" id="admin" class="form-control">
Admin
</label>
</div>
</div>
When I should be getting:
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
<label>
<input type="hidden" name="admin" value="0"><input type="checkbox" name="admin" value="1"> Admin
</label>
</div>
</div>
</div>
The following code <?= $this->Form->button('Signup', ['class' => 'success'])?>
would produce the following HTML, <button class="btn-success btn" type="submit">Signup</button>
. This is expected.
But the following code <?= $this->Form->button('Signup', ['class' => 'primary'])?>
would produce the following HTML, <button class="primary btn" type="submit">Signup</button>
. This is not expected in my opinion, rather we should see the css class btn-primary
added as btn-success
was added above.
It seems adding 'primary' to $_styles
in the ButtonWidget would correct this issue, and would give the expected behavior, and allow consistent use of the button widget, and allow the use of standard classes for buttons with Bootstrap.
I use composer update my composer.json for bootstrap-ui. example:
"require": {
"php": ">=5.4.16",
"cakephp/cakephp": "~3.0",
"mobiledetect/mobiledetectlib": "2.*",
"cakephp/migrations": "~1.0",
"cakephp/plugin-installer": "*",
"gregwar/captcha": "1.*",
"friendsofcake/bootstrap-ui":"~0.3"
},
class AppView extends View
{
/**
* Initialization hook method.
*
* For e.g. use this method to load a helper for all views:
* `$this->loadHelper('Html');`
*
* @return void
*/
public function initialize()
{
$this->loadHelper('Html', ['className' => 'BootstrapUI.Html']);
$this->loadHelper('Form', ['className' => 'BootstrapUI.Form']);
$this->loadHelper('Flash', ['className' => 'BootstrapUI.Flash']);
$this->loadHelper('Paginator', ['className' => 'BootstrapUI.Paginator']);
}
}
update success,but in HomeController , write
$this->Flash->success('ok!')
BootstrapUI.Element\Flash\default.ctp
Cake\View\Exception\MissingElementException
is it a bug?
When I call:
echo $this->Form->input('some.thing', [
'options' => $input_options,
'class' => 'testclass'
]);
Opening tag looks like this, which confuses at least some browsers (chrome):
<select class="form-control" name="some[thing]" class="testclass form-control">
And I think that it should look like this:
<select name="some[thing]" class="testclass form-control">
I think that problem is in select
template as StringTemplate::_compiled['select']
contains following:
See View/Helper/FormHelper.php#L39
<select class="form-control" name="%s"%s>%s</select>
And data attrs contains:
class="testclass form-control"
Well, the title says it all. :)
When using bake with the provided templates, in the resulting templates the forms generated via FormHelper::postLink()
are duplicated for usage in the navbar and the sidebar? These forms rely on a unique ID to be successfully posted, which doesn't work any more:
Uncaught TypeError: document.post_569e5bd99a06c486556933.submit is not a function
It would be nice if you would provide a working default here. The obvious solution would be to simply duplicate the content for the sidebar instead of reassigning them, but this produces a lot of unneeded boilerplate. Maybe there's an even more elegant solution?
Bootstrap-UI is working flawlessly with me, except when I use ajax, for instance Ajax Pagination.
Why am I saying this? Because if I set a paginator template it will work when the page is first rendered, but in the following ones I get the default template. The same happens with BootstrapUI.Form
(if there are forms inside the pagination).
I noticed that the ajax is ignoring the $this->loadHelper();
instanced in AppView::initialize()
.
But if I manually set public $helpers
into the AppController
they will load. So seems that it is not merging into the default configuration, or am I missing something?
I know that this is a CakePHP 3 related question, not a Bootstrap-UI but since I think that other users may also have the same question.
Later I will add the answer to the main CakePHP 3 Docs.
I created a CakePHP 3 project and use this plugin to replace UI with Bootstrap for official Blog tutorial .
https://github.com/hantsy/cakephp3-sample
But the the relations Article->Category does not work as expected.
The help block for error messages should be within the input column div tag when generated for horizontal forms.
The currently generated code looks like this:
<div class="form-group required has-error">
<label class="control-label col-md-2" for="field">Field</label>
<div class="col-md-10">
<div class="input-group">
<input type="number" name="field" required="required" id="field" class="form-control " value="">
</div>
</div>
<p class="help-block">Error message</p>
</div>
It should be like this:
<div class="form-group required has-error">
<label class="control-label col-md-2" for="field">Field</label>
<div class="col-md-10">
<div class="input-group">
<input type="number" name="field" required="required" id="field" class="form-control " value="">
</div>
<p class="help-block">Error message</p>
</div>
</div>
#31 makes the default date(time) work in Cake just fine.
But in general, we should have the option to switch to a text field with datepicker support, e.g. using http://eonasdan.github.io/bootstrap-datetimepicker/
This could be done using a custom datetime widget, I guess, which then just requires the necessary JS files to be included (manually) to work.
Settings for localization and stuff will need to be optionized somehow, though.
I have an Error when i pass to cake 3.1
Error: Unsupported operand types
File /var/www/timesheets/vendor/friendsofcake/bootstrap-ui/src/View/Helper/FlashHelper.php
Line: 55
I've updated my composer today and got these versions:
- Updating cakephp/cakephp dev-master (1014b09 => 3a3de18)
Checking out 3a3de18ca3ed7da0fe16daeee186281e7c033309
- Updating friendsofcake/bootstrap-ui dev-master (7cc5142 => 3c87f0f)
Checking out 3c87f0f9e187a6c93b584e6ca13e37e2537c974b
I've started getting a fatal error line 55 from the FlashHelper then: unsupported opperand type line 55
The line in question is this:
$flash['params'] += $this->_config;
I've started debugging this and found out that $flash is now an array of flash messages. I'm not sure how to fix it properly. My guess is that a foreach is needed and the config needs to be merged for reach of the flashes?
The symlinks ( https://github.com/FriendsOfCake/bootstrap-ui/tree/master/src/Template/Element/Flash ) should be resolved using elements.
Otherwise this will break on WIN plattforms.
I can't use BootstrapUI FlashHelper along with Crud flash messages.
Maybe is more an issue of Crud plugin, but with this change plugin should work out of the oven after installing them with composer.
if (is_array($flash['params']['class'])) {
$flash['params']['class'][] = 'alert-' . $class;
}
if (is_array($flash['params']['class'])) {
$flash['params']['class'][] = 'alert-' . $class;
} else {
$flash['params']['class'] = 'alert alert-' . $class;
}
I'm just following the instructions in the section 'A quick way of getting the Bootstrap assets installed is using bower.'. I've made a little script from the given code and run it, but quickly noticed that the glyphicons fonts are 404ing. The script makes no note of them (and adding in a line to copy them over is trivial), but I notice that the path given to the fonts in Chrome's Developer Tools is as follows:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://192.168.0.100/cakephp3/css/fonts/glyphicons-halflings-regular.woff
(...and the same for the other two font files.)
It's looking for the fonts in the wrong place, as the path is hard-coded in the bootstrap.css
file:
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
...
}
I don't have a solution to this at the moment but thought I had better report it.
The following code generates a warning:
echo $this->Form->input('field', ['append' => '%']);
This is the warning:
Warning (2): vsprintf(): Too few arguments [CORE\src\View\StringTemplate.php, line 216]
Possible solution: Escape % characters before passing strings to vsprintf()
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.