nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

why aikau dashlet does not work in chrome browser

janaka1984

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?

Regards

Janaka

Find more posts tagged with

Accepted answers

ddraper

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...

Raise a feature request (I'm not sure that this qualifies a "bug") and we'll implement a solution as soon as we can
Create a pull request to fix the issue yourself and contribute the fix back to the main codebase
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.

All comments

mrks_js1

you will need to share some of that code.

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

janaka1984

Hi,

i have used following code on controller

model.jsonModel = {

rootNodeId: args.htmlid,

//pubSubScope: instance.object.id,

services: [

{

config: {

pubSubScope: instance.object.id

}

{

config: {

pubSubScope: siteServiceScope

}

widgets: [

{

config: {

title: "Upload Dashlet",

//bodyHeight: args.height || null,

//componentId: instance.object.id,

widgetsForToolbar: [],

widgetsForBody: [

{

id: "SHARE_VERTICAL_LAYOUT",

config:

{

pubSubScope: siteServiceScope,

// currentItem: {

// user: userData

// },

widgets: [

{

id: "DOCLIB_DOCUMENT_LIST",

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: [

{

config: {

additionalCssClasses: "bordered",

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

itemKey: "shortName",

widgetsForHeader: [

{

config: {

id: "titleTableHeader",

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

sortable: false

}

{

config: {

id: "descriptionTableHeader",

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

sortable: false

}

{

config: {

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

}

{

config: {

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

}

{

config: {

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

}

widgets: [

{

config: {

widgets: [

{

config: {

//additionalCssClasses: "siteName mediumpad",

width:"70px",

widgets: [

{

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"

}

]

}

{

config: {

additionalCssClasses: "mediumpad",

width:"50px",

widgets: [

{

config: {

propertyToRender: "description",

renderAsLink: false

}

]

}

{

config: {

additionalCssClasses: "visibility smallpad",

widgets: [

{

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"}

]

}

]

}

{

config: {

additionalCssClasses: "siteManager mediumpad",

widgets: [

{

config: {

propertyToRender: "userIsSiteManager",

renderAsLink: false

}

]

}

{

config: {

additionalCssClasses: "actions smallpad",

widgets: [

{

align: "left",

config: {

widgets: [

{

config: {

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

widgets: [

{

config: {

additionalCssClasses: "unmargined",

widgets: [

{

config: {

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

iconClass: "alf-delete-icon",

publishTopic: "ALF_DELETE_SITE"

}

{

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

}

]

}

]

}

]

}

]

}

]

}

]

}

]

}

]

}

{

config: {

pubSubScope: siteServiceScope,

widgets: [

{

id: "DOCLIB_PAGINATION_MENU",

widthCalc: 430

}

]

}

]

}

]

}

]

};

ddraper

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.

janaka1984

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

{

config: {

additionalCssClasses: "siteName mediumpad",

width:"70px",

widgets: [

{

ddraper

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

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