cancel
Showing results for 
Search instead for 
Did you mean: 

why aikau dashlet does not work in chrome browser

janaka1984
Star Contributor
Star Contributor

Hi,

i need to reuse content of manag-sites.get.js on aikau dashlet. also i need to use InlineEditProperty with "site description" column.

all function and layout are working properly on firefox.

but when open dashlet on chrome browser and select "edit" button of InlineEditProperty, Save and Cancel Button does not position with row border of table. actually there is no margin .

how can i avoid this?

chrome.JPG

Regards

Janaka

1 ACCEPTED ANSWER

ddraper
World-Class Innovator
World-Class Innovator

It's because the HTML elements that provide those "Save" and "Cancel" buttons have no margin. The resolution to the problem would be to update the CSS for the widget to ensure that those elements have the same margin as the other elements. In more recent versions of Aikau you'll find that the "Save"/"Cancel" links have actually become buttons.

As with most Aikau issues you have a number of options...

  1. Raise a feature request (I'm not sure that this qualifies a "bug") and we'll implement a solution as soon as we can
  2. Create a pull request to fix the issue yourself and contribute the fix back to the main codebase
  3. Extend the widget and provide an additional CSS class that targets those elements within the widget

You may be tempted to just add some global CSS selectors to fix this, however this is not a recommended solution because it is not future proof and those selectors will not be scoped to the widget.

View answer in original post

5 REPLIES 5

mrks_js1
Star Contributor
Star Contributor

you will need to share some of that code.

is there any output in chrome js console when the page is being rendered?

Hi,

i have used following code on controller

model.jsonModel = {

   rootNodeId: args.htmlid,

   //pubSubScope: instance.object.id,

   services: [

      {

         name: "alfresco/services/SiteService",

         config: {

            pubSubScope: instance.object.id

         }

      },

      {

         name: "alfresco/dialogs/AlfDialogService",

         config: {

            pubSubScope: siteServiceScope

         }

      }

   ],

   widgets: [

      {

         name: "alfresco/dashlets/Dashlet",

         config: {

            title: "Upload Dashlet",

            //bodyHeight: args.height || null,

            //componentId: instance.object.id,

            widgetsForToolbar: [],

            widgetsForBody: [

               

                {

                 id: "SHARE_VERTICAL_LAYOUT",

                 name: "alfresco/layout/VerticalWidgets",

                 config:

                 {

                    pubSubScope: siteServiceScope,

                    // currentItem: {

                       // user: userData

                    // },

                    widgets: [

                       {

                          id: "DOCLIB_DOCUMENT_LIST",

                          name: "alfresco/documentlibrary/AlfSitesList",

                          config: {

                             useHash: false,

                             sortAscending: true,

                             sortField: "title",

                             usePagination: true,

                             dataRequestTopic: "ALF_GET_SITES_ADMIN",

                             // renderFilterMethod: "ANY",

                             // renderFilter: [

                                // {

                                   // property: "user.groups.GROUP_ALFRESCO_ADMINISTRATORS",

                                   // values: [true]

                                // },

                                // {

                                   // property: "user.groups.GROUP_SITE_ADMINISTRATORS",

                                   // values: [true]

                                // },

                                // {

                                   // property: "user.isAdmin",

                                   // values: [true]

                                // },

                                // {

                                   // property: "user.isNetworkAdmin",

                                   // values: [true]

                                // }

                             // ],

                             widgets: [

                                {

                                   name: "alfresco/documentlibrary/views/AlfDocumentListView",

                                   config: {

                                      additionalCssClasses: "bordered",

                                      noItemsMessage: msg.get("message.no-sites"),

                                      itemKey: "shortName",

                                      widgetsForHeader: [

                                         {

                                            name: "alfresco/documentlibrary/views/layouts/HeaderCell",

                                            config: {

                                               id: "titleTableHeader",

                                               label: msg.get("message.site-name-header-label"),

                                               sortable: false

                                            }

                                         },

                                         {

                                            name: "alfresco/documentlibrary/views/layouts/HeaderCell",

                                            config: {

                                               id: "descriptionTableHeader",

                                               label: msg.get("message.site-description-header-label"),

                                               sortable: false

                                            }

                                         },

                                         {

                                            name: "alfresco/documentlibrary/views/layouts/HeaderCell",

                                            config: {

                                               label: msg.get("message.visibility-header-label")

                                            }

                                         },

                                         {

                                            name: "alfresco/documentlibrary/views/layouts/HeaderCell",

                                            config: {

                                               label: msg.get("message.manager-header-label")

                                            }

                                         },

                                         {

                                            name: "alfresco/documentlibrary/views/layouts/HeaderCell",

                                            config: {

                                               label: msg.get("message.actions-header-label")

                                            }

                                         }

                                      ],

                                      widgets: [

                                         {

                                            name: "alfresco/documentlibrary/views/layouts/Row",

                                            config: {

                                               widgets: [

                                                  {

                                                     name: "alfresco/documentlibrary/views/layouts/Cell",

                                                     config: {

                                                        //additionalCssClasses: "siteName mediumpad",

                                                        width:"70px",

                                                        widgets: [

                                                           {

                                                              name: "alfresco/renderers/InlineEditPropertyLink",

                                                              config: {

                                                                 //renderedValueClass: "alfresco-renderers-Property pointer",

                                                                 publishGlobal: true,

                                                                 propertyToRender: "title",

                                                                 publishTopic: "ALF_NAVIGATE_TO_PAGE",

                                                                 useCurrentItemAsPayload: false,

                                                                 publishPayloadType: "PROCESS",

                                                                 publishPayloadModifiers: ["processCurrentItemTokens"],

                                                                 publishPayload: {

                                                                    url: "site/{shortName}/dashboard",

                                                                    type: "SHARE_PAGE_RELATIVE"

                                                                 }

                                                              }

                                                           }

                                                        ]

                                                     }

                                                  },

                                                  {

                                                     name: "alfresco/documentlibrary/views/layouts/Cell",

                                                     config: {

                                                        additionalCssClasses: "mediumpad",

                                                        width:"50px",

                                                        widgets: [

                                                           {

                                                              name: "alfresco/renderers/InlineEditProperty",

                                                             

                                                              config: {

                                                                 propertyToRender: "description",

                                                                 renderAsLink: false

                                                              }

                                                           }

                                                        ]

                                                     }

                                                  },

                                                  {

                                                     name: "alfresco/documentlibrary/views/layouts/Cell",

                                                     config: {

                                                        additionalCssClasses: "visibility smallpad",

                                                        widgets: [

                                                           {

                                                              name: "alfresco/renderers/PublishingDropDownMenu",

                                                              config: {

                                                                 additionalCssClasses: "unmargined no-title",

                                                                 publishTopic: "ALF_UPDATE_SITE_DETAILS",

                                                                 publishPayloadType: "BUILD",

                                                                 publishPayload: {

                                                                    shortName: {

                                                                       alfType: "item",

                                                                       alfProperty: "shortName"

                                                                    },

                                                                    visibility: {

                                                                       alfType: "payload",

                                                                       alfProperty: "value"

                                                                    }

                                                                 },

                                                                 propertyToRender: "visibility",

                                                                 optionsConfig: {

                                                                    fixed: [

                                                                       {label: msg.get("message.site-visibility-dropdown-public-label"), value: "PUBLIC"},

                                                                       {label: msg.get("message.site-visibility-dropdown-moderated-label"), value: "MODERATED"},

                                                                       {label: msg.get("message.site-visibility-dropdown-private-label"), value: "PRIVATE"}

                                                                    ]

                                                                 }

                                                              }

                                                           }

                                                        ]

                                                     }

                                                  },

                                                  {

                                                     name: "alfresco/documentlibrary/views/layouts/Cell",

                                                     config: {

                                                        additionalCssClasses: "siteManager mediumpad",

                                                        widgets: [

                                                           {

                                                              name: "alfresco/renderers/Boolean",

                                                              config: {

                                                                 propertyToRender: "userIsSiteManager",

                                                                 renderAsLink: false

                                                              }

                                                           }

                                                        ]

                                                     }

                                                  },

                                                  {

                                                     name: "alfresco/documentlibrary/views/layouts/Cell",

                                                     config: {

                                                        additionalCssClasses: "actions smallpad",

                                                        widgets: [

                                                           {

                                                              name: "alfresco/menus/AlfMenuBar",

                                                              align: "left",

                                                              config: {

                                                                 widgets: [

                                                                    {

                                                                       name: "alfresco/menus/AlfMenuBarPopup",

                                                                       config: {

                                                                          label: msg.get("message.actions-header-label"),

                                                                          widgets: [

                                                                             {

                                                                                name: "alfresco/menus/AlfMenuGroup",

                                                                                config: {

                                                                                   additionalCssClasses: "unmargined",

                                                                                   widgets: [

                                                                                      {

                                                                                         name: "alfresco/menus/AlfMenuItem",

                                                                                         config: {

                                                                                            label: msg.get("button.site-delete.label"),

                                                                                            iconClass: "alf-delete-icon",

                                                                                            publishTopic: "ALF_DELETE_SITE"

                                                                                         }

                                                                                      },

                                                                                      {

                                                                                         name: "alfresco/menus/AlfMenuItem",

                                                                                         config: {

                                                                                            label: msg.get("button.site-manage.label"),

                                                                                            iconClass: "alf-password-icon",

                                                                                            publishTopic: "ALF_BECOME_SITE_MANAGER",

                                                                                            publishPayloadType: "BUILD",

                                                                                            publishPayload: {

                                                                                               site: {

                                                                                                  alfType: "item",

                                                                                                  alfProperty: "shortName"

                                                                                               }

                                                                                            },

                                                                                            renderFilter: [

                                                                                               {

                                                                                                  property: "userIsSiteManager",

                                                                                                  values: ["false"],

                                                                                                  renderOnAbsentProperty: true

                                                                                               }

                                                                                            ]

                                                                                         }

                                                                                      }

                                                                                   ]

                                                                                }

                                                                             }

                                                                          ]

                                                                       }

                                                                    }

                                                                 ]

                                                              }

                                                           }

                                                        ]

                                                     }

                                                  }

                                               ]

                                            }

                                         }

                                      ]

                                   }

                                }

                             ]

                          }

                       },

                       {

                          name: "alfresco/layout/CenteredWidgets",

                          config: {

                             pubSubScope: siteServiceScope,

                             widgets: [

                                {

                                   id: "DOCLIB_PAGINATION_MENU",

                                   name: "alfresco/documentlibrary/AlfDocumentListPaginator",

                                   widthCalc: 430

                                }

                             ]

                          }

                       }

                    ]

                 }

              }

            ]

         }

      }

   ]

};

ddraper
World-Class Innovator
World-Class Innovator

The column width (if not automatically set) will accommodate the initial content (essentially the table view is just rendering an HTML table!). When you toggle edit mode the table is not resizing. You can configure the "Cell" widget to have a fixed width so that it can fit the InlineEditProperty when switched to edit mode.

Hi,

i set fixed width into cell in first row as following.  but same thing is happening with chrome. when i toggle edit mode, i can see that it is resizing.  but there is no margin between button and bottom line of row

  {

          name: "alfresco/documentlibrary/views/layouts/Cell",

          config: {

             additionalCssClasses: "siteName mediumpad",

            width:"70px",

              widgets: [

                          {

                           name: "alfresco/renderers/InlineEditPropertyLink",

chrome.JPG

ddraper
World-Class Innovator
World-Class Innovator

It's because the HTML elements that provide those "Save" and "Cancel" buttons have no margin. The resolution to the problem would be to update the CSS for the widget to ensure that those elements have the same margin as the other elements. In more recent versions of Aikau you'll find that the "Save"/"Cancel" links have actually become buttons.

As with most Aikau issues you have a number of options...

  1. Raise a feature request (I'm not sure that this qualifies a "bug") and we'll implement a solution as soon as we can
  2. Create a pull request to fix the issue yourself and contribute the fix back to the main codebase
  3. Extend the widget and provide an additional CSS class that targets those elements within the widget

You may be tempted to just add some global CSS selectors to fix this, however this is not a recommended solution because it is not future proof and those selectors will not be scoped to the widget.