DatePicker widget brakes bootstrap's css - php

Now I am building my first project on Yii2. One page has a datepicker field, it's works ok but that feature is braking up my css styles especially on this page. How can I repair?
It's mine form:
<?= $form->field($model, 'first_date')->widget(kartik\date\DatePicker::className(), ['pluginOptions' => ['format' => 'yyyy-mm-dd','todayHighlight' => true,'startDate' => 'today','autoclose' => true];])?>
I've tried to add Asset but it isn't help.
class DatepickerAsset extends AssetBundle{
public $sourcePath = '#bower/bootstrap-datepicker/dist';
public $js = ['js/bootstrap-datepicker.min.js'];
public $css = ['css/bootstrap-datepicker.min.css'];}
What is wrong?
May be I have to add some options in config/web.php ? Something like that:'view' => ['theme' => ['class' =>yii\base\Theme::className(), 'basePath' => ]]
braked fonts
good view
Development console:

I've found css file which hides main css and refactor that.

Related

Translation parameters for menu items using KnpMenuBundle and Symfony3

Introduction
In my personal project I am using:
XAMPP with PHP v7.1.6
Symfony v3.3.6
KnpMnenuBundle dev-master / 2.2.x-dev [link 1], [link 2], [link 3] in order to manage Menus.
Bootstrap v3.3.7
Bootstrap and KnpMenuBundle integration [link 4]
Setting up
To setup i used documentation in [2], [3] and code samples [4]. My menu is working, integration between Bootstrap and KnpMenuBundle also works.
At the moment
Menu bundle works fine, simple translating works and integration works too.
My ProfileMenu code sample:
public function profileMenu(array $options)
{
$menu = $this->factory->createItem('root');
$menu->setChildrenAttribute('class', 'nav navbar-nav navbar-right');
$menu->addChild('Profile', array('label' => 'menu.profile'))
->setExtras(array('dropdown' => true, 'icon' => 'fa fa-user'))
->setLinkAttribute('class', "dropdown-toggle")
->setLinkAttribute('data-toggle', "dropdown")
->setExtra('translation_domain', 'menu');
$menu['Profile']->setChildrenAttribute("class", "dropdown-menu")
->addChild('Logged in as', array('label' => 'layout.logged_in_as'))
->setExtra('divider_append', true)
->setExtra('translation_domain', 'FOSUserBundle');
$menu['Profile']->setChildrenAttribute("class", "dropdown-menu")
->addChild('My data', array('label' => 'menu.profile.myData', 'route' => 'fos_user_profile_show'))
->setExtra('translation_domain', 'menu');
$menu['Profile']->setChildrenAttribute("class", "dropdown-menu")
->addChild('Edit data', array('label' => 'menu.profile.editMyData', 'route' => 'fos_user_profile_edit'))
->setExtra('translation_domain', 'menu');
$menu['Profile']->setChildrenAttribute("class", "dropdown-menu")
->addChild('Change password', array('label' => 'menu.profile.changePassword', 'route' => 'fos_user_change_password'))
->setExtra('translation_domain', 'menu');
$menu['Profile']->setChildrenAttribute("class", "dropdown-menu")
->addChild('Exit', array('label' => 'menu.profile.logout', 'route' => 'fos_user_security_logout'))
->setExtra('divider_prepend', true)
->setExtra('translation_domain', 'menu');
return $menu;
}
menu rendering is shown in following image
Question
How can i pass translation parameters (namely %username%) to menu (powered by KnpMenuBundle) and get it to render as intended?
How can one supply arguments:
|trans({'%username%': app.user.username}
in the MenuBuilder?
MY CODE
The code block in question is
$menu['Profile']->setChildrenAttribute("class", "dropdown-menu")
->addChild('Logged in as', array('label' => 'layout.logged_in_as'))
->setExtra('divider_append', true)
->setExtra('translation_domain', 'FOSUserBundle');
namely label string
Translating strings with parameters ordinarily, one would supply arguments like so:
<li>{{ 'layout.logged_in_as'|trans({'%username%': app.user.username}, 'FOSUserBundle') }}</li>
Yet, i can not seem to figure out how to pass them in case of using KnpMenuBundle and Bootstrap integration.
Conclusion
Please advise.
Thank you for your time and knowledge.
You could declare your MenuBuilder as a service like this
#services.yml
app.menu_builder:
class: AppBundle\Menu\MenuBuilder
arguments:
- #knp_menu.factory
- #security.token_storage
- #translator.default
Update MenuBuilder's constructor according to the dependencies on the above definition
With this you have access to all the things you need to perform your traduction
$user = $this->tokenStorage->getToken()->getUser(); // If you are under a path protect by security.yml access_constrol
$yourLoggedInTraduction = $this->translator->trans(
'layout.logged_in_as', [
'%username%' => $user->getUsername()
],
'FOSUserBundle',
'yourlocale'
);
dump($yourLoggedInTraduction);
You should have your traduction and then map it to your profileMenu(...) function logic
I don't use sames version of symfony/knpMenu than you so maybe this code won't work directly but you just have to adapt to your needs
Ask for question if you want if it isn't clear
I hope I have helped you, if yes please mark the post as resolved ! : )
A specific option extras.translation_params is available but not documented:
https://github.com/KnpLabs/KnpMenuBundle/blob/master/src/Resources/views/menu.html.twig#L7
You can use it in the same way you used the translation_domain option:
$menu['Profile']->setChildrenAttribute("class", "dropdown-menu")
->addChild('Logged in as', array('label' => 'layout.logged_in_as'))
->setExtra('divider_append', true)
->setExtra('translation_domain', 'FOSUserBundle')
->setExtra('translation_params', ['%username%' => $user->getUsername()]);
Simple answer to your question
Simply translate the label passed to addChild:
$label = $this->translator->trans('layout.logged_in_as', ['%user%' => $username ]);
$menu->addChild('Logged in as', array('label' => $label);
$this->translator is a \Symfony\Component\Translation\TranslatorInterface that is injected into the service creating the menu. I got it by passing "#translator" as an argument to the constructor in services.yml.
Add multiple child menus
For the sake of completeness, I'll also note that every child menu must have a different name. So, if you want to create multiple menus with different parameters, make sure you don't copy/paste the first line without also changing the menu name.
Or use something like this:
$idx = 0;
$menu->addChild("Language_".$idx++, array('label' => $label_lang1);
$menu->addChild("Language_".$idx++, array('label' => $label_lang2);
Or, if all the child menus are generated in one file:
$menu->addChild("Language_".__LINE__, array('label' => $label_lang1);
$menu->addChild("Language_".__LINE__, array('label' => $label_lang2);
If you don't use different names, only the last menu is displayed.
Avoid missing translation warnings
With the above solution, the symfony toolbar and the log both report warnings about missing messages. That's because the provided label can't be found in the translation domain (in messages.yml or whatever you use for your translations).
To avoid those false positive, add the following line after the addChild call:
$menu->addChild('Logged in as', array('label' => $label)
->setExtra('translation_domain', false);

Kartik Export - How to style exported PDF files?

I am using Kartik Export (kartik\export\ExportMenu) to export data from gridview (kartik\grid\GridView) to PDF file. The problem is that the file has a small font and data seems jumbled up since there are no table borders or other formatting present.
My question is - How can I add custom styles to the exported document?
This is the code I am using in my view file:
<?= GridView::widget([
'dataProvider' => $provider,
'columns' => $columns,
]); ?>
<?= ExportMenu::widget([
'dataProvider' => $provider,
'columns' => $export_columns,
'target' => ExportMenu::TARGET_SELF,
'showConfirmAlert' => false,
'showColumnSelector' => false,
'exportConfig' => [
ExportMenu::FORMAT_HTML => false,
ExportMenu::FORMAT_TEXT => false,
],
'filename' => 'exported-data_' . date('Y-m-d_H-i-s'),
]); ?>
In your exportConfig array add this setting:
GridView::PDF => [
'config' => [
'cssFile' => '#webroot/css/report.css',
]
]
Now you're able to create report.css in the css folder of you web folder and you can style ahead. This will replace the default bootstrap stylesheet, but reading your question it looks like it didn't get loaded anyways.
You'll find other configuration options for PDF here: [http://demos.krajee.com/grid#default-export-config]
The difference between GridView and ExportMenu is that the ExportMenu uses PHPExcel library to generate the PDF via mPDF (or any other lib you need) while GridView directly offers method to use the mPDF library.
The formatting is controlled by PHPExcel settings (header, footer, fonts) - check the PHPExcel Documentation for details.

Yii2: How can I place something into a Breadcrumbs widget?

I find the Breadcrumbs widget quite useful. However, on the right side within the widget there is enough space for something else. If I'd like to put a link ('a' tag, but could be actually any other small thing) right aligned into the Breadcrumbs, how could I do that? What is a simple and proper solution? Should I extend the class, develop my own, use begin and end of the widget somehow?
If you look at yii\widgets\Breadcrumbs you see that there is a third parameter in the breadcrumbs items
From the Yii2 file
[
'label' => 'Post Category',
'url' => ['post-category/view', 'id' => 10],
'template' => "<li><b>{link}</b></li>\n", // template for this link only
],
So by adding something like this in your main layout file
$this->params['breadcrumbs'][] = [
'label' => 'Your Label',
'url' => ['controller/action'],
'template' => "<li style="float: right;">{link}</li>\n"
];
you will get a link at the right side. This link will come with a / prefixed, but you can bind it to a .class instead and configure it the way you want.
'template' => "<li class=\"yourClass\">{link}</li>\n"

Foundation() is undefined when CListView is in the page

I have a Yii Layout, called Main, it loads all the CSS and the JavaScript, correctly ordered.
So, i have two views, one just have pure HTML, and the other one have something like this :
<?php
$dataProvider=new CActiveDataProvider('agenda');
$dataProvider->pagination->pageSize=5;
$this->widget('zii.widgets.CListView', array(
'dataProvider'=>$dataProvider,
'enablePagination'=>true,
'itemView'=>'_agenda', // refers to the partial view named '_agenda'
'pager' => array(
'class' => 'CLinkPager',
'header' => false,
'htmlOptions' => array('class' => 'pager'),
'maxButtonCount' => '10',
'cssFile'=>'css/my.css',
),
));
?>
My problem :
The second one throw this exception Undefined is not a function and aim to the line with $(document).foundation(); in the code.
Is the only error it throws, and both have the same JavaScripts and CSS imported.
They are incompatible?
Solved, i just had conflicts with the Foundation's jQuery and Yii's jQuery.
The solution is just use this at top :
<?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>
Remove others jQuery and move the foundation.min.js to the bottom.

Yii set default options for a custom CGridView

Using PHP framework Yii. As you know, default CGridView table CSS class is items. Well I want to change this value. I know it's possible for one specific widget. Like this:
<?php $this->widget('zii.widgets.grid.CGridView', array(
'id'=>'user-grid',
'dataProvider'=>$model->search(),
'columns'=>array(),
'itemsCssClass'=>'gridtablecss',
)); ?>
But how to do this for whole Yii application? I mean make default some another class not items
If you only want to set some static parameters for each widget then you don't need to extend the class. You can also use Yii's widgetFactory component. You can configure it in your main.php configuration file.
'components' => array(
// ...
// Default properties for some widgets
'widgetFactory' => array(
'widgets' => array(
'CGridView' => array(
'itemsCssClass' => 'gridtablecss'
),
),
),
),
Create another php file in your extensions folder, and name it MyGridView.php:
<?php
Yii::import('zii.widgets.grid.CGridView');
class MyGridView extends CGridView {
public function init() {
// Set default CSS class
$this->itemsCssClass = 'gridtablecss';
// Other modifications, i.e.: Increase page size
if ($this->dataProvider !== null)
$this->dataProvider->pagination->pageSize = 999999;
parent::init();
}
}
Now instead of using CGridView, you use your new CGridView like this:
<?php $this->widget('MyGridView', array(
Make sure your main.php config file is importing extensions:
'import' => array(
'application.extensions.*',
...
),
You can also extend CListView (and other similar core Yii classes) the same way.

Categories