I am creating a drop down menu in zend form .
I want to increse the width of the menu but it's failing.
Here is the code for my dropdown
$this->addElement('select', 'user_role_id', array(
'decorators' => array(
'ViewHelper'
),
'required' => true,
'label' => 'Role',
'width' =>'930',
'multioptions' => array(
'1' => 'Admin',
'2' => 'Manager',
'3' => 'User'
),
));
You can use the class attribute to assign a CSS class or add the width to the elements CSS manually:
AddClass
$user_role_id = $this->addElement('select', 'user_role_id');
$user_role_id->class = 'wide-select';
SetAttribs
$user_role_id = $this->addElement('select', 'user_role_id');
$user_role_id->setAttribs(array('style' => 'width: 930px;'));
Related
I used listview with pjax block and this is my view page:
<div class="main-video">
<div>نمایش</div>
<div id="data">
<?php
$model = new ActiveDataProvider([
'query' => FileInfos::find()->where(['type' => 2])->orderBy(['id'=>SORT_DESC]),
'pagination' => [
'pageSize' => 15,
],
]);
Pjax::begin([
'id'=> 'id-pjax',
'enablePushState' => false, // to disable push state
'enableReplaceState' => false, // to disable replace state,
'timeout'=> 999999999
]);
if(isset($model))
echo ListView::widget([
'dataProvider' => $model,
'itemView' => '/partials/_item',
'viewParams' => ['typeName' => 'video'],
]);
Pjax::end();
?>
</div>
<button id="btn-show">نمایش</button>
</div>
And this is my action controller code:
public function actionVideo()
{
return $this->render('video');
}
After click on next page, it's reload on entire page.
in network tab of inspect element, I see two request calls:
1 - video?page=2&per-page=15&_pjax=%23id-pjax
2 - video?page=2&per-page=15
First request no have any response and second request have the rendered view page which reloads to that.
Whats wrong in my code?
How can I fix this issue for have ajax request call for changing page?
This article helped me: https://riptutorial.com/yii2/example/16529/how-to-use-pjax,
So it solved by changing pjax begin block with this code:
Pjax::begin([
'id'=> 'id-pjax-'.uniqid(),
'enablePushState' => false, // to disable push state
'enableReplaceState' => false, // to disable replace state,
'timeout'=> 999999999,
'clientOptions' => ['method' => 'POST']
]);
i am making a navigation bar and want to add a class to the main ULtag of the menu, does any one know how can i add class to to this element. Currently options and linkOptions are available which apply the attributes to the link / anchor and the parent LIof the anchor.
Here is my current code.
NavBar::begin([
'innerContainerOptions'=>['class'=>'container-fluid'],
'options' => [
'class' => 'style-ihozflem','style'=>'left: 125px; width: 730px; position: absolute; top: 20px; height: 24px;','data'=>['state'=>'center notMobile', 'dropmode'=>"dropDown"]
],
]);
echo Nav::widget([
'encodeLabels'=>false,
'activateItems'=>true,
'items' => $menuItems,
]);
NavBar::end();
Just add options class to Nav::widget
echo Nav::widget([
'options' => ['class' => 'whatever-class navbar-nav navbar-right'],
'encodeLabels'=>false,
'activateItems'=>true,
'items' => $menuItems,
]);
Hope that will be helpful!
I'm just wondering if there's a way to add a class to any navigation lists for things like sub-pages, categories, archives, meta?
I can't find anywhere in my templates to add a class as I guess it's all autogenerated?
My parent theme (html5blank) has a section of code (below) where this is referenced but I think it targets all lists in the sidebar...
if (function_exists('register_sidebar'))
{
// Define Sidebar Widget Area 1
register_sidebar(array(
'name' => __('Widget Area 1', 'html5blank'),
'description' => __('Description for this widget-area...', 'html5blank'),
'id' => 'widget-area-1',
'before_widget' => '<div id="%1$s" class="%2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
// Define Sidebar Widget Area 2
register_sidebar(array(
'name' => __('Widget Area 2', 'html5blank'),
'description' => __('Description for this widget-area...', 'html5blank'),
'id' => 'widget-area-2',
'before_widget' => '<div id="%1$s" class="%2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
}
I realised I can add a class to a parent div by amending the before_widget line to read something like:
'before_widget' => '<div id="%1$s" class="%2$s CUSTOM-CLASS-HERE">',
That does add a class but I still thing it'll be added to any and every widget that's added to the sidebar?
Presumably that will mean any widget that contains a ul will inherit styles applied to that class, which will break the widget's appearance?
Hope someone can help with this :)
You can add classes to menu items (or to menus) from WP Dashboard.
Appearance > Menus > Screen Options
Show Advanced > CSS Classes
Click any menu item to expand and add classes.
In CSS, you can always prefix those the classes with a specific id or class of a widget area, to only apply styles in specific sidebars/widget areas.
if you need to add a class to all your menu items programatically, use the
nav_menu_link_attributes hook:
function add_your_menu_classes( $atts, $item, $args ) {
if( /* condition based on $args or $item (WP_Post object)
* (in case you only want this when a particular condition
* is met). If not, just remove the condition */ ) {
$atts['class'] = 'some-class';
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_your_menu_classes', 10, 3 );
I think if ur widgets, displays a kind of navigation you have to use a custom NavWalker to modify link classes
https://github.com/wp-bootstrap/wp-bootstrap-navwalker
I am using inline editor in my kendo grid razor.I want to add kendo sortable widget for reordering rows in grid. But whenever i am appending sortable in my code one of my fields in the grid looses its control i.e. whenever i click on that column for adding data my textbox appears at once and whenever i enter the data and move to another column then the value entered is gone. When i remove the sortable code then the data is displayed perfectly. Please tell me a solution to it.
My code is :
#(Html.Kendo().Grid<KendoUIMVC5.Models.Product>()
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.Order).Width(60);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitsInStock).Width(140);
})
.ToolBar(toolBar => toolBar.Create().Text("Add New Route Part"))
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model => {
model.Id(p => p.ProductID);
})
.Read("Read", "Home")
.Update("Update", "Home")
.Sort(s => s.Add(m => m.Order))
)
)
#(Html.Kendo().Sortable()
.For("#Grid")
.Filter("table > tbody > tr")
.Cursor("move")
.HintHandler("noHint")
.PlaceholderHandler("placeholder")
.ContainerSelector("#Grid tbody")
.Events(events => events.Change("onChange"))
)
If somebody like me is running into the same problem, you have to change the sortable filter to .Filter("table >tbody >tr:not(.k-grid-edit-row)").
More informations about: https://docs.telerik.com/kendo-ui/controls/interactivity/sortable/integration/grid
In code I made this form element (I am using laravel stapler package) :
{{ Form::file('images', array('class' =>"btnUpload")) }}
This is an image of how this is shown in my browser and in developer tools :
I have given it a class but the styling I give is given to the surroundings not to the button bestand kiezen itself.
css code :
.btnUpload {
padding : 100px;
height : 100px;
width 20%;
}
.btnUpload > button {
width : 200px;
height : 200px;
}
I fixed it by declaring the form elements like this :
{{Form::textarea('alt_description', null, array(
'id' => 'pictureDescriptionInput',
'class' => 'form-control',
'rows' => 10,
'name' => 'alt_description',
'placeholder' => 'Description',
'type' => 'text'
));
}}