Latest News: (loading..)
Sign in to follow this  
Followers 0
ArtcoInc

Word Wrap in a js popup/drop-down

2 posts in this topic

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

Share this post


Link to post
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)

Edited by ArtcoInc

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0