I use VS Code with Prettier in Angular project (esbenp.prettier-vscode)
Is it possible to configure where closing bracket will be located? For example, this is how Prettier formats HTML file:
<textarea
class="textarea"
type="text"
contentEditable="true"
placeholder="Placeholder"
></textarea>
Instead I would like it to format like this:
<textarea
class="textarea"
type="text"
contentEditable="true"
placeholder="Placeholder">
</textarea>
Related
May I ask you if it's possible to change the html formatting in VSC regarding the closure of the angle bracket of the start stag ?
currently my formatter produce:
<button
type="button"
class="btn btn-default"
(click)="activeModal.close()"
translate
>
common.discardBtn
</button>
that's horrible
I would like this result:
<button
type="button"
class="btn btn-default"
(click)="activeModal.close()"
translate>
common.discardBtn
</button>
How can I avoid the new line of the angle bracket ?
UPDATE
#ChrisR
I've already tried
"html.format.wrapAttributes": "force",
but it does not work
Are you sure this is Visual Studio Code and not an extension such as prettier? I found the same issue and a simple test to turn off prettier on an element would show if its the same issue.
<!-- prettier-ignore -->
<button
type="button"
class="btn btn-default"
(click)="activeModal.close()"
translate>
common.discardBtn
</button>
It looks like it was discussed, but possibly never fixed here:
https://github.com/prettier/prettier/issues/1825
I turned off prettier for html in my settings.json
"prettier.disableLanguages": ["html"]
The setting is :
"html.format.wrapAttributes": "force".
The reason why the angle bracket of the first tag is set to a new line is because when your code is versioned (with Git for example) and you add or remove attributes, less lines will be modified than with your preferred solution.
You'll find that the "horrible" format is pretty common in the developer world. =)
I have the below ionic range in my html file. I tried finding to customize the css but no success. I want something like this
<div class="item range">
<input type="range" name="volume">
</div>
I'm currently implementing accessibility website to meet the Level AA Conformance
One of the things that I do not meet the correct labeling of the elements on the forms.
Currently my HTML structure is this:
<label for="edit-title">Text</label>
<div class="views-widget">
<div class="form-item" id="edit-title-wrapper">
<input type="text" id="edit-title" size="30" value="" class="form-text">
</div>
</div>
I would change the structure to this other.
<div class="views-widget">
<div class="form-item" id="edit-title-wrapper">
<label for="edit-title">Text</label>
<input type="text" id="edit-title" size="30" value="" class="form-text">
</div>
</div>
Order to have the "input" tag after the label tag.
My question is if there is any possible way to make this change easily in Drupal.
Thanks.
Best Regards.
Yo can edit template archive .tpl or create one in theme options in views module. In this template you can add and modify elements.
I use TinyMCE.
If I insert in my textarea (editor) another texarea, tinymce considers that the closing tag of this one is concerned and so he closes the editor. All code can be found there after outside the editor ...
Have you any idea?
Below code works :
<textarea id="elm1" name="elm1">
<input type="text" value="okokokok"/>
</textarea>
Below code don't works :
<textarea id="elm1" name="elm1">
<textarea>Blablablabla</textarea>
<input type="text" value="okokokok"/>
</textarea>
Here, "<input type="text" value="okokokok"/></textarea>" will be found outside editor...
Do you understand my problem ?
Remove all the ID attributes of "textarea" elements.
This will fix appearing a textarea inside the editor.
i had a same problem, rather then remove the id attr give them a id value, do not use "id" less textarea. it works in tinymce 4.
a <textarea id="try">textarea in </textarea> out of the textarea
I'm doing this HTML5 form, but when I check it on the browser (running it locally) it displays the label next to the input space next to le label and so.
heres the code:
<form>
<label for="name">Nombre:</label>
<input type="text" id="name" placeholder="Ingresa tu Nombre" required />
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Ingresa tu e-mail " required />
<label for="message">Mensage:</label>
<textarea id="message" placeholder="Ingresa tu Mensaje" required></textarea>
<input type="submit" value="Envia tu mensage" >
</form>
should I use <br />? I already checked on other web pages and they dont use it
thank you.
As Kolink pointed out, the form displays inline as all the elements inside it are inline.
You shouldn't be using <br/> or <p> as they are not intended for that purpose (You shouldn't be using a toothbrush to clean a toilet). Better use a <ul> with <li> for each field. This makes sense as the form is nothing but a list of fields.
The mark-up would be like this:
<form>
<ul>
<li>
<label for="something">some label</label>
<input id="something" />
</li>
</ul>
</form>
Alternatively, you can go ahead and use <div> as well (but not <p>).
Well, <label> is inline, <input> is inline, <textarea> is inline...
If all your elements are inline, of course your overall form will be.
Try using the <br /> tag, or maybe <p>...</p>.
Kolink is correct. Another way to address this is to add
display: block;
to all input and label elements using CSS.