<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>
<?php ActiveForm::end(); ?>
How can I get the input text box without bootstrap 3 wrapper codes ?
I am using a custom HTML wrapper and how can I implement my own template for the text box ?
thanks
Depends whether you want to change div's class or input itself.
<?= $form->field($model, 'title', ['options' => ['class' => 'custom_class_div']])->textInput(['class' => 'custom_class_input']) ?>
I have given two options with overwriting classes from bootstrap.
custom_class_div will replace boostrap for div (input's parent). custom_class_input will replace boostrap for input. Basically, it removes form_group in both cases but in first option it will remove that part where input field takes entire "line" in parent div and in second option this will modify input itself (will still be just 1 input on the "line" but no border shadows, smaller input field, etc.).
If you don't have any classes but just want to use style in div/input element, you can replace class with style, for example:
<?= $form->field($model, 'title')->textInput(['style' => 'width: 150px']) ?>
Related
I am creating a form in Yii2, but have some issues with the default design. Namely, <?= $form->field($model, 'x')->textInput(['maxlength' => true]) ?> will place the 'x' label above the textfield, but <?= $form->field($model, 'y')->checkbox(['label' => 'y']) ?> places the label to the right of the box. Since this isn't some html element that I can just adjust with css (afaik?), I have no idea how to fix it and get the label above the checkbox.
You need to pass false as second argument to checkbox():
<?= $form->field($model, 'y')->label('y')->checkbox([], false) ?>
You still may need to adjust CSS (that depends on your layout styles), but checkbox and its label will be rendered using standard field layout, sot is should be fairly easy.
i want add fontawesome icon in ajaxsubmitbutton,
<?php echo CHtml::ajaxSubmitButton('<i class="fa fa-plus"></i> Print Preview',
array('ma/select'),
array( 'success'=>'reloadGrid',
'error'=>'js:function(data){
alert("Please select checkbox");
return false;
}'),
array( //'encodeLabel'=>false,
'class'=>'btn btn-success',
)); ?>
i have try to set encodeLabel to false, and try encode to false, all of them doesn't work, does anyone know how to about that??? thank you
Why do you use encodeLabel? The problem is that FontAwesome stylesheets use before pseudo-elements to add icon.
:after and :before pseudo elements, they can only be put on container elements. Why? Because they are appended inside that particular element. input is not a container. button for instance is hence you can put them on.
echo CHtml::ajaxSubmitButton( ' Print Preview ', $url, array(),
array('encode'=>false)
)
And in CSS something like this:
input[type="submit"] {
font-family: FontAwesome, 'Ubuntu', sans-serif;
}
For further reference check this:
How do I add a Font Awesome icon to input field?
What is the best practice to make different layouts for pages in Yii2?
The problem I am facing is that Yii2 layout/main.php code looks like
<div class="container">
<?= $content ?>
</div>
Yii2 uses Bootstrap and I need to make full width image only in site/index.php.
Basically in the index.php I need to wrap
<?= $this->render('_search') ?>
into .container-fluid class.
How can I replace .container class to .container-fluid class only for index.php page?
Make a new layout, e.g. layout-fluid.php, and in controller do
public function actionIndex()
{
$this->layout = 'layout-fluid';
return $this->render('index');
}
If fluid container is the only change you need, you can do this instead: in index view file add
$this->params['fluid'] = true;
And in layout file change the desired container to
<div class="container<?= $this->params['fluid'] ? '-fluid' : '' ?>">
params array is a good place to propagate information within view.
If you need just change wrapper class only for site/index, in main.php you can do it like this:
<div class="container<?=($this->context->id=='site' && $this->context->action->id=='index')?'-fluid':'';?>">
<?= $content ?>
</div>
I am currently migrating a site to Wordpress from a custom-created HTML/CSS/Bootstrap website. I have downloaded the Navwalker .php extension that automatically converts the Bootstrap navbar to Boostrap.
Here is the gap I am referring to. http://imgur.com/LfUEF6o
Where specifically in my CSS can I fix this problem?
Here is the php section in my header.php file:
<?php
$args = array(
'menu' => 'header-menu',
'menu_class' => 'nav nav-pills nav-justified navbar-inverse',
'container' => 'false',
'walker' => new wp_bootstrap_navwalker()
);
wp_nav_menu ( $args );
?>
If anyone could direct me toward the right place, I would greatly appreciate it.
Try adding this to your theme's style.css file:
.dropdown-menu {
margin-top: 0;
}
Feel free to play with the value of 0 so that it lines up nicely with your navbar. For example, you could instead use -10px or 10px.
I have a custom WordPress theme and my navigation bar is implemented fine however I have this bit of CSS (style.css):
#navbar li a.active{
background-color:#000;
color:#fff;
border-top: 3px solid;
border-color:#d22b2b;
}
This is the styling for the button that the current page is on, so it shows which page is currently active, this is a bit tricky to implement with WordPress as the HTML (index.php) is like this:
<div id="navbar">
<div class="navbarcontainer">
<ul align="center">
<?php wp_list_pages('title_li=');?>
</ul>
</div>
</div>
Now I can't add class="active" because I can't see the list items in the unordered list.
Need a way I can add class="active" to each page.
I don't have enough rep to comment but just curious why not use native WordPress menus? It'll make your life easier going down the road as well if you use wp_nav_menu();
See here: http://codex.wordpress.org/Function_Reference/wp_nav_menu
Properly using a menu that way will automatically apply this class to the active menu item:
.current-menu-item
That's just native functionality. Let me know if you decide to go that way and I'll be happy to help.
In your functions.php file add:
register_nav_menus('menu_slug' => 'Menu Name');
This will allow you to assign a menu in the backend. Go to Appearance -> Menus.
Then where you're trying to call the menu, add this code:
wp_nav_menu('menu'=> 'menu_slug');
That will then pull the menu you created in the backend. There are lots of arguments you can pass to that wp_nav_menu function as well.
$defaults = array(
'theme_location' => '',
'menu' => '',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
If you use it this way, add this code to your theme and then:
wp_nav_menu ( $defaults );
You'll notice if you do it that way, WordPress will automatically give the active menu item a current class. I hope this helps. This honestly is the best (right) way to do it. At some point you might want to switch the arrangement of menu items or add sub-menus or have a page you don't want to show. Using the menus like this will help you substantially.