utilmind
Repos
46
Followers
8
Following
8

Events

issue comment
z-index of .sticky-top is above the .dropdown-menu

Hello I am new to open source I want to contribute to this repo on this issue can you please tell me in which file this problem is present

The fix should be applied to /scss/_variables.scss (if it will not be declined by reason I'm not aware yet).

Z-index for dropdown menus specified in $zindex-dropdown variable:

$zindex-dropdown: 1000 !default;

Created at 2 weeks ago
opened issue
z-index of .sticky-top is above the

Prerequisites

Describe the issue

.dropdown-menu with z-index: 1000 (or 1001 on BS4), appears under the .sticky-top panel (with z-index 1020), even is sticky-top in normal, "unsticky" state.

Reduced test cases

The following screenshot demonstrates the issue: https://utilmind.com/stuff/zindex-issue.png better than code examples.

You can see that sticky panel with labels "Retail", "Agency" and "Production cost" overlaps the dropdown menu that appears after clicking the "Columns" button over the "Bootstrap-table".

The following CSS fixing the issue, but this fix probably should be canonical. Dropdown menus must appear above the sticky panels.

.dropdown-menu {
    z-index: 1030 !important; /* default is 1001 on BS4 or 1000 on BS5 */
}

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome, Safari, Firefox, Microsoft Edge, Opera

What version of Bootstrap are you using?

Tested on v4.6 and v5.2, this issue applies to both

Created at 2 weeks ago

Update README.md

Created at 2 weeks ago

a couple more optimizations to avoid slower concat()'s during translation to es5

Created at 2 weeks ago
Extension "editable", HTML-formatted values

Updated pull request also contains minor performance optimization to avoid usage of concat() method, that appearing upon translation from es6 to es5 syntax.

Created at 2 weeks ago
Fix #6399, HTML-formatted editable fields, issue #6399

Hello @UtechtDustin !

Example provided at https://live.bootstrap-table.com/code/utilmind/12883 (see window.tablePrice() method and Price column in the table, with broken HTML formatting due to unescaped "-characters within attributes of the HTML tag).

The source code also updated with minor optimization to avoid conversion of template literals to slow concat()'s, during es6 -> es5 translation. (MDN recommends to use the string concatenation operators (+, +=) instead of concat() method for perfomance reasons. Discussion at https://stackoverflow.com/questions/16124032/js-strings-vs-concat-method).

Created at 2 weeks ago

Source code update with minor optimization to fix issue #6399

Created at 2 weeks ago
Extension "editable", HTML-formatted values

Hi @UtechtDustin!

Here is example of my usage case: https://live.bootstrap-table.com/code/utilmind/12883

Created at 2 weeks ago
Fix #6399, HTML-formatted editable fields, issue #6399

Please update changelog, if this merge request will be accepted. Thanks!

Created at 2 weeks ago
pull request opened
Fix #6399, HTML-formatted editable fields, issue #6399

Fix described on https://github.com/wenzhixin/bootstrap-table/issues/6399

🤔Type of Request

  • [ ] Bug fix
  • [ ] New feature
  • [ X] Improvement
  • [ ] Documentation
  • [ ] Other

🔗Resolves an issue?

📝Changelog

  • [ ] Core
  • [ ] Extensions

💡Example(s)?

☑️Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • [ ] Doc is updated/provided or not needed
  • [ ] Demo is updated/provided or not needed
  • [ ] Changelog is provided or not needed
Created at 2 weeks ago

HTML-formatted editable fields, issue #6399

Fix described on https://github.com/wenzhixin/bootstrap-table/issues/6399

Created at 2 weeks ago
Created at 2 weeks ago
Extension "editable", HTML-formatted values

Description

Hello! Unfortunately "editable" extension doesn't allow displaying of HTML-formatted custom values. Here is the quick fix...

Original code in "bootstrap-table-editable.js":

return "<a href=\"javascript:void(0)\"\n data-name=\"".concat(column.field, "\"\n data-pk=\"").concat(row[_this.options.idField], "\"\n data-value=\"").concat(result, "\"\n ").concat(editableDataMarkup.join(''), "></a>"); The fix is:

              return "<a href=\"javascript:void(0)\"\n            data-name=\"".concat(column.field, "\"\n            data-pk=\"").concat(row[_this.options.idField], "\"\n            data-value=\"")
                  .concat(undefined === value ? "" : value, "\"\n            ")
                  .concat(editableDataMarkup.join(''), ">"+result+"</a>");

So it displaying correct HTML-formatted result and still have correct value in the data-value attribute.

P.S. Also I wish I could set up all dataset programmatically, to be able to pass the function to data-pk value, but this is more complicated, will require fixes in the main "bootstrap-table.js"...

Created at 2 weeks ago
Created at 1 month ago
Created at 1 month ago
Created at 1 month ago
Created at 2 months ago
Created at 2 months ago