How can I use sortable and inline froalaEditor on a html?
The ui sortable https://jqueryui.com/sortable/
The editor: https://www.froala.com/wysiwyg-editor/examples/inline
My JS code:
$('.row').sortable();
$('div.container').froalaEditor({
toolbarInline: true,
toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'spellChecker', 'help', 'html', '|', 'undo', 'redo'],
toolbarButtonsXS: null,
toolbarButtonsSM: null,
toolbarButtonsMD: null
});
My html:
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="" src="./sections/headers/header-logo-slogan-cards/images/logo2-light-big.png" srcset="./sections/headers/header-logo-slogan-cards/images/logo2-light-big#2x.png 2x" class="mb-50" alt="Gumapp">
<h1 class="mb-40">Innovative solutions and design</h1>
<div class="spr-option-copy-del aos-init aos-animate" data-aos="stretch-left" data-aos-easing="linear" data-aos-duration="800" data-aos-delay="400" style="height:2px;background-color:#ffffff;box-shadow: 0 0 5px #ffffff;"></div>
<h3 class="mb-75 mt-40">So, what is the secret of successful template design?<br> First of all, it is its friendliness.</h3>
</div>
<div class="col-md-4">
<div class="card light spr-option-item-img">
<img src="./sections/headers/header-logo-slogan-cards/images/card-bg-1.jpg" class="card-img spr-option-img-nosettings" alt="">
<div class="card-img-overlay-bottom">
<h3>Technology</h3>
<p class="mb-20">Emotions that causes your project in visitor are no less important ticket to success</p>
<a class="btn btn-default btn-sm" href="#"><span class="spr-option-textedit-link">Read more</span></a>
</div>
</div>
</div>
</div>
</div>
When I try this way with above JS, sortable not working.
Thank so much
I have not tested the code, but have an educated guess. You init the editor on the container class, in which the row class exists. Inspect the container element and probably the row class is gone and replaced by the editor. You should probably init sortable on another div surrounding the container, or init the froala editor on a different one.
When using a sortable element, it requires to disable the selection on that element, therefore it is no longer editable. The best approach would be to use a dragging handler so that both sortable and the editor would work together.
Related
I will be creating left vertical (sidebar) navigation menu by referring "Example" in https://getbootstrap.com/docs/5.0/components/accordion/.
Below is the link where sub menu items are present as Subitem 1, Subitem 2, Subitem 3 under item 3 and item 4.
https://www.codeply.com/go/K1gXPZwV59/bootstrap-vertical-sidebar-_-accordion-menu-with-submenus
Could you please help how to create such sub menu items(Subitem 1, Subitem 2, Subitem 3) in the "Example"?
Do you want nested accordions? If so, just nest them. Snippet below uses the "Example" you referred to in your question.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Accordion Item #1 </button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div>
<div class="accordion" id="accordionExampleTwo">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOneOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOneOne" aria-expanded="true" aria-controls="collapseOneOne"> Accordion Item #1-1 </button>
</h2>
<div id="collapseOneOne" class="accordion-collapse collapse" aria-labelledby="headingOneOne" data-bs-parent="#accordionExampleTwo">
<div class="accordion-body">
<strong>This is the first NESTED item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingOneTwo">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOneTwo" aria-expanded="true" aria-controls="collapseOneTwo"> Accordion Item #1-2 </button>
</h2>
<div id="collapseOneTwo" class="accordion-collapse collapse" aria-labelledby="headingOneTwo" data-bs-parent="#accordionExampleTwo">
<div class="accordion-body">
<strong>This is the second NESTED item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Accordion Item #2 </button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div>
</div>
</div>
</div>
If you want a list group menu inside the accordion:
.accordion-body {
/*padding: 0 !important;*/
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!--- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.2/font/bootstrap-icons.css">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="list-group">
The current link item <i class="bi bi-caret-down-fill"></i>
<div class="collapse" id="listCollapseOne">
A nested first link item
A nested second link item
A nested third link item
</div>
A second link item
A third link item
A fourth link item
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
So I'm trying to use tooltip component from BS5. But somehow it doesn't work. Let me show you the html code first.
<div class="row">
<div class="col-12 col-md-4">
<a class="card">
<div class="card-body">
<div class="card-title">this is title. <span class="badge badge-theme" data-bs-toggle="tooltip" data-bs-placement="top" title="this is tooltip">Origiinal content</span></div>
</div>
</a>
</div>
</div>
What's weird is that when I place the tooltip outside the card component, the tooltip works perfectly. What is the problem? Thanks in advance. :)
here is a working example of a tooltip on a whole card:
Working demo
Placing id="example" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" in my demo on any element will result in the tooltip appearing on that element. In this case, I placed it on on the div with the class .card.
Feel free to change the id name from example to your desired id (in both script.js and index.html).
This may seem like a minor quibble, but why are the symbols #! appearing in my url after opening and closing my modals?
Here's what's in my script tags. The problem likely lies here.
<script>
$( document ).ready(function(){
$(".button-collapse").sideNav({menuWidth: 320, activationWidth: 70, edge: 'right', closeOnClick: true});
$('#modal2').modal();
$('#modal1').modal();
});
</script>
Edit: Added the modal link, which is a rails search form. Modal2 is essentially the same, but for a different resolution
<div id="modal1" class="modal hide-on-med-and-down">
<div class="modal-content">
<div class="center-align">
<h4>Looking for something?</h4>
<div class="search_form">
<%= form_tag search_posts_path, method: :get, id: "post-lookup-form" do %>
<div id="search_border" class="form-group">
<%= text_field_tag :post, params[:post], placeholder: " Search Posts", autofocus: true, id: "search_box" %>
</div>
<% end %>
<div>
<a id="cancel" href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
</div>
</div>
</div>
</div>
This briefly caused the hover effects on my side nav to stop working. I fixed it by manually entering the hover effect in my css, but I have a bad feeling that I really didn't address the main problem only the symptom and that this will bite me later on down the road.
I'm currently using the 0.100.2 version of materialize for this project. Let me know if you need more info or code.
It is because of this line
<a id="cancel" href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
Change the href to href='' value and it will not get placed into the url anymore.
I am using the jQuery UI sortable function on my page to sort a list of div, witch works fine. My problem is that when i start dragging a div or after I sort one or more divs, it breaks my design. Is there any way to prevent or fix this design issue when using jQuery UI sortable?
<div class="gentbl">
<div class="genrw">
<div class="rwttl">Title</div>
<div class="rwelm">Element</div>
</div>
<div class="genrw">
<div class="rwttl">Title</div>
<div class="rwelm">Element</div>
</div>
<div class="genrw">
<div class="rwttl">Title</div>
<div class="rwelm">Element</div>
</div>
<div class="genrw">
<div class="rwttl">Title</div>
<div class="rwelm">Element</div>
</div>
</div>
$(function(){
$('.gentbl').sortable({
revert: true
});
$('.gentbl').disableSelection();
});
Working example: HERE
I am using material design flexbox layout and in a box, I have two boxes. I create on jsfiddle, to clarify what I mean:
Angular Material app
I want to set between these boxes a space
<div flex layout="row" layout-align="space-between center">
<md-toolbar flex="15">
<h2 class="md-toolbar-tools">
<span>Home</span>
</h2>
</md-toolbar>
<!--How to set space between -->
<md-toolbar>
<h2 class="md-toolbar-tools" layout-align="end center">
<span>Sign Up</span>
<span>Sign In</span>
</h2>
</md-toolbar>
</div>
For those interested in a solution using Angular Flex Layout, you can achieve this with fxLayoutGap directive.
Without fxLayoutGap
<div fxLayout="row">
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
With fxLayoutGap
<div fxLayout="row" fxLayoutGap="20px">
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
I think what you need is 'layout-margin'
https://material.angularjs.org/latest/layout/options
<div layout="row" layout-margin>
<div flex>Parent layout and this element have margins.</div>
</div>
I think you can do it much simpler:
<md-toolbar>
<div class="md-toolbar-tools">
<span>Home</span>
<span flex></span>
<div>
<span>Sign Up</span>
<span>Sign In</span>
</div>
</div>
</md-toolbar>
You can insert flexible element between HOME and SIGNUP elements and it will fill the space between them.