Widget Not Rendering Properly

eyedol commented 10 years ago

It seems some form fields for the export feature that needs to be hidden are showing for some reason. This was all fine until I made a recent update to the plugin. Now I see three extra input fields below the main textarea that needs not to be there. See screenshot

This is how I'm rendering the form.

<?= $form->field($model, 'description')->widget(MarkdownEditor::classname(),
    [ 'height' => 200, 'showExport' => false]) ?>

kartik-v commented 10 years ago

The export form is hidden and should never be displayed. Nevertheless, I have pushed a fix to not render this form, when you have showExport set to false. You can check and let know.

eyedol commented 10 years ago

The fix worked. However I don't get it why those fields should be visible if you've showExport set to true. No matter what I enter into those fields they don't have any effect on the exported file. I don't understand what they're there for for the user. I get it if they're somehow used in implementing the export feature. Shouldn't they be hidden as well when showExport is set to true?

eyedol commented 10 years ago

BTW, thanks for the quick action.

kartik-v commented 10 years ago

@eyedol The form should never be displayed. Can you mention which browser and what version you are using?

eyedol commented 10 years ago

This happens on both Firefox v28.0 and Chromium Version 33.0.1750.146 Russian Fedora (254388) I'm using dev-master from packagist.org so should be the latest changes?

Also with the export feature when I select HTML it never download as HTML. Nothing happens. It works well for .txt. I can open a different issue for that if you want.

kartik-v commented 10 years ago

Not replicable from here. Can you check if the demo link on your client also behaves the same?

eyedol commented 10 years ago

@kartik-v it renders fine with the demo link. Weird because I have cleared both the runtime folder and the browser's cache and the issue still appears for me. See screenshot.

funky error

Here is the HTML code generated by the plugin.

<label class="control-label" for="restaurant-description">Description</label>
<div id="restaurant-description-container" class="kv-md-container"><div id="restaurant-description-editor" class="kv-md-editor"><div id="restaurant-description-header" class="kv-md-header btn-toolbar"><div class="btn-group">
<button type="button" id="restaurant-description-btn-1" class="btn btn-sm btn-default" title="Bold" onclick="markUp(1, &quot;#restaurant-description&quot;)"><i class='glyphicon glyphicon-bold'></i></button>
<button type="button" id="restaurant-description-btn-2" class="btn btn-sm btn-default" title="Italic" onclick="markUp(2, &quot;#restaurant-description&quot;)"><i class='glyphicon glyphicon-italic'></i></button>
<button type="button" id="restaurant-description-btn-3" class="btn btn-sm btn-default" title="Paragraph" onclick="markUp(3, &quot;#restaurant-description&quot;)"><i class='glyphicon glyphicon-font'></i></button>
<button type="button" id="restaurant-description-btn-4" class="btn btn-sm btn-default" title="Append Line Break" onclick="markUp(4, &quot;#restaurant-description&quot;)"><i class='glyphicon glyphicon-text-height'></i></button>
<button type="button" id="restaurant-description-btn-100" class="btn btn-sm btn-default dropdown-toggle" title="Heading" data-toggle="dropdown" onclick="markUp(100, &quot;#restaurant-description&quot;)"><i class='glyphicon glyphicon-header'></i> <span class="caret"></span></button>
<ul class='dropdown-menu'>
<li><a id="restaurant-description-btn-101" class="kv-heading-1" href="#" title="Heading 1 Style" onclick="markUp(101, &quot;#restaurant-description&quot;)">Heading 1</a></li><li><a id="restaurant-description-btn-102" class="kv-heading-2" href="#" title="Heading 2 Style" onclick="markUp(102, &quot;#restaurant-description&quot;)">Heading 2</a></li><li><a id="restaurant-description-btn-103" class="kv-heading-3" href="#" title="Heading 3 Style" onclick="markUp(103, &quot;#restaurant-description&quot;)">Heading 3</a></li><li><a id="restaurant-description-btn-104" class="kv-heading-4" href="#" title="Heading 4 Style" onclick="markUp(104, &quot;#restaurant-description&quot;)">Heading 4</a></li><li><a id="restaurant-description-btn-105" class="kv-heading-5" href="#" title="Heading 5 Style" onclick="markUp(105, &quot;#restaurant-description&quot;)">Heading 5</a></li><li><a id="restaurant-description-btn-106" class="kv-heading-6" href="#" title="Heading 6 Style" onclick="markUp(106, &quot;#restaurant-description&quot;)">Heading 6</a></li></ul>
</div>
<div class="btn-group">
<button type="button" id="restaurant-description-btn-5" class="btn btn-sm btn-default" title="URL/Link" onclick="markUp(5, &quot;#restaurant-description&quot;)"><i class='glyphicon glyphicon-link'></i></button>
<button type="button" id="restaurant-description-btn-6" class="btn btn-sm btn-default" title="Image" onclick="markUp(6, &quot;#restaurant-description&quot;)"><i class='glyphicon glyphicon-picture'></i></button>
</div>
<div class="btn-group">
<button type="button" id="restaurant-description-btn-7" class="btn btn-sm btn-default" title="Indent Text" onclick="markUp(7, &quot;#restaurant-description&quot;)"><i class='glyphicon glyphicon-indent-left'></i></button>
<button type="button" id="restaurant-description-btn-8" class="btn btn-sm btn-default" title="Unindent Text" onclick="markUp(8, &quot;#restaurant-description&quot;)"><i class='glyphicon glyphicon-indent-right'></i></button>
</div>
<div class="btn-group">
<button type="button" id="restaurant-description-btn-9" class="btn btn-sm btn-default" title="Bulleted List" onclick="markUp(9, &quot;#restaurant-description&quot;)"><i class='glyphicon glyphicon-list'></i></button>
<button type="button" id="restaurant-description-btn-10" class="btn btn-sm btn-default" title="Numbered List" onclick="markUp(10, &quot;#restaurant-description&quot;)"><i class='glyphicon glyphicon-list-alt'></i></button>
<button type="button" id="restaurant-description-btn-11" class="btn btn-sm btn-default" title="Definition List" onclick="markUp(11, &quot;#restaurant-description&quot;)"><i class='glyphicon glyphicon-th-list'></i></button>
</div>
<div class="btn-group">
<button type="button" id="restaurant-description-btn-12" class="btn btn-sm btn-default" title="Footnote" onclick="markUp(12, &quot;#restaurant-description&quot;)"><i class='glyphicon glyphicon-edit'></i></button>
<button type="button" id="restaurant-description-btn-13" class="btn btn-sm btn-default" title="Block Quote" onclick="markUp(13, &quot;#restaurant-description&quot;)"><i class='glyphicon glyphicon-comment'></i></button>
</div>
<div class="btn-group">
<button type="button" id="restaurant-description-btn-14" class="btn btn-sm btn-default" title="Inline Code" onclick="markUp(14, &quot;#restaurant-description&quot;)"> <div style="margin-top: -4px; margin-bottom: -1px;">
    <span style="font-size: 1.3em;">&lsaquo;</span>/<span style="font-size: 1.3em;">&rsaquo;</span>
</div></button>
<button type="button" id="restaurant-description-btn-15" class="btn btn-sm btn-default" title="Code Block" onclick="markUp(15, &quot;#restaurant-description&quot;)"><i class='glyphicon glyphicon-sound-stereo'></i></button>
</div>
<div class="btn-group">
<button type="button" id="restaurant-description-btn-16" class="btn btn-sm btn-default" title="Horizontal Line" onclick="markUp(16, &quot;#restaurant-description&quot;)"> <span style="color: #888; text-shadow: 0 4px 0 #ccc, 0 -4px 0 #ccc;">&mdash;</span></button>
</div>
<div class="pull-right btn-group">
<button type="button" id="restaurant-description-btn-17" class="btn btn-sm btn-default" title="Toggle full screen" data-enabled><i class='glyphicon glyphicon-fullscreen'></i></button>
</div>
</div><textarea id="restaurant-description" class="kv-md-input" name="Restaurant[description]"></textarea>
<div id="restaurant-description-preview" class="kv-md-preview hidden"></div><div id="restaurant-description-footer" class="kv-md-footer"><div class = "btn-toolbar pull-right"><div class="btn-group">
<button type="button" id="restaurant-description-btn-51" class="btn btn-sm btn-primary dropdown-toggle" title="Export content" data-enabled data-toggle="dropdown"><i class='glyphicon glyphicon-floppy-disk'></i> Export <span class="caret"></span></button>
<ul class='dropdown-menu'>
<li><a id="restaurant-description-btn-52" href="#" title="Save as text"><i class="glyphicon glyphicon-floppy-save"></i> Text</a></li><li><a id="restaurant-description-btn-53" href="#" title="Save as HTML"><i class="glyphicon glyphicon-floppy-saved"></i> HTML</a></li></ul>
</div>
<div class="btn-group">
<button type="button" id="restaurant-description-btn-50" class="btn btn-sm btn-default" title="Preview formatted text"><i class='glyphicon glyphicon-search'></i> Preview</button>
</div>
</div><div class="kv-md-hint"><i class="glyphicon glyphicon-arrow-right"></i> You may use <a href="http://michelf.ca/projects/php-markdown/extra/" target="_blank">PHP Markdown Extra</a> and <a href="http://michelf.ca/projects/php-smartypants/typographer/" target="_blank">PHP SmartyPants Typographer</a> syntax.<br><i class="glyphicon glyphicon-arrow-right"></i> To undo / redo, press <kbd>CTRL-Z</kbd> / <kbd>CTRL-Y</kbd>. You can also undo most button actions by clicking it again.</div><div class="clearfix"></div></div><form class="kv-export-form" action="/eatout/backend/index.php?r=markdown/parse/download" method="post" style="display:none" target="_blank">
<input type="hidden" name="_csrf" value="bWRyS1VCZkMqEi0GIgkSFSZWC3ISIBMcHghEPm0YKTNbEggSNikBNQ=="><input type="text" name="export_filetype"><input type="text" name="export_filename"><textarea name="export_content"></textarea></form></div></div>
<div class="help-block"></div>

kartik-v commented 10 years ago

Few suggestions:

If you check the html code dump you sent the form should be hidden (display:none).

<form class="kv-export-form" action="/eatout/backend/index.php?r=markdown/parse/download" 
method="post" style="display:none" target="_blank">

You may want to check if your HTML is not broken/incomplete for your page (something like a <div> not closed with a </div> or another <form> not closed with a </form>).

Just try using this widget in a separate controller/plain view without any other HTML elements and report if you are able to view fine.
Check if you have the latest version of the module code on your install. May want to clear the vendor folder and redo composer update (Or composer install --prefer-dist after clearing composer.lock and vendor folder)

kartik-v commented 10 years ago

I also pushed an additional fix to hide all fields. But I would suggest you to check the before.

eyedol commented 10 years ago

@kartik-v It renders fine if it's not used with ActiveForm. See code above.

After updating to the latest fix, I can confirm this is fixed. Again thanks for the quick action.

kartik-v commented 10 years ago

@eyedol thanks... is the export feature working with ActiveForm?

eyedol commented 10 years ago

@kartik-v It works. I had to unblock popups just like the alert dialog says.

kartik-v / yii2-markdown

Widget Not Rendering Properly #14