I'm using angular 1.3 and angular ui bootstrap and ui-grid 3(because of rtl support).
Here is the plunkr.
I've fixed it using a row template, the only change is adding {{row.entity[col.field]}} in the default row template.
Here is the result:
rowTemplate: "<div><div ng-repeat=\"col in grid.renderedColumns track by $index\" class=\"ui-grid-cell col{{ col.index }}\"><div class=\"ui-grid-vertical-bar\"> </div><div class=\"ui-grid-inner-cell-contents\" ui-grid-cell=\"\" col=\"col\" row=\"row\" row-index=\"row.index\" col-index=\"col.colDef.index\">{{row.entity[col.field]}}</div></div>",
Related
I'm very new to web development just let you know.
I'm working on an app with reactJS and i'm trying to style a component I build.
ag-grid provides alot of icons and themes.
I'm trying to use a theme from ag-grid to style my component like this :
<div className='ag-theme-balham-dark'>
<button className="ag-icon-asc" />
</div>
both are calss that are provided in the css I imported but all I get is a black box (not an arrow - which I excpected)
does this approch for adding an icon makes scence?
I am trying to style my custom joomla component but found out using standard bootstrap syntax is not working.
I tried the following:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
</div>
</div>
</div>
But the columns are stacked under eachother. I tried adding the bootstrap CDN in my component page, but the Joomla menu falls apart when doing that.
What can I do to make bootstrap work?
The default Joomla 3.x templates and many third party Joomla templates use Bootstrap 2 so Bootstrap 3 or 4 column classes won't necessarily work.
You have a few options:
Use column classes from the version of Bootstrap that is being loaded on your Joomla website
Replace the version of Bootstrap that is being loaded with Bootstrap 4 using a third party extension e.g. Toggle Bootstrap (free) or jQuery Easy (free) or similar
Manually code a solution to replace the version of Bootstrap that is being loaded with Bootstrap 4 (for some example code for this, see the answers to https://joomla.stackexchange.com/q/4953/120)
Change to a Bootstrap 4 template such as JoomShaper Helix Ultimate (free)
I recommend the last option at this will put you in good shape for the upgrade to Joomla 4 within the next 12 months or so. Joomla 4 will use Bootstrap 4.
col-md-x will only activate on medium screen sizes (768px) or higher since bootstrap is a mobile first approach. Try changing col-md-4 and col-md-8 to col-4 and col-8
I am looking a at large project that used Foundation version 4.x . This project has used the grid extensively: almost all HTML pages have
css classes from version 4x such as
row, large-12 columns, panel, callout
I am trying to figure out a few basic methods to transition ?
question :are row, columns and panel classes still supported ?
how to translate old row and column to new grid classes i.e. if I have a
<div class="row>
<div class="large-12 columns">
what is the equivalent in Foundation 6?
The Flex Grid or Float Grid is supported still, however you need to import Foundation slightly differently.
To use the Float Grid in Foundation v6.4+, you need to:
In CDN link or package managers: import foundation-float.css in place of foundation.css.
In Sass: set both $xy-grid and $global-flexbox to false.
To use the Flex Grid in Foundation v6.4+, you need to:
In CDN link or package managers: import foundation-flex.css in place of foundation.css.
In Sass: set $xy-grid to false.
To update your HTML to use the XY Grid
Based on the example you have given, the most direct 'conversion' would be:
<div class="grid-x">
<div class="cell">
You can learn more about the XY Grid system here
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>"
);
Bootstrap 2 metro theme uses onTablet and onDesktop html attributes like in
https://github.com/jiji262/Bootstrap_Metro_Dashboard/blob/master/index.html#L386
<div class="span3 statbox purple" onTablet="span6" onDesktop="span3">
I converted this theme to Bootstrap 3 using online auto converter. Those attributes are not changed and appear now as
<div class="col-md-3 statbox purple" ontablet="col-md-6" ondesktop="col-md-3">
I searched html specs and this metro theme source code but havent found any references to those.
Why those attributes are used and is it safe to remove them ?
From http://pydoc.net/ I found these attributes being used as Bools for display of the twitter bootstrap nav-bar component.
""" Create a twitter bootstrap responsive nav-bar component
**Key Arguments:**
- ``shade`` -- if dark then colors are inverted [ False | 'dark' ]
- ``brand`` -- the website brand [ image | text ]
- ``outsideNavList`` -- nav-list to be contained outside collapsible content
- ``insideNavList`` -- nav-list to be contained inside collapsible content
- ``htmlId`` --
- ``onPhone`` -- does this container get displayed on a phone sized screen
- ``onTablet`` -- does this container get displayed on a tablet sized screen
- ``onDesktop`` -- does this container get displayed on a desktop sized screen
**Return:**
- ``navBar`` -- """
They are used for describing how to display the tag on different devices. It is probably safe to remove them if you want your tag to be displayed the same no matter the device.
But if they are used in the .js they should remain so as not to damage JavaScript functionality.