New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dialog popup overflow/scrollbars #1246

Closed
luke-c-sargent opened this Issue Oct 29, 2018 · 5 comments

Comments

Projects
None yet
3 participants
@luke-c-sargent
Copy link

luke-c-sargent commented Oct 29, 2018

  • JBrowse version: release 1.15.4, 1.15.3
  • Web browser being used: firefox, chrome

when viewing a track's details (via left-click or the right-click menu), the window's contents are too big for the div created, and as such scrollbars are created:

screen shot 2018-10-29 at 12 03 17 pm

i have made some changes in a forked repo's branch mostly trying to remove explicit sizing in favor of automatic sizing, and enlarging the percentage of the screen the dialog pop-up gets. this yields a nicer-looking (to me) window. I've broken up some of the values with word-wrap: break-word, but having scroll within the window's textarea is an option too (it seemed less visually appealing to me, but there could be practical reasons to not do this).

screen shot 2018-10-29 at 12 00 49 pm

is this a reasonable way to go about addressing these concerns? if so, other, i am happy to issue a PR, though similar dialog pop-ups should probably be styled the same way. if not, are there better means of correcting the overflow/scrollbar issue?

thanks!

@cmdcolin

This comment has been minimized.

Copy link
Contributor

cmdcolin commented Oct 30, 2018

I know that there are some CSS selectors that apply word wrap on specific fields in the popup like this

css/dialog.scss

/*
 force long sequences in feature and alignment detail dialogs to
 wrap at 45em
*/
.detail .value.seq,
 .detail .value.sequence {
    word-wrap: break-word;
    width: 45em;
}

In the interim, I might add your fields like

.detail .value.seq,
.detail .value.subject,
.detail .value.query,
 .detail .value.sequence {
    word-wrap: break-word;
    width: 45em;
}

I see your proposed changes apply word-wrap on all value fields which seems fairly reasonable and might be something worth considering...

@rbuels

This comment has been minimized.

Copy link
Collaborator

rbuels commented Nov 2, 2018

@luke-c-sargent could you submit a pull request with those changes? this will just make it easier for us to test and review it.

one review issue I can already see: could you remove the use of the !important tags? those tend to cause a lot of problems with people's custom CSS, etc

@rbuels rbuels added the bug label Nov 2, 2018

@luke-c-sargent

This comment has been minimized.

Copy link

luke-c-sargent commented Nov 6, 2018

i will reform my approach and submit a pull request when things are more orderly; unsurprisingly, !important were causing up (down?)-stream changes that were unintended.

@cmdcolin

This comment has been minimized.

Copy link
Contributor

cmdcolin commented Nov 20, 2018

My paired_read_tracks branch contains logic that applies the width 45em and break-word when the length of string is over 70 and contains no spaces. The reason for the conditional is because if it is applied for all fields then it puts all fields on a newline which was

@rbuels

This comment has been minimized.

Copy link
Collaborator

rbuels commented Dec 7, 2018

closing, this is fixed in #1235

@rbuels rbuels closed this Dec 7, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment