Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

BUGFIX: #7295 Long Filenames break layout

Add text overflow and a max width to filenames.
  • Loading branch information...
commit 106bd47e882b21b3907732b665d9c512521fd0d3 1 parent 68f9cde
@adrexia adrexia authored chillu committed
View
2  admin/css/ie7.css
@@ -39,6 +39,8 @@ html { overflow: hidden; }
.field input.text, .field textarea, .field .TreeDropdownField { padding-left: 0; padding-right: 0; }
+.ss-uploadfield-item-name { display: block; }
+
.ss-uploadfield-edit-iframe .field.treedropdown { height: 150px !important; }
.ss-uploadfield-edit-iframe .field .TreeDropdownField ul { min-height: 100px; height: auto; max-height: 150px; }
View
3  admin/scss/ie7.scss
@@ -15,6 +15,9 @@ html {
}
}
+.ss-uploadfield-item-name {
+ display:block;
+}
.ss-uploadfield-edit-iframe{
.field {
View
4 css/AssetUploadField.css
@@ -45,8 +45,8 @@ body.cms.ss-uploadfield-edit-iframe span.readonly { font-style: italic; color: #
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { cursor: default; background: #bcb9b9; background: rgba(201, 198, 198, 0.9); }
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7); }
.ss-assetuploadfield .ss-uploadfield-files .ui-state-warning .ss-uploadfield-item-info { background-color: #ff9300; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eba547), color-stop(8%, #e89a30), color-stop(50%, #e68f19), color-stop(54%, #e68e19), color-stop(96%, #e17519), color-stop(100%, #dc6718)); background-image: -webkit-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -moz-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -o-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -ms-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); }
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 40%; color: #5e5e5e; background: #eeeded; background: rgba(255, 255, 255, 0.8); -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; display: block; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; }
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); display: inline; float: left; max-width: 40%; font-weight: normal; padding: 0 5px 0 0; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 50%; color: #5e5e5e; background: #eeeded; background: rgba(255, 255, 255, 0.8); -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; display: block; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; display: table; table-layout: fixed; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); display: inline; float: left; max-width: 50%; font-weight: normal; padding: 0 5px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; max-width: 30%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); color: #cc0000; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #cc7600; }
View
12 scss/AssetUploadField.scss
@@ -104,7 +104,7 @@ body.cms.ss-uploadfield-edit-iframe {
@include background-image(linear-gradient(top, #c11f1d 0%,#bf1d1b 4%,#b71b1c 8%,#b61e1d 15%,#b11d1d 27%,#ab1d1c 31%,#a51b1b 42%,#9f1b19 46%,#9f1b19 50%,#991c1a 54%,#971a18 58%,#911b1b 62%,#911b1b 65%,#7e1816 88%,#771919 92%,#731817 100%));
.ss-uploadfield-item-name{
cursor:default;
- background:darken($color-button-disabled,20%); //for browsers that don't support rgba
+ background: darken($color-button-disabled,20%); //for browsers that don't support rgba
background: rgba(darken($color-button-disabled, 15%),0.9);
.name {
text-shadow: 0px 1px 0px rgba(#fff, 0.7);
@@ -129,7 +129,7 @@ body.cms.ss-uploadfield-edit-iframe {
position: relative;
z-index: 1;
margin: 3px 0 3px 50px;
- width: 40%;
+ width: 50%;
color:lighten($color-text, 10%);
background:$color-button-disabled; //for browsers that don't support rgba
background: rgba(#fff, 0.8);
@@ -139,14 +139,18 @@ body.cms.ss-uploadfield-edit-iframe {
height: 22px;
padding: 0 5px;
text-align: left;
- cursor:pointer;
+ cursor:pointer;
+ //display:table, and table-layout:fixed allows us to use percentages with text-overflow
+ display:table;
+ table-layout:fixed;
.name {
text-shadow: 0px 1px 0px rgba(#fff, 0.5);
display:inline;
float:left;
- max-width:40%;
+ max-width:50%;
font-weight: normal;
padding: 0 5px 0 0;
+ @include hide-text-overflow;
}
.ss-uploadfield-item-status {
float: right;
Please sign in to comment.
Something went wrong with that request. Please try again.