implementation for the Layout Misalignment in Safari for Custom Exam … #120
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
…Sheet #101
Fixes #101
The issue was not only with safari i have faced the same issue with the firefox too, Below are the changes described in the code.
What was changed?
In the CustomExamSheetComponent.tsx of the application, modifications were made to the CSS for the exam generation feature. The updates include changes to the .questions-container, where the column-count was reduced from 4 to 2, and the column-fill property was changed from auto to balance to ensure a more balanced distribution of content across columns, and also used the webkit with property avoid, Additionally the width of the .questions-container and .info-container was adjusted to better fit the reduced column count.
Webkit properties for CSS columns: Adjustments were made to how columns break to prevent layout issues specifically in browsers like Safari and Firefox.
Why was it changed?
The changes were implemented to address several layout issues observed in Firefox and Safari where:
Questions in the exam sheet were misaligned.
The changes were implemented to address layout issues within the generated exam sheets. Previously, questions were distributed unevenly. The new column settings ensure a more aesthetically pleasing and functional layout by balancing the distribution of questions across the available space.
How was it changed?
File Modified: CustomExamSheetcomponent.tsx
In .questions-container:
column-count was changed from 4 to 2 to reduce the number of columns.
column-fill was changed from auto to balance to ensure even distribution of content across the columns.
The width property was added and set to 230px to better control the layout with the new column configuration.
In .info-container:
The width was adjusted from 350px to 250px to align with the changes in layout and ensure it does not overlap or create unnecessary white space.
Added -webkit-column-break-inside: avoid; for better control in WebKit-based browsers, ensuring that questions do not split across columns.
Added -webkit-column-fill: balance; to complement the standard column-fill property in the .questions-container. This ensures that the column content distribution works as expected in WebKit-based browsers.
Used -webkit-column-count: 2; alongside the standard column-count for consistent behavior across browsers.
Applied -webkit-column-break-inside: avoid; to .question to prevent breaks within a question across columns, particularly in WebKit browsers. This is crucial for maintaining a coherent question layout during the display and print processes.
Screenshots that show the changes (if applicable):
Previous screenshots-
After updating code screenshots-
Note- Make sure to keep the full screen of safari and firefox browser before printing now the custom exam sheet can print the questions-continer without overlapping with the student-info continer you can print with A4,A3 sheets without any issue.