Discussion :

[kap]

Bonjour à tous,

J'utilise la librairie Bootstrap pour développer une application. J'ai construit mon layout en fonction de la résolution de mon ordinateur : j'utilise un tab panel vertical avec un tab-pane contenant deux colonnes (span8 et span4). Je m'intéresse maintenant (l'erreur est peut-être là !!) au comportement de l'application sur tablette. En affichage vertical, le layout s'adapte et la colonne span4 s'affiche en dessous de la colonne span8. En affichage horizontal, le layout ne s'adapte pas et la colonne span4 est à moitié coupée. J'aimerais éviter cela et forcer un affichage vertical. Comment puis-je faire cela?

Merci d'avance.

[danielhagnoul]

Bonjour

J'ai construit mon layout en fonction de la résolution de mon ordinateur : j'utilise un tab panel vertical avec un tab-pane contenant deux colonnes (span8 et span4). Je m'intéresse maintenant (l'erreur est peut-être là !!) au comportement de l'application sur tablette.

"Responsive Web Design" : c'est un sujet qu'il est bon d'aborder dans l'ordre classique, théorie -> application.

Les fondamentaux du Responsive Web Design

[kap]

Merci pour le lien.

Bon du coup on va y aller pas à pas en commençant par la grille d'affichage flexible. J'utilise le fluid grid system de Boostrap donc mes dimensions de span sont exprimées en pourcentage. Par contre j'ai un problème concernant la hauteur des onglets. Voici le code HTML (avec un partie générée par Django) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% if maps %}
<div id="mapsTab" class = "row-fluid span12">
{% else %}
<div id="mapsTab" class = "hide row-fluid span12">
{% endif %}
   <div id="tabList" class="tabbable tabs-left">
       <ul class="nav nav-tabs" data-tabs="tabs">
           {% for map in maps %}
           {% if forloop.first %}
           <li map_id="{{ map.id}}" class="active"><a href="#tab" data-toggle="tab">{{ map.name|truncatewords_html:30 }}</a></li>
           {% else %}
           <li map_id="{{ map.id}}"><a href="#tab" data-toggle="tab">{{ map.name|truncatewords_html:30 }}</a></li>
           {% endif %}
           {% endfor %}
       </ul>

Si je mets dans mon CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#mapsTab{
    height: 85%;
}
#tabList{
    max-height: 100% 
}
#tabList>ul{
    max-height: 100% 
}

le max-height sur l'élément ul n'est pas pris en compte. Si je le mets en pixel, il est pris en compte. Pourquoi? Comment y remédier?

[NoSmoking]

Bonjour,

le max-height sur l'élément ul n'est pas pris en compte. Si je le mets en pixel, il est pris en compte. Pourquoi? Comment y remédier?

une question que l'on devrait se poser à chaque fois est 85% de quoi? (si le parent fait 0 cela ne fera pas grand chose !)

[kap]

J'ai trouvé un début d'explication ici. Après quelques essais de modifications sur le CSS, je me retrouve avec la solution suivante:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#mapsTab{
    max-height: 800px;
}
#tabList{
    max-height: inherit 
}
#tabList>ul{
    max-height: inherit 
}

Avec les media-queries, je vais pouvoir jouer sur la hauteur de "#mapsTab". Cependant je suis bien contraint de spécifier une valeur fixe au lieu de rester en pourcentage (pas forcément grave puisque adaptable avec les media-queries) : est-ce que cette solution vous semble bonne?

PS : j'ai toujours eu du mal avec le CSS...