我在summernote编辑器中出现了调色板外观问题。
当显示调色板并且减小浏览器窗口的大小时，我看到一半的颜色没有显示。
我想要的是找到一种使调色板响应的方法，以便查看所有颜色。
屏幕截图：
这是问题的样子：
现在我正在考虑的解决方案（我不知道如何实现）是使调色板像“图像选项”一样响应。
最初的样子是这样的：
这就是它变得敏感的方式：
那么，我们如何才能实现这种响应呢？
最佳答案
在所有这些时间之后，单击颜色尖号时，我必须为调色板实现调整大小的功能：
$('div[data-name="color"]').on('click', function (e) {
var rt = ($(window).width() - ($('div[data-name="color"]').offset().left + $('div[data-name="color"]').outerWidth())); //get offset on the right
var lt = $('div[data-name="color"]').offset().left; //get offset on the left
var $colorsPalette = $('[data-name="color"] ul.dropdown-menu');
//if language is arabic and the offset on the left is not big enough to display the horizontal palette>> then display a vertical palette
if ((__IsArabic == '1' && lt < 340) || (__IsArabic != '1' && rt < 340)) //smaller size needed
{
//here I add en empty row to keep distance between the background colors (at the top) and the font colors (bottom)
if (($colorsPalette.find('li').children().length == 2) && !$(this).parent().hasClass('open')) { //just opened
//make changes to style to display it correctly
$colorsPalette.find('.btn-group').first().after('<div class="btn-group" style="margin-top: 30px;"></div>');
$colorsPalette.css({ 'min-width': '120px', 'height': '470px' });
$colorsPalette.find('li').css({ 'width': '120px' });
$colorsPalette.find('li').children().each(function () { $(this).css({ 'margin-right': '5px', 'margin-left': '5px' }) });
$colorsPalette.find('li').children(":nth-child(2)").width(120);
}
} else {
if ($colorsPalette.find('li').children().length == 3) {
// undo the changes made (palette back to normal)
$colorsPalette.find('li').children(":nth-child(2)").remove();
$colorsPalette.find('li').children().each(function () { $(this).css({ 'margin-right': '', 'margin-left': '' }) });
$colorsPalette.find('li').css({ 'width': '338px' });
$colorsPalette.css({ 'min-width': '340px', 'height': '' });
}
}
});
我希望这可以帮助面临同样问题的人
关于css - 如何使Summernote的调色板具有响应性？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37577288/