Étiquette : largeur

[Javascript] Récupérer la largeur ou la hauteur d’un élément sans les padding, margin, bordure et scrollbar associés avec clientHeight, offsetHeight et parseFloat

24/11/2020 / admin

Sources:

Dégageage du padding avec `getComputedStyle`

Faire un console.log(computedStyle); vous donnera une liste de toutes les données récupérées via la méthode getComputedStyle et que vous pourrez exploiter ensuite.

var computedStyle = getComputedStyle(element);

elementHeight = element.clientHeight;  // height with padding
elementWidth = element.clientWidth;   // width with padding

elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

var computedStyle = getComputedStyle(element);

elementHeight = element.clientHeight; // height with padding

elementWidth = element.clientWidth; // width with padding

elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);

elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

Dans la pratique:

Je veux récupérer la hauteur du contenu de l’élément de DOM .page-leftColumn sans le padding:

    let $leftColumn = document.querySelector('.page-leftColumn'),
        computedStyle = getComputedStyle($leftColumn),
        leftColumnHeight = $leftColumn.clientHeight - (parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom));
    // console.log(leftColumnHeight);

let $leftColumn = document.querySelector('.page-leftColumn'),

computedStyle = getComputedStyle($leftColumn),

leftColumnHeight = $leftColumn.clientHeight - (parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom));

// console.log(leftColumnHeight);

Tenir compte de la scrollbar

Voir aussi ici pour ce bout de code modifié pour tenir compte de la scrollbar:

var cs = getComputedStyle(element);

var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);

var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
var borderY = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);

// Element width and height minus padding and border
elementWidth = element.offsetWidth - paddingX - borderX;
elementHeight = element.offsetHeight - paddingY - borderY;

var cs = getComputedStyle(element);

var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);

var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);

var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);

var borderY = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);

// Element width and height minus padding and border

elementWidth = element.offsetWidth - paddingX - borderX;

elementHeight = element.offsetHeight - paddingY - borderY;

[jQuery] Redimensionner automatiquement un element HTML Select en fonction de la largeur de l’Option sélectionnée

26/04/2018 / admin

Source: Auto resizing the SELECT element according to selected OPTION’s width. Voir le jsFiddle ici.

<select id="resizing_select">
 <option>All</option>
 <option>Longer</option>
 <option>A very very long string...</option>
</select>
<select id="width_tmp_select">
 <option id="width_tmp_option"></option>
</select>

<option>Longer</option>

<option>A very very long string...</option>

</select>

</select>

$(document).ready(function() {
 $('#resizing_select').change(function(){
    $("#width_tmp_option").html($('#resizing_select option:selected').text());
    $(this).width($("#width_tmp_select").width());  
 });
});

$(document).ready(function() {

$('#resizing_select').change(function(){

$("#width_tmp_option").html($('#resizing_select option:selected').text());

$(this).width($("#width_tmp_select").width());

});

#resizing_select {
 width: 50px;
} 
 
#width_tmp_select{
 display : none;
}

#resizing_select {

width: 50px;

}

#width_tmp_select{

display : none;

}

Cas particulier: la page se recharge après sélection

Source: Persist variables between page loads.

    ACC.naosPagination.resizeSelectOnTheFly();

    var sortOptionsWidth = sessionStorage.getItem('sortOptionsWidth');
    $('#sortOptions1').width(sortOptionsWidth);
    sessionStorage.removeItem('sortOptionsWidth');


    resizeSelectOnTheFly: function(){
        $('#resizing_select').change(function(){
            $("#width_tmp_option").html($('#resizing_select option:selected').text());
            $(this).width($("#width_tmp_select").width());
            var getWidth = ($('#resizing_select').width()) + 2;

            sessionStorage.setItem('sortOptionsWidth', getWidth+'px');
        });
    }

ACC.naosPagination.resizeSelectOnTheFly();

var sortOptionsWidth = sessionStorage.getItem('sortOptionsWidth');

$('#sortOptions1').width(sortOptionsWidth);

sessionStorage.removeItem('sortOptionsWidth');

resizeSelectOnTheFly: function(){

$('#resizing_select').change(function(){

$("#width_tmp_option").html($('#resizing_select option:selected').text());

$(this).width($("#width_tmp_select").width());

var getWidth = ($('#resizing_select').width()) + 2;

sessionStorage.setItem('sortOptionsWidth', getWidth+'px');

});

}

[CSS] Un background off-container

17/07/2017 / admin

Pas totalement valide car ajoute un léger scroll horizontal

Source: Full Width Containers in Limited Width Parents et le CodePen. Attention à la compatibilité.

width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;

1
2
3
4
5
6

width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;

Un *tain d’exemple qui marche:

Regardez bien la structure HTML. L’ajout d’une DIV .full-width joue un rôle important ici.

<div class="staticBlock staticBlock-oad"> <div class="full-width"> <div class="container"> <div class="row"> <div class="col"> <h2 class="h2"><?= __('Find out about our tools to help you make the right decision !'); ?></h2> </div> </div> <div class="row"> <div class="col-md-4 text-center"> <a href="<?php echo $block->getBaseUrl(); ?>/<?= __('Opti url'); ?>"> <img src='<?php echo $this->getViewFileUrl('images/logo-opti.jpg'); ?>' alt="<?= __('Access Opti'); ?>" /> </a> <p><?= __('Opti tagline'); ?></p> <a class="btn btn-lg btn-oad" href="<?php echo $block->getBaseUrl(); ?>/<?= __('Opti url'); ?>"> <?= __('Access Opti'); ?> </a> </div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> </div> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div class="staticBlock staticBlock-oad">
    <div class="full-width">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h2 class="h2"><?= __('Find out about our tools to help you make the right decision !'); ?></h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 text-center">
                    <a href="<?php echo $block->getBaseUrl(); ?>/<?= __('Opti url'); ?>">
                        <img src='<?php echo $this->getViewFileUrl('images/logo-opti.jpg'); ?>' alt="<?= __('Access Opti'); ?>" />
                    </a>
                    <p><?= __('Opti tagline'); ?></p>
                    <a class="btn btn-lg btn-oad" href="<?php echo $block->getBaseUrl(); ?>/<?= __('Opti url'); ?>">
                        <?= __('Access Opti'); ?>
                    </a>
                </div>
                <div class="col-md-4"></div>
                <div class="col-md-4"></div>
            </div>
        </div>
    </div>
</div>

.staticBlock { &-oad { background-color: #eee; .full-width { position: relative; padding-top: 15px; padding-bottom: 15px; &:before, &:after { z-index: -1; top: 0; display: block; content: ""; position: absolute; width: 50%; height: 100%; background-color: #eee; } &:before { left: -50%; } &:after { right: -50%; } } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.staticBlock {
  &-oad {
    background-color: #eee;
    .full-width {
      position: relative;
      padding-top: 15px;
      padding-bottom: 15px;
      &:before,
      &:after {
        z-index: -1;
        top: 0;
        display: block;
        content: "";
        position: absolute;
        width: 50%;
        height: 100%;
        background-color: #eee;
      }
      &:before {
        left: -50%;
      }
      &:after {
        right: -50%;
      }
    }
  }
}

Une alternative intéressante

Notamment si l’élément doit se retrouver en sticky à un moment donné.

@media screen and (min-width: @screen-lg-min) { .refinement-facets-list.affix { width: 1200px; z-index: 1000; border-bottom: 1px solid #ededed; background: @page-background-color; &:before, &:after { content: ""; display: block; position: fixed; width: 50%; height: 51px; border-bottom: 1px solid #ededed; background: @page-background-color; } &:before { left: -50%; } &:after { right: -50%; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

@media screen and (min-width: @screen-lg-min) {
  .refinement-facets-list.affix {
    width: 1200px;
    z-index: 1000;
    border-bottom: 1px solid #ededed;
    background: @page-background-color;
    &:before,
    &:after {
      content: "";
      display: block;
      position: fixed;
      width: 50%;
      height: 51px;
      border-bottom: 1px solid #ededed;
      background: @page-background-color;
    }
    &:before {
      left: -50%;
    }
    &:after {
      right: -50%;
    }
  }
}

[CSS] Un champ de formulaire fluide et un bouton alignés qui prennent systématiquement 100% de la largeur de leur conteneur

30/03/2015 / admin

Solution moderne avec la propriété CSS box-sizing :

input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

1
2
3
4
5

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Solution obsolète :

Source : Input field and submit button on the same line, full width.

<form> <button>Ok</button> <div class="input-wrapper"> <input type="text" /> </div> </form>

1
2
3
4
5
6

<form>
  <button>Ok</button>
  <div class="input-wrapper">
    <input type="text" />
  </div>
</form>

button { float: right; } .input-wrapper { overflow: hidden; padding-right: 15px; } input { width: 100%; }

1
2
3
4
5
6
7
8
9
10

button {
  float: right;
}
.input-wrapper {
  overflow: hidden;
  padding-right: 15px;
}
input {
  width: 100%;
}

Articles récents

Catégories

Archives

Méta

Étiquette : largeur

[Javascript] Récupérer la largeur ou la hauteur d’un élément sans les padding, margin, bordure et scrollbar associés avec clientHeight, offsetHeight et parseFloat

Dégageage du padding avec `getComputedStyle`

Dans la pratique:

Tenir compte de la scrollbar

[jQuery] Redimensionner automatiquement un element HTML Select en fonction de la largeur de l’Option sélectionnée

Cas particulier: la page se recharge après sélection

[CSS] Un background off-container

Pas totalement valide car ajoute un léger scroll horizontal

Un *tain d’exemple qui marche:

Une alternative intéressante

[CSS] Un champ de formulaire fluide et un bouton alignés qui prennent systématiquement 100% de la largeur de leur conteneur

Solution moderne avec la propriété CSS `box-sizing` :

Solution obsolète :

Dégageage du padding avec getComputedStyle

Dans la pratique:

Tenir compte de la scrollbar

Cas particulier: la page se recharge après sélection

Pas totalement valide car ajoute un léger scroll horizontal

Un *tain d’exemple qui marche:

Une alternative intéressante

Solution moderne avec la propriété CSS box-sizing :

Solution obsolète :

Dégageage du padding avec `getComputedStyle`

Solution moderne avec la propriété CSS `box-sizing` :