Wie macht man die Farbpalette von Summernote ansprechbar?

Question

Ich habe ein Problem mit der Farbpalette Aussehen im Summernote Editor. Wenn die Farbpalette angezeigt wird und ich die Größe des Browserfensters verkleinere, sehe ich, dass die Hälfte der Farben nicht angezeigt wird. Was ich will ist, einen Weg zu finden, die Farbenpalette ansprechbar zu machen, um alle Farben zu sehen.

Screenshots:

das ist, wie das Problem wie folgt aussieht:

Jetzt die Lösung Ich denke (ich wusste nicht, wie es zu implementieren) ist das zu machen Farbpalette reagiert genau wie die "Bildoptionen".

dies ist, wie es aus wie zunächst aussieht:

und dies ist, wie es wird in Reaktion:

Also, wie können wir diese Reaktions erreichen? ?

Answer 1

Nach all dieser Zeit, Ich hatte eine Resize-Funktionalität für die Palette zu implementieren, wenn die Farben caret geklickt wird:

$('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': '' }); 
      } 

     } 

    }); 

Ich hoffe, das hilft jemand

vor dem gleichen Problem