We are using ui-grid v3.1.1 and have a specific use-case where a grid needs to have certain rows selectable, and others not selectable, depending on the code of a specific cell in the row. We have been implementing the grid's html as:
<div id="gridSummary" ui-grid="gridOptions" class="grid-summary" ui-grid-auto-resize ui-grid-selection ui-grid-tree-view ui-grid-pinning>
<div class="grid-empty" ng-show="!gridOptions.data.length">No Corresponding Data Found</div>
</div>
and have been experimenting with the isRowSelectable gridOption which does what we want except for one issue: we don't want the disabled checkmark icon to appear on the non-selectable rows. Is there a way of causing the checkmark to be hidden/collapsed when the row is not selectable?
Thanks
You can achieve this by changing the rowHeaderIcon for non selectable rows.
You can override the template for the selection row header button and add custom css. Inject templateCache in your controller and override the template like this.
$templateCache.put('ui-grid/selectionRowHeaderButtons',
"<div class=\"ui-grid-selection-row-header-buttons\" ng-class=\"{'ui-grid-row-selected': row.isSelected , 'ui-grid-icon-cancel':!grid.appScope.isSelectable(row.entity), 'ui-grid-icon-ok':grid.appScope.isSelectable(row.entity)}\" ng-click=\"selectButtonClick(row, $event)\"> </div>"
);
The template will use a method in your controller scope to identify if the row is selectable.
Found this useful plunker.
I'd like to propose this Plunker which has no icon at all for unselectable rows
$templateCache.put('ui-grid/selectionRowHeaderButtons',
"<div ng-class=\"{'ui-grid-selection-row-header-buttons': grid.appScope.isSelectable(row), 'ui-grid-icon-ok' : grid.appScope.isSelectable(row), 'ui-grid-row-selected': row.isSelected}\" ng-click=\"selectButtonClick(row, $event)\"> </div>"
);
Related
I have a component item that represents a card with the data about the item. Since all the cards have the same structure (price/color/size/photo categories are shown on each card, nothing more and nothing less), I would like to apply a conditional CSS, but I don't know how, since the cards' style differ (slightly) based on:
price (for example, the card is bigger if the price is lower)
if the user has marked it as favorite
whether they are a part of this or that component (the URL can be the same). For example, in a single view there is the first component with a X card's style and the second component with a Y card's style - but the cards have the same data.
I'd really appriciate any suggestion!
<div [className]="'example-class'"></div>
This allows us to add classes based on a condition:
<div [className]="condition ? 'example-class' : 'other-class'"></div>
Or we could build the class name at runtime:
<div [className]="'class' + someValue"></div>
we can easily toggle CSS classes like so:
<div [class.example-class]="condition"></div>
we can assign a variable class name :
<div [ngClass]="seleted-class"></div>
NgClass can also assign multiple static class names all at once:
We can also use ngClass to assign multiple CSS classes based on multiple conditions.
<div
[ngClass]="{
'example-class': condition,
'other-class': !condition
}"
></div>
<div [ngClass]="['example-class', 'other-class']"></div>
source : https://malcoded.com/posts/angular-ngclass/
You can use NgClass to add conditional classes. For more info, refer the documentation - https://angular.io/api/common/NgClass
I have finally figured out how to use the Twitter Bootstrap Tooltips, and I am trying to style it. I have asked similar questions about other plugins, and they all ended up being specific CSS selectors. For jScrollPane, the track's selector was .jspTrack.
Fiddle
My question is, what is the CSS selector for the Twitter Bootstrap tooltips?
The documentation linked in the comments shows you a sample of the markup that's produced when a tooltip is generated:
Markup
The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).
<div class="tooltip">
<div class="tooltip-inner">
Tooltip!
</div>
<div class="tooltip-arrow"></div>
</div>
It should be fairly easy to determine the CSS selector based on this.
There are additional class names attached to .tooltip that you can see if you open your browser's DOM inspector and then hover your form element. The one in your example generates the following .tooltip element:
<div class="tooltip fade right in" style="…">
If you need to select only the tooltip belonging to a specific trigger element, that depends on where exactly the tooltip is placed in the DOM. The documentation says (just above the first section I quoted):
Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
So the selector would be .mytrigger + .tooltip where .mytrigger is the form element triggering that tooltip. The DOM position is determined by the container option, otherwise it's the default as stated.
I've a little problem using bootstrap and adding dynamically element on my page.
I've a form where I lwant to dynamically add new inputs. All that work fine but the rendering is not that good because it seems that there is some missing margin padding between the label and the select.
I use bootstrap as main css.
Here is an exemple : http://jsfiddle.net/4Uf2U/1/
<div class="form-inline">
<label>Label</label>
<select><option>Option</option></select></div>
Does anyone have an idea why this happen and how to correct this ?
It is because of the select. The one that is not dynamic is formatted like so:
<div class="form-inline">
<label>Label</label>
<select><option>Option</option></select>
</div>
And the dynamic ones are one liners like so:
<div class="form-inline"><label>Label</label><select><option>Option</option></select></div>
So use one way and the style (appearance) will be the same.
Here is an updated jsFiddle: click
I want to right-align numeric values in a CellTable. I already tried looking for ways to assign a style name for selected columns so I could align it with CSS but still couldn't figure out.
I also tried this but didn't work,
itemPriceColumn.setHorizontalAlignment(HasAlignment.ALIGN_RIGHT);
According to the GWT documentation, the new horizontal alignment will apply the next time the table is rendered... and I don't know yet what parameters I have to pass since it is required by render() method.
So I'm hoping for answers that would involve CSS.
Well, what you had is almost right. This works for me, without css: myColumn.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);
unitPriceColumn.setCellStyleNames("alignRight");
totalAmountColumn.setCellStyleNames("alignRight");
Where alignRight is the name of your CSS.
.alignRight {text-align:right}
Option 1: Use float:right on the parent element ( in the CellTable).
Option 2: Create your own TextCell and implement render method to generate something like this:
<div style="width:100%; text-align:center;"> your value </div>
I have a repeater of div's that look a little bit like this:
<div class="header_div">
<!-- Content -->
</div>
I want to have the background color of the divs change based on a dynamic property of the content of the div (lets call it the category), but I still want the "header_div" style to be assgined in cases where I dont have a css class for that category. Whats the best way of doing this?
The best way I can think of is to render the category as the "id" of the div and apply styles based on the id, but that strikes me as really messy - standards dictate that the id should uniquenly identify the element on the page and there will definitely be repeats of each category.
The simple answer would be to use multiple classes for the <div> so that
<div class="header_div header_red">
<!-- Content -->
</div>
<div class="header_div header_green">
<!-- Content -->
</div>
You're correct about the need for IDs to be unique.
There's nothing stopping you from specifying more than one value per class attribute - just separate them with a space.
<div class="header_div category">
<!-- Content -->
</div>
Just be careful to check what happens when both classes specify different values for the same style - I can't say whether the first or the second would take precedence.
You could supply multiple styles for the div class:
<div class="header_div mystyle">
<!-- Content -->
</div>
I believe styles declared later in the declaration override earlier ones. As long as you ensure your custom styles "shadow" those of the header-div, you can always include the header-div element, and it will only have an effect when any secondary style is absent (or empty).
If it's going to be used repeatedly on the page, it should be a class.
If it's unique on the page, use an id.
Without knowing more about your content, can you not use one of the header tags (<h1> etc)?
You are correct, IDs should be unique and if you want to use the same style more than once then use a class.
You can't have duplicate IDs so if you had multiple divs of the same category you would have an issue. Classes should be used when the style needs to be applied for 1 or more items on a single page.
Why not assign the class on databinding of the div based on the category? As your repeater is getting bound, find your div for the item you are binding and assign it.
You could also substitute the div for an asp:Panel and use it's onDataBinding method. It should look exactly like your div.