Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Word Wrap in a js popup/drop-down


ArtcoInc

Recommended Posts

In my prior thread,

I asked how to move the drop-down list created by a .js trigger. Thank you, @burt for the answer :smile:

Once I was able to address the search suggestions in the large screen mode, I then shifted to the small screen mode. I needed to cancel the CSS changes I had made for large screen mode, and instead of setting a fixed width for the drop-down, I set it to 100% of the SM and XS screen. This is now all working fine, except ....

On *very* small screens, sometimes the length of the displayed text is wider than the screen. This creates a left-right scroll bar just for the search results. I'd like to enable some type of word-wrap for the results, only when in SM and XS modes, and only when the text is wider than the screen.

Right now, my CSS is:
 

.typeahead.dropdown-menu {
  width: 500px;
  left: -290px !important;
}

@media (max-width: 767px) {
  .typeahead.dropdown-menu {
    width: 100%;
    left: 0px !important;
    overflow-wrap: break-word !important;
  }

  .typeahead.dropdown-menu > li > a > table > tbody > tr {
    overflow-wrap: break-word !important;
  }
}

The first four lines address the location of the Search suggestion drop-down in large screen modes. The remainder is for the SM and XS screen modes.

This part works fine:

@media (max-width: 767px) {
  .typeahead.dropdown-menu {
    width: 100%;
    left: 0px !important;
  }
} 

It's the overflow-wrap: break-word that I can't get to work. Here's what the generated HTML code looks like in inspector:

59bf066f3b2e6_ScreenCapture-09-17-2017.JPG.20fa3f2ea466769953e6fad7eaa338d6.JPG

(the li.active only means that the first row is highlighted)

I've tried putting overflow-wrap: break-word under:

  .typeahead.dropdown-menu {

and

  .typeahead.dropdown-menu > li > a > table > tbody > tr {

and everything in between.

Any suggestions on how to resolve this last issue? Thanks in advance!

Malcolm

Link to comment
Share on other sites

*** Solution ***

(I hope :rolleyes:)
 

.typeahead.dropdown-menu {
  width: 500px;
  left: -290px !important;
}

@media (max-width: 767px) {
  .typeahead.dropdown-menu {
    width: 100%;
    left: 0px !important;
  }

  .typeahead.dropdown-menu > li > a > table > tbody > tr {
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}

This seems to be working in Firefox, Chrome, and IE

Malcolm (keeping his fingers crossed)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...