Text editor in VSCode - visual-studio-code

my question on the picture. In VSCode i have simple problem, when i write some tags in HTML file i have blur selection in string beggining. I tried to get back default settings, but it couldn't help.
<div class="hh1">
</div>
<div class="hh2">
</div>
<div class="hh3">
</div>

As per the comment, uninstalling the indent-rainbow extension looks like it will remove this

Related

Bootstrap file input does not show the image name which is browsed

I'm using Admin LTE theme and I have added this input for uploading image:
<div class="form-group">
<label for="sendImage">Send Image</label>
<div class="input-group" id="dyanimc-field2">
<div class="custom-file" >
<label class="custom-file-label" for="exampleInputFile">Choose file</label>
<input type="file" class="custom-file-input" id="sendImage" name="product_image[]">
</div>
</div>
</div>
But when I browse and image, it should be showing the image name which is selected but it doesn't!
So by default it looks like this:
And when I choose an image it should be showing image name instead of Choose file, like this:
So what's going wrong here? How can I show the image name when it's selected before uploading?
I can across similar problem while designing a custom user dashboard using Admin LTE HTML template.
After few googling, I realized it was a known issue in bootstrap, this github issue comment solved the problem for me.
I was able to get it working using this third-party library and the lines of code below solved it for me.
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
<script>
$(document).ready(function () {
bsCustomFileInput.init()
})
</script>

Visual Studio Code tab shortcut

I have encountered difficulty when I use tab (<a>*4 and then tab) for multiple line of a tag or table tag, every time it gives me all <a> or <table> in horizontal line instead of vertical line:
<div class="signs">
</div>
which give me no problem with div tag:
<div class="sample">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
It is really annoying me every time, does anyone know how to fix this thing?
Use this in your settings.json:
"emmet.preferences": {
"output.inlineBreak": 1
}
See https://github.com/microsoft/vscode/issues/119088#issuecomment-811297787 why this is the preferred setting over syntaxProfiles.

Incorrect indent in vs code when I paste codes?

Here are my original html codes:
<div class="container">
</div>
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
and I just want to move the three div.box to div.container, but when I paste directly, it will be like this, just the fist line has correct indent:
<div class="container">
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
</div>
I followed the instruction to disable the aotoIndent in the settings, but didn't work, so how to handle it?
If you cannot set the editor.formatOnPaste to true. Then use the following key combination to manually format/ indent Alt+Shift+F
I know you said this didnt worked for you, but it did work for me and it may help others i think it worth mentioning:
This worked for me: Go to VS Code Settings -> from the User Settings tab -> Text Editor -> Formatting -> Untick the first option 'Format On Paste'
Since your settings aren't working as desired, one good way to handle this behavior is to highlight the text and press tab. This will increase indentation on all lines. You can repeat to get to your desired indentation level.

How to use protractor to find the fading in content of tooltip generated by Angular-UI?

I am using Protractor, and trying to find the content of tooltips on the page. These tooltips are generated by Angular-UI, and fading in with moveMouse over them like below. Those tooltips are similar with ng-bind, but I cannot use binding to find them. Also, I tried to getAttribute of this tooltip, but it also didn't work for me, maybe cause protractor cannot detect this element name. Do you have any idea of how to read the content of those tooltips? Many thanks.
<div class="col-md-2">
<div class="form-group">
<label class="control-label" id="label_Merchant_Number" translate>merchant_NUM</label>
<input ng-model='searchCriteria.MERCHANT_NUMBER' tooltip="{{'merNumber_tooltip'|translate}}" class='form-control input-sm' type='text' id='MERCHANT_NUMBER' name='MERCHANT_NUMBER' maxlength='16' erng-validations>
</div>
</div>
we are using getAttribute('tooltip'), works how it should be ...
element(by.model('searchCriteria.MERCHANT_NUMBER')).getAttribute('tooltip');

TinyMCE - Removing content

I'm using TinMCE to edit site content and need to add a custom piece of HTML via a button using TinyMCE plugin so when i click the button the following content gets added:
<div class="custom">
<a class="header">title</a>
<a class="delete">delete</a>
<p>Some text</p>
</div>
This is all working however I want to add a link so when I click delete the div gets removed from the TinyMCE content.
Is it possible?
Thanks
If you are using tinyMCE 4.X, it can be done using the <> source code editor option under tools. when you open it, you will see the html source code for what you have entered in the tinyMC editor.
<div class="custom">
<a class="header">title</a>
<a class="delete" onclick="this.parentNode.remove();">delete</a>
<p>Some text</p>
</div>
just make sure you have added anchor's onclick as extended_valid_elements
e.g.
tinymce.init({
...
extended_valid_elements : "a[onclick]"
... });
for more.... check this out :
http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements