1.html 759 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <div class="container-outer">
  2. <div class="container-inner">
  3. <div>
  4. <div id="editor-attach">
  5. <p>Balloon is attached to the <strong>TARGET</strong> element.</p>
  6. </div>
  7. </div>
  8. <div>
  9. <div id="editor-stick">
  10. <p>Balloon sticks to the <strong>TARGET</strong> element.</p>
  11. </div>
  12. </div>
  13. </div>
  14. </div>
  15. <style>
  16. body {
  17. height: 100%;
  18. }
  19. .ck-balloon-panel {
  20. padding: 2em;
  21. }
  22. .ck-editor__editable {
  23. max-height: 300px;
  24. }
  25. .ck-editor__editable p {
  26. margin: 470px 0;
  27. }
  28. .container-outer {
  29. height: 500px;
  30. width: 750px;
  31. overflow: scroll;
  32. }
  33. .container-inner {
  34. padding: 500px 30px 30px;
  35. display: flex;
  36. width: 1000px;
  37. height: 2000px;
  38. background: #e1e1e1;
  39. }
  40. .container-inner > div {
  41. margin: 0 20px;
  42. }
  43. </style>