I am customizing the index form in active admin.
I have some columns like:
column :id
column :name
I want to set the width of those columns.
Is there an easy way?
for example:
column :name do |name|
div :class => "name" do
name
end
end
then in app/assets/stylesheets/active_admin.css.scss file:
div.name { width: 500px; }
this should work I guess
The easiest way would be to wait for a version of active_admin that offers the feature Greg Bell talks about in https://github.com/gregbell/active_admin/issues/63
There is currently not an 'easy way' to do this.
No need to create any div class. For:
column :name
In app/assets/stylesheets/active_admin.css.scss file write:
.active_admin {
.index_as_table {
td.name {
max-width: 150px;
min-width: 100px;
}
}
}
To set the max-width of the columns admin panel wide write:
.active_admin {
.index_as_table {
td {
max-width: 150px;
}
}
}
If you're using other index renderers, just have a look the source html and tweak the active admin stylesheet accordingly.
Related
I'm currently using GridMvc to display a list on an Ajax view using this code:
columns.Add()
.Titled("Host").Filterable(true).Encoded(false)
.Sanitized(false)
.RenderValueAs(LogonEvents => Html.ActionLink(LogonEvents.Host,
"Computers", new { computerName = LogonEvents.Host,
userName = LogonEvents.Name,
onclick = "showPageLoadingMessage()" }));
I'd like to use buttons rather than an ActionLink but I'm not sure how to pass the values to the next view.
You could just keep it simple and apply a CSS class to the htmlAttributes object.
Html.ActionLink("Button Name", "Index", null, new { #class="classname" })
and then create a class in your stylesheet
a.classname
{
background: url(../Images/image.gif) no-repeat top left;
display: block;
width: 150px;
height: 150px;
text-indent: -9999px; /* hides the link text */
}
Or code your own HTML Helper.
I want to change the cell/row colors of an angular-ui-grid. From the documentation it seems I should use the cellClass for this. I want two colors for a striped look and another color for the currently selected row.
In my columnDefs I use a function to determine the proper cellClass. This works perfect on first load.
$scope.getCellClass = function (grid, row, col, rowRenderIndex, colRenderIndex) {
if (row.isSelected)
return 'my-grid-cell-selected';
if ((rowRenderIndex % 2) == 0) {
return 'my-grid-cell1';
}
else {
return 'my-grid-cell2';
}
}
$scope.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false,
columnDefs: [
{ field: 'EventDate', cellClass: $scope.getCellClass },
...
]
};
I don't know, however, how to update the cellClass of all cells of the selected row.
I have the following code that I thought would update the selected row but nothing happens although I can see that it is called.
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function(row){
//??????
gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW);
});
};
Without my cellClasses the selected row gets colored differently.
Any idea how to achieve a customized color for the selected row?
Here's the way to do it with CSS:
.ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell {
color: #fff;
background-color: blue;
}
.ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell.ui-grid-cell-focus,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell.ui-grid-cell-focus {
outline: 0;
background-color: blue;
}
.ui-grid-row-selected.ui-grid-row:nth-child(odd):hover .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even):hover .ui-grid-cell {
color: #fff;
background-color: blue;
}
The best and easiest way to do this in my opinion is use the provided ui-grid customizer!
Specifically what you're looking for to change the background color for odd vs even rows is to change the #rowcoloreven and #rowcolorodd fields.
To change the color of the currently selected row, update in the customizer the #focusedcell property and in addition follow this tutorial and/or look at the second controller in this plunker to extend your selection from a single cell to the entire row.
I have also created a new plunker which shows how to implement row selection as well as how to change the row color defaults. Yes I know it's truly garish coloring - I thought it would help to really get the point across :). You can see in custom.css what is actually different from the uncustomized ui-grid css is
.ui-grid-row:nth-child(odd) .ui-grid-cell {
background-color: #ffff33;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
background-color: #ff22ff;
}
.ui-grid-cell-focus {
outline: 0;
background-color: #b3c4c7;
}
If you need more direction let me know :)
How can I set the width of an autocomplete using css? I know I can set it up when I set up the width when I declare it, like so.
#(Html.Kendo().AutoComplete().Name("test").HtmlAttributes(new { style="width:400px"}))
But I want to know how to do it in css. I tried the following and it didn't work
.k-autocomplete .k-header
{
width: 300px;
}
Simply do this:
.k-autocomplete.k-header {
width: 300px;
}
Remove the space between CSS class selectors.
Taken from their documentation
var autoComplete = $("#autoComplete").data("kendoAutoComplete");
// set width of the drop-down list
autoComplete.list.width(400);
Seems a bit odd that this isn't part of the configuration when you initialize.. maybe that's just me.
For me in 2020, the answer was simply:
.k-autocomplete {
width: 300px;
}
I need to add custom color in creating each event in the full calendar (just like in the google calendar- the user can customize the text and bg colors of events).
Do you know any color picker plugins that may best fit to full calendar?
You can set the CSS Class name for a new event. Like
var myEvents = [
{
title: 'XMas',
start: theDate,
className : 'holiday'
}
];
Then to update the style of the given event type do something like the following:
#calendar .holiday,
#calendar .holiday div,
#calendar .holiday span {
background-color: #6d4d47;
color: #ffffff;
border-color: #6d4d47;
font-size: 12px;
}
It's in the fullcalendar documentation... which seems to be down at the moment. You can pass in colours for each event as elements of the array:
'backgroundColor' => "#36c",
'borderColor' => "#36c",
'textColor' => "#36c",
No plugin needed!
How do I disable ALL Prices being shown on the public end of Magento?
I basically want to allow my customer to add products to their cart but for the item prices/totals etc to be invisible.
Many thanks for any pointers
Either remove the template code which renders the price or simply add a css class and hide it using styling!
You should do that in your catalog/navigation, catalog/product/view, checkout/cart, sales/order/view, in checkout/review, etc...
Hide price-box class from css it will help you
A css (partial ?) solution to play around:
.price-box .price{
display: none;
}
.price-box:after {
content: '-'; /*contact us for price*/
}
.cart-price .price {
display: none;
}
.cart-price:after {
content: '-';
}
.cart-table-totals {
display: none;
}
label[for=s_method_flatrate_flatrate] {
display: none;
}
#checkout-review-table tfoot {
display: none;
}
#shipping_method-progress-opcheckout .price {
display: none;
}
EDIT here is a free module that will do this for you: http://www.magentocommerce.com/magento-connect/red2black-hideprices.html
I am not sure how advanced or not you are but this could be done as a module. You would add an attribute to the product, and based on whether it is true or no you would hide the pricing in the relevant templates.
Here is a detailed thread on how to do this:
http://www.magentocommerce.com/boards/viewthread/22673/
If you are in the mood to spend a few $$ you could buy this module:
http://www.magentocommerce.com/magento-connect/bolasevich/extension/2096/hide-product-price-for-non-registered-users
Or if you are in the mood to spend tons of money you could buy this one:
http://www.magentocommerce.com/magento-connect/Cart2Quote/extension/5905/not2order_hide_price_disable_ordering
This post was very useful for me:
http://www.magentocommerce.com/boards/viewreply/87901/
hiding price:
app/design/frontend/default/default/template/catalog/product/price.phtml
insert at the very beggining of the file:
<?php if (Mage::getSingleton('customer/session')->isLoggedIn()) { ?>
insert at the very end of the file
<?php } ?>