Skip to content

10 Snippets HTML/CSS & Experiments

Snippets

Ignore parent in boxing model

Warning: display: contents it's not wery well supported use v-frag

HTML
<div style="display: contents"> Ignore parent in boxing model</div>

v-frag - remove from dom alternative way to allow top level statements

Text Only
<div style="display: contents" v-frag> Ignore parent in boxing model</div>
remove from dom

Label with wrap

HTML
<label style="white-space: unset;">Very long text long text long text long text long text </label>

xd-form with 2 columns

HTML
1
2
3
4
5
6
7
8
<div class="xd-grid-l2" style="align-items: start;">
  <div class="xd-form">

  </div>
  <div class="xd-form">

  </div>
</div>

Form submit button outside form

HTML
1
2
3
4
5
<form id="myform">
    <input type="text" name="name" />
</form>

<input type="submit" form="myform" value="Update"/>

Grid align items

HTML
1
2
3
<div class="xd-grid-l2" style="align-items: start;">

</div

Experiments

Things to keep track of in modern CSS. Could be used in the future.

Fully supported

Partially supported

  • field-sizing:content - not fully supported MDN
CSS
textare,select,input
 { field-sizing:content;}

Focus

focos in dynamic pages:

Step 1 add class to input:

HTML
 <input class=" query-focus-handler" @focus="$event.target?.select()" type="number" step=".001" v-model.number="orderline.itemQuantity" required >

Step 2

JavaScript
1
2
3
4
5
6
7
8
this.tryFocus('.query-focus-handler', true);

...

mounted() {
      this.fetchData();
      this.tryFocus('.query-focus-handler')
    }