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

Can I position esriBookmarkEditBox in Bookmarks digit?

JoanneMcGraw

Due to requirements to include a corporate header/footer, users can scroll on our web pages to make the map <div> fill the viewable area of the browser and then we display the various digits we use in floating/collapsible dialogs on top of the map. This presents a problem with the Bookmarks digit because the esriBookmarkEditBox's CSS sets its "position: fixed;" which only considers the screen's viewport, not what is actually visible, in positioning the text field to name the bookmark. In our pages, when the user tries to "Add Bookmark" (or edit an existing one), the text field does not display in the appropriate place. The attached picture illustrates this. Here, the text field is offset by approximately 250px (the size of our corporate header). [ATTACH=CONFIG]17421[/ATTACH]

I've already done some changes to the CSS to get the digit to appear in the dialog as we'd like, but simply changing the position CSS for the esriBookmarkEditBox class (my only other options are "static", "relative", "absolute" and "inherit") isn't enough. I'm trying to figure out if there is some way I can dynamically set the top and left of that div when it's added myself but can't figure a way to get access to it. The onEdit event isn't fired until after the field has been edited and the change is being applied (I was thinking that if it was fired when the editing started I might be able to change the position to absolute and then set it's top and left where I needed it to be somehow).

Anyway, if someone can provide some suggestions to look into, I'd appreciate it. At this point, we're looking at having to re-write the digit simply because of this problem and we'd prefer to avoid that, if possible.

Cheers
jtm

Image1.png

Vind meer berichten getagd met

Accepted answers

JoanneMcGraw

Not pretty, but it works...first the styling:

.esriBookmarkEditBox {     font-size: 12px;     height: 20px;     position: relative;     width: 180px; }

I override the CSS definition for esriBookmarkEditBox and set the position to "relative" (as well as increase the height of the INPUT element to 20px).

Then, in the code:

var bookmarks = new esri.dijit.Bookmarks(     {         map: map         ,bookmarks: []         ,editable: true     }     ,dojo.byId(this.panel.getContentTarget().id) );  bookmarks._editBookmarkLabel = function(e){     bookmarks.constructor.prototype._editBookmarkLabel.call(bookmarks, e);     var inputs = bookmarks.bookmarkDomNode.getElementsByTagName("input")     if (inputs.length > 0){         inputs[0].style.left = "0px";         inputs[0].style.top = "-" + inputs[0].scrollHeight + "px";     } };

After the bookmarks dijit is instantiated, I override the _editBookmarkLabel for that particular instance with a function of my own. Within my function, I have a call to the original _editBookmarkLabel functionality still available in the prototype of the instance. When that is finished, the INPUT DIV exists and my function gets it from the bookmarkDomNode element and changes it's style's left and top values.

Works in Firefox v15 and IE 9; haven't tried anything else.

If someone knows of a better or more correct way of intercepting the _editBookmarkLabel functionality, I would appreciate hearing about it. For now, since this appears to be working with no particularly adverse effects, I'm marking this thread solved and giving myself a hundred points.

Cheers,
jtm

All comments

JoanneMcGraw

Not pretty, but it works...first the styling:

.esriBookmarkEditBox {     font-size: 12px;     height: 20px;     position: relative;     width: 180px; }

I override the CSS definition for esriBookmarkEditBox and set the position to "relative" (as well as increase the height of the INPUT element to 20px).

Then, in the code:

var bookmarks = new esri.dijit.Bookmarks(     {         map: map         ,bookmarks: []         ,editable: true     }     ,dojo.byId(this.panel.getContentTarget().id) );  bookmarks._editBookmarkLabel = function(e){     bookmarks.constructor.prototype._editBookmarkLabel.call(bookmarks, e);     var inputs = bookmarks.bookmarkDomNode.getElementsByTagName("input")     if (inputs.length > 0){         inputs[0].style.left = "0px";         inputs[0].style.top = "-" + inputs[0].scrollHeight + "px";     } };

JoanneMcGraw

A more flexible approach for this digit might be to set the esriBookmarkEditBox position CSS to "relative" and set the style for the DIV created in _editBookmarkLabel to be "left: 0px; top: -<height of esriBookmarkEditBox>px;". Then, the functionality would be same as it is now and page scrolling wouldn't adversely affect it. However, perhaps that is the intended and preferred implementation, in which case it's working as designed. Unfortunately, as designed isn't what I need.

So, can I make these changes myself? I know I can change the CSS to "relative" successfully. Is there some way I can intercept the calls to _editBookmarkLabel with a function I create that first calls that original _editBookmarkLabel function and then runs a couple of lines of code in my function where I set the left and top values of the DIV's INPUT element to 0 and the negative of the INPUT's "height" so it is displayed over the text it is replacing?

Cheers
jtm

JoanneMcGraw

I've also tried (among others with less promising results):

esri.dijit.Bookmarks.prototype._editBookmarkLabel = function(e){
    :
};

var bookmarks = new esri.dijit.Bookmarks(...);
bookmarks.__proto__._editBookmarkLabel = function(e){
    :
};

The closest ones all give an error with the second line because the "_2" object is not defined (as noted in the previous post at this line "var _2c = _2.position(_2b, true);").

Cheers
jtm

JoanneMcGraw

Okay, well, I'm continuing to try to figure out a way to do something about this positioning of the esriBookmarkEditBox in a scrollable page and it has led me to another, broader question that I'm hoping someone can help me with. While it is still specific to the problem I am currently trying to solve, I can see it would be a useful thing to be able to do in general.

Is there a way to override a single function within the ESRI JSAPI? That is, I am looking at the function where my particular problem exists (in Bookmark.js' _editBookmarkLabel) and am wondering if there is a way I can do something like this:

var bookmarks = new esri.dijit.Bookmarks(
    {
        map: map
        ,bookmarks: []
        ,editable: true
    }
    ,dojo.byId("divBookmarks")
);
bookmarks._editBookmarkLabel = function(e){
    // where the code of the function is essentially the same as what is already
    // in esri.digit.Bookmark._editBookmarkLabel, with the exception of the 
    // style values for the INPUT DIV's creation
}

I have tried above, but simply get a message that _2 is not defined when it hits the second line of the function:

var _2c = _2.position(_2b, true);

It's possible some type of JavaScript prototyping might do the trick, but so far I haven't been able to figure out the correct syntax to get it to run my function with object properly.

Alternatively, if this is not possible, could someone put me out of my misery and tell me so I can stop wasting time trying to figure out how to accomplish an impossibility and just rewrite the digit?

Cheers,
jtm

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.