Fix oppia#5982: Fixes modal overflow issue by using word-break proper…

…ty (oppia#5983) * Fixes modal overflow issue * Final fixes * Correction * Correction * Correction * Correction * Changes * Change to avoid overlap of text with selection arrow in add response modal * All overflows fixed. * Change * Alphabetized css * Alphabetized css
quantumferret · Dec 27, 2018 · e6a1c2a · e6a1c2a
1 parent 92c4ecf
commit e6a1c2a
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 9 deletions.
diff --git a/core/templates/dev/head/components/forms/html_select_directive.html b/core/templates/dev/head/components/forms/html_select_directive.html
@@ -1,13 +1,13 @@
 <div uib-dropdown class="oppia-html-select">
   <button uib-dropdown-toggle class="btn btn-default oppia-html-select-selection" type="button" aria-expanded="false" data-toggle="dropdown">
-    <div>
+    <div style="white-space: normal; word-break: break-all;">
       <angular-html-bind class="oppia-html-select-selection-element" html-data="options[getSelectionIndex()].val">
       </angular-html-bind>
     </div>
     <span class="caret oppia-html-select-selection-caret"></span>
   </button>
-  <ul uib-dropdown-menu style="width: inherit;">
-    <li ng-repeat="choice in options">
+  <ul uib-dropdown-menu style="max-width: 80%; overflow: auto; width: auto;">
+    <li ng-repeat="choice in options" style="float: left;">
       <a>
         <angular-html-bind class="oppia-html-select-option protractor-test-html-select-option" html-data="choice.val" ng-click="select(choice.id)">
         </angular-html-bind>
@@ -29,20 +29,22 @@
     bottom: 0;
     color: black;
     margin: auto;
+    overflow: auto;
     position: absolute;
     right: 5px;
     top: 0;
   }
   .oppia-html-select .oppia-html-select-selection {
+    overflow: hidden;
     padding-right: 20px;
     position: relative;
     text-decoration: none;
     width: inherit;
   }
   .oppia-html-select .oppia-html-select-option {
-    padding-top: 10px;
-    overflow: hidden;
     margin-right: 10px;
+    overflow: hidden;
+    padding-top: 10px;
   }
   .oppia-html-select .oppia-html-select-option:hover {
     background: #1485E6;

diff --git a/...emplates/dev/head/components/forms/schema_editors/schema_based_html_editor_directive.html b/...emplates/dev/head/components/forms/schema_editors/schema_based_html_editor_directive.html
diff --git a/core/templates/dev/head/components/response_header_directive.html b/core/templates/dev/head/components/response_header_directive.html
@@ -21,6 +21,13 @@
   response-header .oppia-nested-link {
     color: #0844aa;
     cursor: pointer;
+    display: inline-block;
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+    word-break: break-all;
+    word-wrap: break-word;
   }
   response-header .oppia-nested-link:hover {
     color: #3f2c76;
@@ -70,7 +77,7 @@
         ng-click="navigateToState(getOutcome().dest)" class="oppia-nested-link">
     <[getOutcome().dest]>
   </span>
-  <span ng-if="getOutcome() && !isOutcomeLooping() && isCreatingNewState()">
+  <span class="oppia-nested-link" ng-if="getOutcome() && !isOutcomeLooping() && isCreatingNewState()">
     <em ng-if="getOutcome().newStateName">(<[getOutcome().newStateName]>)</em>
     <em ng-if="!getOutcome().newStateName">Nowhere yet...</em>
   </span>

diff --git a/core/templates/dev/head/css/oppia.css b/core/templates/dev/head/css/oppia.css
@@ -825,6 +825,7 @@ textarea {
 .oppia-navbar-nav .uib-dropdown-menu {
   left: auto;
   right: 0;
+  word-break: break-all;
 }
 
 .oppia-dropdown-submenu > .uib-dropdown-menu {
@@ -1460,7 +1461,7 @@ pre.oppia-pre-wrapped-text {
 
 .oppia-editor-card-section {
   padding: 20px 50px 20px 35px;
-  word-break: break-word;
+  word-break: break-all;
 }
 
 .oppia-state-content {
@@ -1669,6 +1670,7 @@ pre.oppia-pre-wrapped-text {
 }
 
 .oppia-learner-view-card-content {
+  word-break: break-all;
   word-wrap: break-word;
 }
 
@@ -3055,7 +3057,7 @@ md-card.preview-conversation-skin-supplemental-card {
   overflow-wrap: break-word;
   padding: 0.2em;
   position: absolute;
-  word-break: break-word;
+  word-break: break-all;
   -webkit-hyphens: auto;
 }
 .oppia-activity-summary-tile.oppia-activity-playlist-tile .activity-title {
@@ -3779,6 +3781,7 @@ md-card.preview-conversation-skin-supplemental-card {
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
   padding: 8px;
+  word-break: break-all;
 }
 
 .oppia-rte:focus {

diff --git a/core/templates/dev/head/pages/exploration_editor/feedback_tab/feedback_tab.html b/core/templates/dev/head/pages/exploration_editor/feedback_tab/feedback_tab.html
@@ -54,7 +54,7 @@ <h2>Exploration Feedback</h2>
     </div>
 
     <div class="row" ng-if="activeThread.messages">
-      <div style="margin-top: 10px;" class="col-lg-12 col-md-12 col-sm-12">
+      <div style="margin-top: 10px; word-break: break-all;" class="col-lg-12 col-md-12 col-sm-12">
         <table class="table">
           <tr ng-repeat="m in activeThread.messages|orderBy:'message_id'">
             <td>

diff --git a/...plates/dev/head/pages/exploration_editor/translation_tab/state_translation_directive.html b/...plates/dev/head/pages/exploration_editor/translation_tab/state_translation_directive.html
@@ -207,6 +207,7 @@
   .translation-state-contents {
     border-bottom: 2px solid #eee;
     min-height: 400px;
+    word-break: break-all;
   }
   .translation-state-content {
     margin: auto;