Yii2. Button jumps on next line after Pjax wrap added - button

I use Yii2. I have 3 buttons in one line.
If I wrap for example the last one into the Pjax it jumps to next line.
How to correct the Pjax css class to avoid such jump?
Pjax::begin(['id' => 'pjax'.$model->id]);
echo Html::button('<span class="glyphicon glyphicon-user" aria-hidden="true"></span><span id ="projectbadge'.$model->id.'" class="badge badge-notify">'.count($model->votes).'</span>', [
'value' => Url::to(['project/votes', 'id'=>$model->id]),
'class' => 'linkbutton',
'id'=>'projectVotes'.$model->id,
'data-toggle'=>'tooltip',
'title'=> 'Votes',
'onfocus' => 'blur();'
]);
Pjax::end();

By default Pjax uses a div so you can set the style to inline
Pjax::begin(['id' => 'pjax', 'options' => ['style' => 'display: inline;']]);
or if you're on 2.0.7+ you can change the tag
Pjax::begin(['id' => 'pjax', 'options' => ['tag' => 'span']]);

Related

Elementor repeater with unique elements

I need to change the position, color, background-image of elements inside each repeater separately.
My widget code is here:
$repeater->add_control(
'clock_gy_minute_hand_position', array(
'label' => __('Minute Hand Position', 'origami-clock'),
'type' => Controls_Manager::DIMENSIONS,
'default' => array('isLinked' => false),
'size_units' => ['px'],
'allowed_dimensions' => ['top', 'left'],
'selectors' => [
'{{WRAPPER}} .clock' => 'top:{{TOP}}%;right:{{RIGHT}}%;bottom:{{BOTTOM}}%;left:
{{LEFT}}%;',
],
)
)
);
when got the data of each repeater by looping, It's applied the CSS position of each clock hand to the same position. It applies the last repeater item's position to all the elements. I need to identify each repeater element uniquely.
I see some article says like this
'{{WRAPPER}} .clock'.$item['_id'] => 'top:{{TOP}}%;right:{{RIGHT}}%;bottom:{{BOTTOM}}%;left:{{LEFT}}%;',
Unfortunately, this also not working for me.
selector should be
'selectors' => [
'{{WRAPPER}} {{CURRENT_ITEM}} .clock' => 'background-color: {{VALUE}};',
]
add this class to your repeated item
elementor-repeater-item-' . $item['_id']
Hope this will work for you

Nested elements in TinyMCE "Styles" dropdown

I've been using "tiny_mce_before_init" in WordPress to add my own custom styles to the style dropdown in the editor.
Everything has been working fine but now I need to add a style that doesn't just add one element but two. Do you know if that's possible?
Here's how I'm adding single elements:
<?php
add_filter('tiny_mce_before_init', 'my_tinymce_styles');
function my_tinymce_styles ($init) {
$styles = array(
array(
'title' => 'Small',
'inline' => 'small',
'wrapper' => false
),
array(
'title' => 'Bar',
'block' => 'div',
'classes' => 'bar',
'wrapper' => true
)
# Etc...
);
# Insert the array, JSON ENCODED, into 'style_formats'
$init['style_formats'] = json_encode($styles);
return $init;
}
And this works as expected. The user selects some text, chooses "Bar" from the "Styles" dropdown and the text is wrapped in <div class="bar">...</div>.
However, now I need to do that same but add <div class="section"><div class="inner">TEXT_HERE</div></div> - how can I do that?

space between the radio button and label Cakephp

i am newbie in Cakephp trying to create a space between radio box and a label
<span class="label"><b>Gender</b></span>
<?php $options=array('M'=>'Male'."<br>" , 'F'=>'Female');
$attributes=array('legend'=>false,'label'=>'gender_male.','class'=>'radio');
echo $this->Form->radio('gender',$options,$attributes);?>
</div>
i have created a radio box in Cakephp but there is no space between the box and label is coming ... how can i create a space .
Adding margin or padding to one of the elements depending on your design goals.
This is not a CakePHP issue but a CSS styling task. See http://www.w3schools.com/css/
You can simply use the following code:
<style type="text/css">
label{padding-left:5px;}
</style>
<span class="label"><b>Gender</b></span>
<?php $options=array('M'=>'Male'."<br>" , 'F'=>'Female');
$attributes=array('legend'=>false,'label'=>'gender_male.','class'=>'radio', 'div' => false, 'separator' => '');
echo $this->Form->radio('gender',$options, $attributes);?>
You can use labels in styled span with padding but don't forget to use escape False otherwise it will show you the entire span. Please see the <span style="padding:0 15px 0 15px;">No</span> part of the code.
<?php
echo $this->Form->radio('lifestyle_drinking',
[
[ 'value' => '0', 'text' => '<span style="padding:0 15px 0 15px;">No</span>'],
[ 'value' => '1', 'text' => 'Yes'],
[ 'value' => '2', 'text' => 'Ocassionally']
],
[ 'div' => false,
'class' => 'form-control col-xs-10 col-sm-10',
**'escape' => false**
]);
?>
Try it
<span class="label"><b>Gender</b></span>
<?php
$options=array('M'=>' Male'."<br>" , 'F'=>' Female');
$attributes=array('legend'=>false,'label'=>'gender_male.','class'=>'radio');
echo $this->Form->radio('gender',$options,$attributes);?>
</div>

How to disable HTML escaping of labels in KnpMenuBundle

I want to render an HTML label like:
$menu->addChild('Dashboard', array(
'route' => 'dashboard',
'label' => '<i class="fa-icon-bar-chart"></i><span class="hidden-tablet"> Dashboard</span></a>',
'extra' => array('safe_label' => true)
)
);
And I've pass the proper option while rendering:
{{ knp_menu_render('WshCmsHtmlBundle:Builder:mainMenu', {'allow_safe_labels': true} ) }}
But my label is still being escaped. What am I doing wrong?
Ok, the answer is!
You set up extra items on menu item not by 'extra' key but by 'extras' key.
So when you setup the item like this:
$menu->addChild('Dashboard', array(
'route' => 'dashboard',
'label' => '<i class="fa-icon-bar-chart"></i><span class="hidden-tablet"> Dashboard</span></a>',
'extras' => array('safe_label' => true)
)
);
it works fine!
There's two steps to achieve this.
1. MenuBuilder
You have to set safe_label to true in extras. Note that you can now write HTML in your label.
$menu->addChild('Home<i><b></b></i>', array(
'route' => 'homepage',
'extras' => array(
'safe_label' => true
),
));
2. Twig
You have to filter the output of knp_menu_render() so that it prints raw HTML (see documentation).
{{ knp_menu_render('main', {'allow_safe_labels': true}) | raw }}
Warning
Please be aware that this may be dangerous. From the documentation:
Use it with caution as it can create some XSS holes in your application if the label is coming from the user.
I used FyodorX's method to add a strong tag. It works like a charm but I must say that the raw filter is not necessary

Folded menu navigation with KnpMenu

I want to use KnpMenu for a current project to handle my navigation tree logic.
I have build a menu tree like this:
use Knp\Menu\Matcher\Matcher;
use Knp\Menu\MenuFactory;
use Knp\Menu\Renderer\ListRenderer;
$factory = new MenuFactory();
$menu = $factory->createItem('my_menu');
$menu->addChild('home', array('uri' => '/', 'label' => 'Home'))
->addChild('about', array('uri' => 'about', 'label' => 'About'));
$cat1 = $menu->addChild('category_1', array('uri' => 'category_1', 'label' => 'Category 1'));
$cat1_1 = $cat1->addChild('category_1_1', array('uri' => 'category_1_1', 'label' => 'Category 1.1'));
$cat1_1->addChild('category_1__1', array('uri' => 'category_1_1_1', 'label' => 'Category 1.1.1'));
$cat1_1->addChild('category_1_1_2', array('uri' => 'category_1_1_2', 'label' => 'Category 1.1.2'))->setCurrent(true);
$cat1->addChild('category_1_2', array('uri' => 'category_1_2', 'label' => 'Category 1.2'));
$renderer = new ListRenderer(new Matcher());
echo $renderer->render($menu);
I was wondering if it is possible to render a folded menu tree where only the currently active menu items are displayed. The other items should not be displayed.
In the documentation I haven't found a way to accomplish this.
Does anyone have a solution?
Thank you
Do you mean that you only want to have the menu 'unfolded' if the parent is active?
If so, then yes, I had the same requirement, and there is a PR open for it here https://github.com/KnpLabs/KnpMenu/pull/85
Currently as it's not merged I am using my branch to replace the tagged KnpMenu in composer.
//composer.json excerpt
...
"repositories": [
{
"type": "vcs",
"url": "git#github.com:catchamonkey/KnpMenu"
}
],
require: {
...
"knplabs/knp-menu": "dev-display_children_if_ancestor_current as 2.0.0",
...
}
...
You then tag the top level item with this behaviour, so to make your category_1 only expand if a child is active (or it is active), you would do
$cat1->setDisplayChildrenIfAncestorCurrent(true);
And this is handled by the twig rendered change here https://github.com/KnpLabs/KnpMenu/pull/85/files#L2R74

Resources