I'm creating app with Yii and YiiBooster. When I put a TbProgress widget into a td cell - it's height seems to have some kind of bottom padding (like 20-30px). It looks pretty bad as it causes my table rows to be higher than they should.
There was a margin-bottom defined to 40px (in bootstrap.css file) but I removed it - it is still to high.
Anyone knows where can I change it?
Here is my code:
$this->widget('bootstrap.widgets.TbGridView', array(
'id' => 'invite-grid',
'type' => 'striped condensed',
'dataProvider' => $dataProvider,
'columns' => array(
'idProject',
'name',
array(
'header' => 'Postęp',
'value' => function($data)
{
Controller::widget('bootstrap.widgets.TbProgress', array(
'percent' => ($data->projectInvites +1 )/ $data->projectMaxInvites * 100,
));
},
'htmlOptions' => array (
'style' => ''
),
),
array(
'class' => 'bootstrap.widgets.TbButtonColumn'
)
)
));
you can define margin-bottom:0 !important; to any css file inside your page to the class of that element.
Did you clear the asset directory after change bootsrap.css, you must if you want to changes to affect. May be that was the problem.
Look for padding to parent element or the same element of, may be there is padding not margin.
I have found the solution. I had to add `margin-bottom: -20px' to the code:
Controller::widget('bootstrap.widgets.TbProgress', array(
'percent' => $data->projectInvites == 0 ? 0 :
($data->projectConfirms / $data->projectInvites) * 100,
'htmlOptions' => array(
'style' => 'height: 20px; margin-bottom: -20px',
),
));
Related
I'm trying to add an options in my theme settings to set the background-color of my mobile-menu using Redux Framework.
I used the color_rgba type so I can pick a color with opacity.
I see my background-color set on my menu with class 'mobile-menu', but only a HEX value.
Redux::setSection( $opt_name, array(
'title' => __( 'Mobile menu', 'redux-framework-demo' ),
'id' => 'header-mobile-menu',
'subsection' => true,
'fields' => array(
'id' => 'header-mobile-menu-background',
'type' => 'color_rgba',
'title' => __('Mobile menu background Color', 'redux-framework-demo'),
'subtitle' => __('Background color for mobile menu overlay', 'redux-framework-demo'),
'default' => array(
'color' => '#E2E2E2',
'alpha' => 1
),
'transparent' => false,
'output' => array(
'background-color' => '.mobile-menu',
),
),
) );
How can I make sure I get the rgba color instead of the HEX color?
I am not using output to generate my style as I am handling my styles in a separate PHP file. But I will show you how I have done it and hopefully it can help you.
I think it is also possibly because you are not using a default RGBA value in your setting.
Here is my Field Array:
array(
'id' => 'the-id-of-my-field-is-here',
'type' => 'color_rgba',
'title' => 'my title of my field setting',
'subtitle' => esc_html__('My subtitle of my field setting', 'redux-framework-demo'),
'transparent' => false,
'default' => array(
'color' => '#E2E2E2',
'alpha' => 1
),
),
in my seperate php file I am calling my option name like so:
//This sets my redux settings in a variable called options
$options = get_my_theme_options();
Then I am checking if there is a value in my options and if there is, use it in my style like so:
if(!empty($options['the-id-of-my-field-is-here'])) {
echo'.mobile-menu {
background-color: '.$options["the-id-of-my-field-is-here"]['rgba'].';
}';
}
As you can see I am calling the other array at the end like so [rgba]
MY guess would be to perhaps try my way or perhaps add an RGBA value in your default array like so:
'default' => array(
'color' => '#E2E2E2',
'alpha' => 1,
'rgba' => 'RGBA VALUE HERE'
),
I hope this helps in any way.
Based on this reference link :
https://docsv3.redux.io/core/fields/color-rgba/index.html
suppose you want to output a color as a background-color, instead of color. The following output array in key/pair format would accomplish this:
'output' => array('background-color' => '.site-header')
Alternatively, multiple elements could be specified for different selectors.
'output' => array(
'background-color' => '.site-header',
'color' => '.site-footer')
Multiple selectors are also supported. Separate them with commas.
'output' => array('background-color' => '.site-header, .site-footer')
I have code like this :
<?php
$this->widget('bootstrap.widgets.TbGridView',array(
'id'=>'appliances-grid',
'dataProvider'=>$model->search(),
'filter'=>$model,
'columns'=>array(
array(
'name'=>'price',
'type'=>'number',
'htmlOptions'=>array('style' => 'text-align: right;'),
),
array(
'class'=>'bootstrap.widgets.TbButtonColumn',
'template'=>'{update}{delete}'
),
),
));
?>
the result is integer number only and search filter is work, how to change it into decimal format but search filter still working ?
I tried to change it into :
array(
'name'=>'price',
'type'=>'number',
'htmlOptions'=>array('style' => 'text-align: right;'),
'value'=>function($data)
{
return number_format($data->price,2,',','.');
},
),
But it makes search filter not working properly.
I found the answers here :
Yii Number Formatting
How to format numeric string using C.Gridview - Yii
And also I found this link Yii , show different date format in cgridview
Try This:-
$this->widget('zii.widgets.grid.CGridView', array(
'dataProvider' => $dataProvider,
'columns' => array(
'cost', // display the 'cost' attribute
array( // display the 'cost_in_dollars' using an expression
'name' => 'cost_in_dollars',
'value' => 'number_format($data->cost/100, 2)',
),
),
));
I'm trying to change the element value using Jquery but it's not working...
This is my widget where I have my element 'tag' which i want to change it to textField on edit...
$this->widget('EditableGrid', array(
'dataProvider' => $dataProvider->searchbyID($invoice_id),
'template' => '{items}{buttonCreateRow}{pager} ',
'id' => 'InvoiceLine-grid',
'rowTemplate' => $row_template,
'columns' => array(
array(
'class' => 'EditableGridColumn',
'header' => '',
'name' => 'InvoiceLine_{gridNum}_{rowNum}_edit',
'imageurl'=> Yii::app()->request->baseUrl.'/images/update.png',
'tag' => 'button',
'tagHtmlOptions' => array(
'onclick'=>'editline(this)',
)
),
array(
'class' => 'EditableGridColumn',
'header' => 'StentysRef',
'name' => '[{gridNum}][{rowNum}]stentysproductref',
'tag' => 'laabel',
'tagHtmlOptions' => array(
'style'=>'background-color:#FFF;border-color:#FFF',
'onkeyup'=>'stentysref(this)',
'readonly'=>true
)
),
My Jquery is,
(as you can see the removeAttr works but attr doesn't)
function editline(obj){
$("#InvoiceLine_1_"+row+"_stentysproductref").attr("tag","textField");
$("#InvoiceLine_1_"+row+"_stentysproductref").removeAttr("readonly");
}
Use .prop() and removeProp() which is added in jQuery 1.6, as the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior.
function editline(obj){
$("#InvoiceLine_1_"+row+"_stentysproductref").prop("tag","textField");
$("#InvoiceLine_1_"+row+"_stentysproductref").removeProp("readonly");
}
API Doc for .prop()
If you are using EditableGrid widget without pointing AR model, then the row id looks like
$('#_1_'+row+'stentysproductref').
I'll take it into consideration for the future updates. Thank you.
I have CGridView with CCheckBoxColum:
$this->widget('zii.widgets.grid.CGridView', array(
'id' => 'documento-financeiro-grid',
'dataProvider' => $provider,
'filter' => null,
'columns' => array(
array(
'id' => 'autoId',
'class' =>'CCheckBoxColumn',
'selectableRows' => '50',
'checked'=>'alert('
),
array(
'name' => 'id',
'htmlOptions' => array('style' => 'width: 50px;'),
'headerHtmlOptions' => array('style' => 'width: 50px;'),
),
array(
'name' => 'numero',
'htmlOptions' => array('style' => 'width: 60px;'),
'headerHtmlOptions' => array('style' => 'width: 60px;'),
),
),
));
And I want show a dialog window when a row was checked, but I need to know what id of row was checked, someone can help me?
I'll try to write what your code would look like.
You have to write some javascript that listens on the change event for your checkboxes (this event gets triggered when checkboxes get clicked on).
I've used a jquery selector to select the checkboxes based on what column they are in (this is because your grid may have other columns with checkboxes - we don't want to touch those).
In my example code, I've assumed your checkboxes have ID's that begin with documento_financeiro-grid_c0 (this is the ID Yii gives them by default). Please change that if this isn't the case.
The row id is stored in the variable item_id and variable item_checked contains true if your checkbox was checked and false if it was unchecked.
$('#documento-financeiro-grid input[id^=documento-financeiro-grid_c0]').change(function() {
var item_id = $(this).val();
var item_checked = $(this).prop('checked');
if (item_id === "1") {
console.log('top checkbox was clicked on');
} else {
console.log('ID was'+item_id);
}
});
I hope this helps.
Im trying change my GridView column width. This is my code:
<?php $this->widget('zii.widgets.grid.CGridView', array(
'id' => 'prefixs-grid',
'dataProvider' => $model->search(),
'filter' => $model,
'columns' => array(
array(
'name' => 'id',
'header' => 'No.',
'htmlOptions' => array('class' => 'center'),
),
array(
'name' => 'pfx',
'htmlOptions' => array('width' => 30),
),
array(
'class' => 'CButtonColumn',
),
),
)); ?>
When i run 'pfx' columns width must be changed to 30, but width is same. How i can change width of column? Any ideas?
If you do not want to use a separated CSS definition you should do:
'htmlOptions' => array('style' => 'width: 30px;'),
'filterHtmlOptions' => array('style' => 'width: 30px;'),
'columns' => [
[
'headerOptions' => ['width' => '150'],
'attribute' => 'name',
'format' => 'raw',
'value' => 'name'
],
]
There are multiple ways to approach this issue.
You can widen the cell's contents (cells of individual rows):
$columns[] = array(
'header'=>'Name',
'value'=>'$data["name"]',
'htmlOptions'=>array('style'=>'width: 150px')
);
Sometimes you may want to widen the column header instead of the individual rows' cells:
$columns[] = array(
'header'=>'Name',
'value'=>'$data["name"]',
'headerHtmlOptions'=>array('style'=>'width: 150px')
);
Widening the header is the preferred option, but even if you do that, sometimes it doesn't work as expected.
If this is the case, you can go my personal preferred way and widen the contents of the header cell. The widening will be inherited by the rows below it as well.
$columns[] = array(
'header'=>'<div style="width:150px;">Name</div>',
'value'=>'$data["name"]',
);
i noticed with cgridview in the tags there is an id attribute id="table-name_c0" id="table-name_c1" etc. you could hook into this and the .filters class for the filter width. e.g.
#table-name table-name_c0 {
width: 30px;
}
#table-name .filters:nth(0) {
width:30px;
}
where c0 and :nth(0) are the same number.
it's slightly hacky but what you are trying to achieve is also slightly hacky imho
Simply add
'contentOptions' =>['style' => 'width:30px'],
-- For example:
'columns' => [
[
'attribute' => 'product.name',
'contentOptions' =>['style' => 'width:30px'],
],
That should do the trick!