mirror of https://github.com/xwiki-labs/cryptpad
Fix overflowing text in forms
This commit is contained in:
yflory
parent
112d3a04bd
commit
27e6f9a34b
|
|
@ -930,10 +930,22 @@
|
|||
max-width: 100%;
|
||||
}
|
||||
.cp-checkmark-label {
|
||||
overflow: auto;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
.cp-form-multiradio-container {
|
||||
overflow: auto;
|
||||
}
|
||||
.cp-form-type-multiradio {
|
||||
.cp-form-multiradio-header {
|
||||
white-space: nowrap;
|
||||
span {
|
||||
text-align: center;
|
||||
max-width: 30ch;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
display: table;
|
||||
& > * {
|
||||
display: table-row;
|
||||
|
|
@ -942,11 +954,25 @@
|
|||
padding: 5px 20px;
|
||||
vertical-align: middle;
|
||||
&:first-child {
|
||||
min-width: 200px;
|
||||
max-width: 350px;
|
||||
overflow: auto;
|
||||
//overflow: auto;
|
||||
max-width: 300px;
|
||||
min-width: 300px;
|
||||
width: 300px;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
word-break: break-word;
|
||||
background: @cp_form-bg1;
|
||||
z-index: 2;
|
||||
}
|
||||
.cp-radio-mark {
|
||||
&:nth-child(2) {
|
||||
visibility: hidden;
|
||||
//overflow: auto;
|
||||
max-width: 300px;
|
||||
min-width: 300px;
|
||||
width: 300px;
|
||||
word-break: break-word;
|
||||
}
|
||||
.cp-radio-mark, .cp-checkmark-mark {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -960,7 +986,7 @@
|
|||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
word-break: break-word;
|
||||
.cp-form-handle {
|
||||
min-width: 12px;
|
||||
}
|
||||
|
|
@ -994,6 +1020,7 @@
|
|||
}
|
||||
.cp-poll-total {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.cp-form-poll-body {
|
||||
flex-flow: column;
|
||||
|
|
@ -1012,6 +1039,8 @@
|
|||
margin-top:5px;
|
||||
margin-left:5px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
word-break: break-word;
|
||||
button {
|
||||
width: 100%;
|
||||
border-top: 0px;
|
||||
|
|
@ -1061,6 +1090,19 @@
|
|||
border-color: @cp_form-bg1 !important;
|
||||
}
|
||||
}
|
||||
.cp-form-poll-option, .cp-poll-time-day {
|
||||
span {
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 1.2;
|
||||
hyphens: auto;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
&:not(.cp-form-poll-switch) {
|
||||
& > div {
|
||||
&:last-child {
|
||||
|
|
@ -1087,18 +1129,6 @@
|
|||
}
|
||||
|
||||
.cp-form-poll-option, .cp-poll-time-day {
|
||||
span {
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 1.2;
|
||||
hyphens: auto;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
flex-flow: column;
|
||||
text-align: center;
|
||||
.cp-form-weekday-separator {
|
||||
|
|
@ -1134,12 +1164,7 @@
|
|||
}
|
||||
.cp-form-poll-option, .cp-poll-switch {
|
||||
span {
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
max-height: 100%;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
}
|
||||
width: 200px;
|
||||
.cp-form-weekday-separator {
|
||||
|
|
|
|||
|
|
@ -745,8 +745,14 @@ define([
|
|||
h('span', day)
|
||||
]));
|
||||
});
|
||||
var w = 200 + 105*(opts.values.length || 1);
|
||||
var w = 200 + 105*(opts.values.length || 1); // XXX cells can grow bigger than 100px
|
||||
lines.unshift(h('div.cp-poll-time-day-container', {style: 'width:'+w+'px;'}, days));
|
||||
setTimeout(function () {
|
||||
var w2 = $('div.cp-form-poll-body').width();
|
||||
if (w < w2) { $('div.cp-poll-time-day-container').width(w2); }
|
||||
var cellWidth = $(lines).find('div.cp-poll-cell.cp-form-poll-option').first().width();
|
||||
$('div.cp-poll-cell.cp-poll-time-day').css('flex-basis', cellWidth);
|
||||
});
|
||||
}
|
||||
|
||||
// Add answers
|
||||
|
|
@ -1858,13 +1864,23 @@ define([
|
|||
return radio;
|
||||
});
|
||||
els.unshift(h('div.cp-form-multiradio-item', item));
|
||||
els.unshift(h('div.cp-form-multiradio-item', item));
|
||||
return h('div.radio-group', {'data-uid':name}, els);
|
||||
});
|
||||
var header = extractValues(opts.values).map(function (v) { return h('span', v); });
|
||||
var header = extractValues(opts.values).map(function (v) {
|
||||
return h('span', {
|
||||
title: Util.fixHTML(v)
|
||||
}, v);
|
||||
});
|
||||
header.unshift(h('span'));
|
||||
var elh = h('span');
|
||||
elh.innerHTML = ' ';
|
||||
header.unshift(elh);
|
||||
lines.unshift(h('div.cp-form-multiradio-header', header));
|
||||
|
||||
var tag = h('div.radio-group.cp-form-type-multiradio', lines);
|
||||
var tag = h('div.cp-form-multiradio-container',
|
||||
h('div.radio-group.cp-form-type-multiradio', lines)
|
||||
);
|
||||
var cursorGetter;
|
||||
var setCursorGetter = function (f) { cursorGetter = f; };
|
||||
var $tag = $(tag);
|
||||
|
|
@ -2120,6 +2136,7 @@ define([
|
|||
return cbox;
|
||||
});
|
||||
els.unshift(h('div.cp-form-multiradio-item', item));
|
||||
els.unshift(h('div.cp-form-multiradio-item', item));
|
||||
return h('div.radio-group', {'data-uid':name}, els);
|
||||
});
|
||||
|
||||
|
|
@ -2141,11 +2158,20 @@ define([
|
|||
});
|
||||
});
|
||||
|
||||
var header = extractValues(opts.values).map(function (v) { return h('span', v); });
|
||||
var header = extractValues(opts.values).map(function (v) {
|
||||
return h('span', {
|
||||
title: Util.fixHTML(v)
|
||||
}, v);
|
||||
});
|
||||
header.unshift(h('span'));
|
||||
var elh = h('span');
|
||||
elh.innerHTML = ' ';
|
||||
header.unshift(elh);
|
||||
lines.unshift(h('div.cp-form-multiradio-header', header));
|
||||
|
||||
var tag = h('div.radio-group.cp-form-type-multiradio', lines);
|
||||
var tag = h('div.cp-form-multiradio-container',
|
||||
h('div.radio-group.cp-form-type-multiradio', lines)
|
||||
);
|
||||
var cursorGetter;
|
||||
var setCursorGetter = function (f) { cursorGetter = f; };
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in New Issue