Which product are you using?
PDF.js Express Plus
PDF.js Express Version
8.4.7
Detailed description of issue
Hi,
We are trying to add custom elements using dev express controls like dropdown to the header section in the viewer. we were able to add ui control but the dropdown menu position is not with in the viewer iframe and its opening some where in the web application. is there any setting to bound in pdf express viewer?
Expected behaviour
NA
Does your issue happen with every document, or just one?
NA
Link to document
const renderbutton = () => {
const divElement = document.createElement('div');
divElement.id = 'searchDrpDwn';
divElement.style = 'width:150px';
let dropdownArray = allSearchTermsArray.map((s, i) => ({ elemId: s.elemId, description: s.description }));
$(divElement).dxTagBox({
dataSource: dropdownArray,
placeholder: "select search",
displayExpr: "description",
valueExpr:'elemId',
showSelectionControls: true,
searchEnabled: true,
maxDisplayedTags: 1,
value: searchTermsArray.map(c => c.elemId),
onValueChanged: function (data) {
instance.docViewer.clearSearchResults();
results = [];
searchDropDownClick(data.value);
instance.UI.openElements(['searchPanel']);
}
});
return divElement;
}
async function searchDropDownClick(selectedIdLst) {
for (var selectedElemId of selectedIdLst) {
await performSearch(allSearchTermsArray.find(k => k.elemId == selectedElemId));
}
}
const newCustomElement = {
type: 'customElement',
id: 'searchLst',
render: renderbutton
};
instance.UI.setHeaderItems((header) => {
let exiIndex = header.getItems().findIndex(item => item.id == 'searchLst');
if (exiIndex > -1) {
header.delete(exiIndex);
}
/*header.unshift(newCustomElement); */
header.push(newCustomElement);
});
Code snippet
{Provide a relevant code snippet}
