/ / Barre latérale à largeur fixe avec colonne de contenu réactive dans Foundation 5? - zurb-foundation, fixe, enveloppe, barre latérale

Barre latérale à largeur fixe avec colonne de contenu réactive dans Foundation 5? - zurb-foundation, fixe, enveloppe, barre latérale

Je me sers de Foundation depuis la v3 et je ne m'attendais donc pas à ce genre de snafu.

Dans ce cas particulier, j'ai besoin d'une colonne gauche de largeur fixe (grand-3), puis d'une colonne de contenu fluide / réactive (grand-9) pour le reste.

<div class="row">

<div class="large-3 columns" id="sidebar" style="width: 300px">
sidebar
</div>

<div class="large-9 columns" id="content">
content
</div>

</div>

Le problème est, lors de la réduction, la colonne de contenuest en train de s’enrouler / d’être forcé en dessous de la barre latérale (avant même que le seuil de largeur d’écran suivant ne soit franchi). J'ai essayé des classes "fixes" et "collantes" dans la barre #side mais elles ne semblent pas affecter ce comportement.

Je ne voulais pas commencer à pirater le CSS s'il existait une solution existante (Foundation?).

Aucun conseil?

Réponses:

7 pour la réponse № 1

Tout comme l'approche de @naota, la réponse de Zurb a été de pirater le css. Définir une barre latérale à largeur fixe absolument positionnée, puis créer un nouveau div avec padding à gauche: 300px;

Quelque chose comme:

<div class="row">

<div id="sidebar" style="position: absolute; width: 300px;">
</div>

<div class="large-12 columns" id="content" style="padding-left: 300px">
</div>

</div>

Cela fonctionne étonnamment bien ... pour un hack.


4 pour la réponse № 2

Voici ce que j'utilise avec SASS pour créer des largeurs de colonnes fixes.

Code

@mixin fixed($width, $direction) {
position: absolute;
width: rem-calc($width) + $column-gutter;
top: 0;
@if $direction == left {
left: 0;
} @else {
right: 0;
}
}
@mixin fluid($width, $direction) {
@if $direction == left {
padding-right: rem-calc($width) + ($column-gutter * 1.5);
} @else {
padding-left: rem-calc($width) + ($column-gutter * 1.5);
}
}

En utilisant le code

Pour insérer une colonne fixe, 300px, droite, ajouter @include fixed(300, right); à la classe de colonne de droite, et @include fluid(300, left); à la classe de colonne de gauche. Ne pas mélanger avec le défaut small-# column Des classes.

Extension du code

Si vous souhaitez configurer des classes permanentes, comme pour small-3 column, large-6 column, etc., ajoutez simplement le code suivant. Vous pourrez maintenant utiliser large-fluid-300-left pour la colonne de fluide gauche et large-fixed-300-right pour la colonne fixe droite.

// Fixed 300px
.row { position: relative; }
@media #{$small-up} {
.small-fixed-300-left.column { @include fixed(300, left); }
.small-fixed-300-right.column { @include fixed(300, right); }
.small-fluid-300-left.column { @include fluid(300, left); }
.small-fluid-300-right.column { @include fluid(300, right); }
}
@media #{$medium-up} {
.medium-fixed-300-left.column { @include fixed(300, left); }
.medium-fixed-300-right.column { @include fixed(300, right); }
.medium-fluid-300-left.column { @include fluid(300, left); }
.medium-fluid-300-right.column { @include fluid(300, right); }
}
@media #{$large-up} {
.large-fixed-300-left.column { @include fixed(300, left); }
.large-fixed-300-right.column { @include fixed(300, right); }
.large-fluid-300-left.column { @include fluid(300, left); }
.large-fluid-300-right.column { @include fluid(300, right); }
}

Si vous travaillez avec des annonces, vous viendrez probablementsur un point, où vous aurez besoin que la colonne s'effondre dans sa propre ligne, une fois qu'elle atteint une certaine largeur minimale. Voici ce que j'utilise pour définir les largeurs de colonne minimales.

Code

@mixin min($width) {
width: $width + px;
float: left;
box-sizing: content-box;
+ .column {
float: left;
}
}

En utilisant le code

Ajouter @include min(300); à une classe de colonne. Doit être utilisé en plus du column classe.

Extension du code

Le code suivant vous permet d'ajouter des classes, telles que .small-min-300.column aux colonnes que vous souhaitez effondrer, si elles sont toutes comprimées au-dessous de 300px.

// Min 300px
@media #{$small-up} {
.small-min-300.column { @include min(300); }
}
@media #{$medium-up} {
.medium-min-300.column { @include min(300); }
}
@media #{$large-up} {
.large-min-300.column { @include min(300); }
}

Je l'ai tiré directement de mon fichier SASS et je n'ai pas testé le code au moment de la rédaction. Faites-moi savoir si quelque chose ne fonctionne pas comme prévu.


3 pour la réponse № 3

J'ai fait face à un problème similaire. Le code ci-dessous utilise display:table pour envelopper votre code en deux parties.

CSS:

<style type="text/css">
.wrapper_table{
display: table;
width:100%;
}
.wrapper_row{
display:table-row;
vertical-align:top;
}
.wrapper_cell{
display:table-cell;
vertical-align:top;
}
</style>

HTML:

<section class="wrapper_table">
<div class="wrapper_row">
<div class="wrapper_cell">
<!-- your side bar is here -->
<div class="columns" id="sidebar" style="width:300px;">
sidebar
</div>
</div>
<div class="wrapper_cell">
<div class="row">
<!-- your content is here -->
<div class="large-12 columns" id="content" >
content content content content content
content content content content content
</div>
</div>
</div>
</div>
</section>

J'espère que cela t'aides.


0 pour la réponse № 4

Au cas où quelqu'un aurait trouvé cet ancien article récemmenten essayant de trouver un moyen d'avoir une colonne de largeur fixe dans Foundation, j'ai pu faire cela avec Foundation 6. J'utilise le Flex-Grid, et il y a une classe merveilleuse appelée .shrink. Rétrécir rendra la colonne aussi large queson contenu, vous pouvez donc y placer un élément comme un élément de navigation ou une image, et la colonne restera telle que les autres colonnes occupent l’espace restant. J'ai pu ainsi faire une colonne centrale de largeur fixe :

<div class="row">
<div class="columns"></div>
<div class="shrink columns">
This will shrink to it"s contents - set a width on something here!
</div>
<div class="columns"></div>
</div>

Page de documentation officielle de la Fondation pour le .shrink classe: https://codepen.io/ZURBFoundation/pen/aWYVgd