On a laptop with a screen of 768px height I can't see "Save code" button in the code editor. #535

Closed
opened 2026-02-04 20:51:21 +03:00 by OVERLORD · 6 comments
Owner

Originally created by @mrEvgenX on GitHub (Dec 31, 2017).

  • BookStack Version: v0.19.0
  • PHP Version: 7.0.25
  • MySQL Version: 5.7.20
Expected Behavior

When I'm finishing edit code in "code block" popup window I'd like to see save button.

Current Behavior (as clear as possible now)

When I'm seeing a page it's okay
1

When I'm editing the page I choose "Code block"
2

Finally in the popup window to edit the code a laptop has not enough height to display the button "save code".
3

Also code-preview doesn't work in edit-page mode (gray rectangle on the screenshot below).
4

Steps to Reproduce

Reproducible on devices with low height

  • Create a page
  • Choose type of code block
  • See popup window
Originally created by @mrEvgenX on GitHub (Dec 31, 2017). * BookStack Version: v0.19.0 * PHP Version: 7.0.25 * MySQL Version: 5.7.20 ##### Expected Behavior When I'm finishing edit code in "code block" popup window I'd like to see save button. ##### Current Behavior (as clear as possible now) When I'm seeing a page it's okay ![1](https://user-images.githubusercontent.com/7001567/34460107-a7a4282c-ee37-11e7-8bd6-07f4af5f891f.png) When I'm editing the page I choose "Code block" ![2](https://user-images.githubusercontent.com/7001567/34460108-a7c4e6e8-ee37-11e7-8955-c78c73db32b8.png) Finally in the popup window to edit the code a laptop has not enough height to display the button "save code". ![3](https://user-images.githubusercontent.com/7001567/34460109-a7e66a66-ee37-11e7-8021-6c1836d5d855.png) Also code-preview doesn't work in edit-page mode (gray rectangle on the screenshot below). ![4](https://user-images.githubusercontent.com/7001567/34460110-a808c35e-ee37-11e7-8de5-e81ac7c2afdc.png) ##### Steps to Reproduce Reproducible on devices with low height - Create a page - Choose type of code block - See popup window
Author
Owner

@cthoennessen commented on GitHub (Jan 5, 2018):

Thank you so much for mentioning this issue here! I almost desperated about how to save the code. After reading this I zoomed out and suprise, there is a secret save button! 😄

@cthoennessen commented on GitHub (Jan 5, 2018): Thank you so much for mentioning this issue here! I almost desperated about how to save the code. After reading this I zoomed out and suprise, there is a secret save button! 😄
Author
Owner

@Abijeet commented on GitHub (Jan 5, 2018):

I guess adding a scroll-bar to the modal will be an acceptable solution.

@Abijeet commented on GitHub (Jan 5, 2018): I guess adding a scroll-bar to the modal will be an acceptable solution.
Author
Owner

@Abijeet commented on GitHub (Jan 5, 2018):

Although adding a scroll-bar to the modal although is a fairly simple solution, it causes two scroll-bars to appear on the popup if the content in the code editor is more.

screen shot 2018-01-06 at 01 38 23

@ssddanbrown - Any ideas?

@Abijeet commented on GitHub (Jan 5, 2018): Although adding a scroll-bar to the modal although is a fairly simple solution, it causes two scroll-bars to appear on the popup if the content in the code editor is more. ![screen shot 2018-01-06 at 01 38 23](https://user-images.githubusercontent.com/1685517/34626366-677a3e40-f282-11e7-9617-cd867121a01a.png) @ssddanbrown - Any ideas?
Author
Owner

@Shackelford-Arden commented on GitHub (Jan 5, 2018):

Just a thought here... Would it be possible to move the save button to right underneath the X or to the left of it on smaller screens? @Abijeet

@Shackelford-Arden commented on GitHub (Jan 5, 2018): Just a thought here... Would it be possible to move the save button to right underneath the X or to the left of it on smaller screens? @Abijeet
Author
Owner

@Abijeet commented on GitHub (Jan 6, 2018):

@Shackelford-Arden - Not sure, following images are taken on a Google Nexus 5 and 4, below the X is not an option.

screen shot 2018-01-06 at 21 20 03
screen shot 2018-01-06 at 21 19 58

Regarding putting it to the left of the close icon, it would be different then rest of the dialogs in BookStack.

@ssddanbrown - I think we currently have 4 dialogs in BookStack,

  1. Insert link
  2. Insert image
  3. See page source code
  4. Insert code block

Insert image (2) is unique, it makes sense the way it is right now. 1 and 3 have a section at the bottom with OK and cancel buttons and I think 4 should also be similar. I know this is deviating of the topic but if we're going to be working on this issue we might as well deal with this inconsistency now.

Regarding the save button not visible issue, I've submitted a PR - #654 that adds a scroll bar if the content is too big for the screen.

@Abijeet commented on GitHub (Jan 6, 2018): @Shackelford-Arden - Not sure, following images are taken on a Google Nexus 5 and 4, below the X is not an option. ![screen shot 2018-01-06 at 21 20 03](https://user-images.githubusercontent.com/1685517/34641270-7447692c-f327-11e7-8c4f-eee9b03a90b6.png) ![screen shot 2018-01-06 at 21 19 58](https://user-images.githubusercontent.com/1685517/34641271-746f7408-f327-11e7-80d9-39f1bab5e2ba.png) Regarding putting it to the left of the close icon, it would be different then rest of the dialogs in BookStack. @ssddanbrown - I think we currently have 4 dialogs in BookStack, 1. Insert link 2. Insert image 3. See page source code 4. Insert code block Insert image (2) is unique, it makes sense the way it is right now. 1 and 3 have a section at the bottom with OK and cancel buttons and I think 4 should also be similar. I know this is deviating of the topic but if we're going to be working on this issue we might as well deal with this inconsistency now. Regarding the save button not visible issue, I've submitted a PR - #654 that adds a scroll bar if the content is too big for the screen.
Author
Owner

@Shackelford-Arden commented on GitHub (Jan 7, 2018):

I wish I knew enough to help more!

@Shackelford-Arden commented on GitHub (Jan 7, 2018): I wish I knew enough to help more!
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#535