xpages application bootstrap 3 - erreur dans la colonne de droite

Si j'utilise bootstrap divs dans la colonne de droite de l'appLayout, j'obtiens l'effet "drôle" que dans la taille d'écran sm la colonne de droite recouvre la colonne centrale. Je pense que c'est une définition manquant dans la classe div de la colonne de droite (code généré automatiquement à partir du XPages EXTLIB):xpages application bootstrap 3 - erreur dans la colonne de droite

<div class="row"> 
    <div class="col-md-10 col-sm-9 applayout-content"> ... </div> 
    <div class="col-md-2 col-sm-3 applayout-column-right"> 
     <div class="well" style="height:400px;">Right Column</div> 
    </div> 
</div>

Quand j'entre une définition col-sm dans Firebug comme ceci:

<div class="row"> 
    <div class="col-md-10 col-sm-9 applayout-content"> ... </div> 
    <div class="col-md-2 col-sm-3 applayout-column-right"> 
     <div class="well" style="height:400px;">Right Column</div> 
    </div> 
</div>

Cela fonctionne comme prévu, l'effet est parti. Ai-je raté quelque chose, ou est-ce un bug dans le contrôle de mise en page de l'application ExtLib?

XPages sur le serveur 9.0.1, la version EXTLIB est 901v00_16.20160128-1014

Uwe

Source

2016-04-19 Uwe J.

Quels sont le contenu de votre colonne de droite? Vous avez mentionné sur le forum OpenNTF que cela nécessitait des divs utilisant des classes bootstrap? Cela ressemble à un bug dans le code ExtLib. Un simple correctif si je peux vérifier le cas d'utilisation qui cause un problème –

Ah l'ai obtenu, si vous ajoutez '

' à la colonne de droite, alors il chevauche la colonne centrale sur les écrans/périphériques sm –

Vous avez raison, cela est un bogue dans la mise en page de contrôle des applications lors de l'utilisation du bootstrapResponsiveApplicationConfiguration. J'ai reproduit le problème dans une application en utilisant Bootstrap3.theme et un puits dans la facette de la colonne de droite. La classe col-sm manquante est en effet la cause, comme vous l'avez suggéré. J'ai enregistré le problème sur notre github repository for the ExtLib. Un correctif sera fourni pour ce problème dans la prochaine version de la bibliothèque d'extensions. Merci de l'avoir souligné/trouvé.

MISE À JOUR: Le correctif de ce problème est dans la dernière version extlib, EXTLIB 17, qui a été publié sur le site openntf hier (2e Juin 2016)

Source

2016-04-28 09:37:03

Merci Brian pour le réparer. BTW: Ce ne serait pas une fonctionnalité intéressante, si l'utilisateur peut configurer les définitions de ces colonnes? J'ai commencé à générer un modèle de contrôle personnalisé pour les grilles de mise en page dans nos applications, où j'ai prédéfini (par exemple) 4 s plus un (notes) profil doc dans lequel je peux configurer la classe et le rendu de ces s. Si cela vous intéresse, je vous l'enverrai par la poste (ou l'afficherai quelque part ici). –

Peut être une fonctionnalité utile pour le contrôle de disposition de l'application. Peut-être quelque chose à regarder dans le futur. –

FYI, le correctif pour ce problème est dans la dernière version ExtLib, ExtLib 17, qui a été publié sur le site openntf hier (2 juin 2016) –

est le "col-md-10 col-sm-9 applayout-content" censé être fermé de façon que les deux apparaissent côte à côte?

<div class="row"> 
    <div class="col-md-10 col-sm-9 applayout-content"> 
     Some text here... 
    </div> 
    <div class="col-md-2 col-sm-3 applayout-column-right"> 
     More text here... 
    </div> 
</div>

Source

2016-04-19 17:27:08 nallenanderson

Quand sur un écran xs, puis le Les divs sont affichés verticalement les uns sous les autres (ce qui est bien), mais sur un écran sm, la colonne de droite recouvre le centre et rend cela invisible. La colonne centrale (col-md-10 col-sm-9 applayout-content) ne doit jamais être fermée, elle doit être visible sur tous les écrans. –

xpages application bootstrap 3 - erreur dans la colonne de droite

Répondre

Questions connexes