Buttons locks its attribute on click or after use one time

[SabirHossain]

I'm new to Trumbowyg editor, I'm Trumbowyg with ASP.NET Core everything's working fine but once I click the "Bold" button then the "Bold" button locked it's state and don't go away even I double click, also some other buttons like backgroundColor, Italic button sometimes don't work..

Browser: Firefox 57.0.4 (64-bit), Chrome, IE.
Windows 10

[Alex-D]

Did you make a selection before click/re-click on bold?

Trumbowyg does not support simple clic to enable/disable bold. So, you always should write the text, then select the part you want format, then click on buttons you want.

[hfrid]

I too have this problem.. once you click the bold button its "locked" in its active state. Clicking "remove format" clears it. Using v2.9.4. Made a quick video to demonstrate the problem here:

http://youtu.be/MnV9fRFNLMI?hd=1

Probably a conflict with some other script. My page has the following loaded:

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/ddslick/2.0/jquery.ddslick.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.5/js/jquery.tablesorter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.9.4/trumbowyg.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.9.4/ui/trumbowyg.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize-tags.min.css">
<script src="js/materialize-tags.min.js"></script>
<script src="Trumbowyg/dist/trumbowyg.min.js"></script>
<link rel="stylesheet" href="Trumbowyg/dist/ui/trumbowyg.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>

[Alex-D]

<script src="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.9.4/trumbowyg.min.js"></script>
<!-- ... -->
<script src="Trumbowyg/dist/trumbowyg.min.js"></script>

Why??? Same for the CSS oO

Are you sure dist files are in 2.9.4?

[hfrid]

Sorry forgot to remove them when I switched to local files. Yeah 100% sure they are 2.9.4...

[Alex-D]

Does it works on the Trumbowyg landing: https://alex-d.github.io/Trumbowyg/ ?

[hfrid]

Yes Den 31 jan. 2018 20:36 skrev "Alexandre Demode" <notifications@github.com>: Does it works on the Trumbowyg landing: https://alex-d.github.io/Trumbowyg/ ? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#691 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACtl-w7_LF006hh0HIWNNbtecWYpV0v_ks5tQMDAgaJpZM4RdobC> .

[Alex-D]

I can't really help you if you can't make a buggy sample code with minimum amount of code :/

[hfrid]

Your CSS is conflicting with something in this one (works if I comment it out):
https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css

The strikethrough is present even on your demo page however:
http://youtu.be/SBT7RdbLhtw?hd=1

This is on Chrome 64bit Version 64.0.3282.140

[Alex-D]

That's the only one button which is like that, no?

[hfrid]

On the demo page, yes. But same behavior on the bold button if I include the materialize css on the same page. Den 3 feb. 2018 01:02 skrev "Alexandre Demode" <notifications@github.com>:

…

That's the only one button which is like that, no? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#691 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACtl-xX9z4-BtWn9c8m0rJLBP5WEKNisks5tQ6IFgaJpZM4RdobC> .

[kishorcloudanalogy]

<script src="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.9.4/trumbowyg.min.js"></script>
<!-- ... -->
<script src="Trumbowyg/dist/trumbowyg.min.js"></script>

Why??? Same for the CSS oO

Are you sure dist files are in 2.9.4?

I am facing the same issue in React js.
Can you help me to resolve these issues?
The button is locked and not removed on double click.

[theM1st]

The bugs still here...
Look for example https://gifyu.com/image/kAIB
Can you fix it? Thank you..

[Alex-D]

Nope. Too hard to fix that. But I keep that in mind for v3 #875 :)

[ghost]

// Text Styles
em { font-style: italic; }
strong { font-weight: 500; }
small { font-size: 75%; }

in _typography.scss of MaterializeCSS those lines are the issue on Editor with Bold / Italic.
If you comments them, it will work normally