Skip to content
This repository was archived by the owner on Sep 6, 2021. It is now read-only.

Make html menus scroll to avoid truncation #7731

Merged
merged 1 commit into from
May 2, 2014
Merged

Make html menus scroll to avoid truncation #7731

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/styles/brackets_patterns_override.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,11 @@ a:focus {
> li {
float: left;
}
.dropdown-menu {
//max-height: calc(~"100vh - 34px"); doesn't seem to work...
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

won't calc (100% - 34px); work?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

or I wonder if you just don't need the quotes max-height: calc(100vh - 34px);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See the discussions in #7693.

calc(100vh - 34px) doesn't work in LESS because it tries to calculate the value at compile time (not run time).

The quotes are supposed to tell LESS to pass it through. I also tried in the LESS 1.7 branch (#6730), but it didn't work there either.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found an article that said to use ~"calc(100vh - 34px)" instead.

But, my brackets repo is hosed so I can't try it at the moment :(

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I figured the quotes part out but that's strange that it doesn't work pass through. I tried ~"100% - 34px" and that didn't work which surprised me.

One thing I notice is that if the window gets to a certain height, you can't scroll all the way to the bottom.

Another thing is that the height always extends to the bottom of the window. I tried various vh percentages and couldn't find anything that worked. 90vh seemed to work the best but still i won't then I figured out the quote problem.

If you change this to max-height: ~"90hv"; it works much better.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm thinking less is the problem. Can we just attach the property at startup?

What I'm seeing is that I think less is computing the height of the window at compile time so if you change the window height then you can't scroll to the bottom item if you make it shorter.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cropped_menu

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So that didn't fix it either.

If you resize brackets to its min-height (on windows anyway) and set the max-height: 77vh it will let you scroll to the bottom item of the stock edit menu. you can't do that with 90vh; Then again, this probably isn't a very common case and it does cause the menu to add a scrollbar when it there is enough room for the last item.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JeffryBooher ~"calc(100vh - 34px)" doesn't seem to work either.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@redmunds As I mentioned in the other issue, calc(~"100vh - 34px)" doesn't work because there is a bug in Blink, where calc doesn't work with viewport units. But according to this issue it is fixed in Chrome 34: https://code.google.com/p/chromium/issues/detail?id=168840. I would test it again when we merge the next CEF, but it might be fixed until the next update.

max-height: 90vh;
overflow-y: auto;
}
}
.title {
float: none;
Expand Down