Kendo UI Bootstrap thème ne fonctionne pas bien avec Bootstrap 3.1.0

Je suis juste dans le processus de conversion d'un site basé sur Bootstrap, 2.3, 3.1 et j'ai beaucoup de problèmes avec le Kendo du Bootstrap thème.

J'ai tendance à utiliser Bootstrap forme-groupes au sein de la coutume de la Grille de popup éditeurs, mais ils ne se comportent pas avec le Kendo du CSS.

J'ai configuré un Violon pour montrer le problème. Comme vous pouvez le voir quand vous modifiez un enregistrement, le dimensionnement et le positionnement des étiquettes et d'entrée et de sortie.

C'est quelque chose à voir avec les deux dernières entrées dans le common-template.less fichier:

.k-animation-container,
.k-widget,
.k-widget *,
.k-animation-container *,
.k-widget *:before,
.k-animation-container *:after
{
    .box-sizing(content-box);
}

.k-button,
.k-textbox,
.k-autocomplete,
div.k-window-content,
.k-tabstrip > .k-content > .km-scroll-container,
.k-block,
.k-edit-cell .k-widget,
.k-grid-edit-row .k-widget,
.k-grid-edit-row .text-box,
.km-actionsheet > li,
.km-shim
{
    .box-sizing(border-box);
}

Si vous supprimez ces Bootstrap formes semblent corrects, mais certains Kendo éléments (tels que le pager) sont touchés.

Est-il un moyen de contourner ce ou n'est-ce pas la façon de Telerik l'intention de son cadre pour être utilisé?

source d'informationauteur Mat

  1. 9

    De Kendo docs:

    Kendo UI utilise par défaut le contenu de la boîte du modèle de boîte (box-sizing CSS
    de la propriété), tandis que Bootstrap utilise le non-par défaut bordex-modèle de boîte et
    il s'applique à tous les éléments sur la page, y compris ceux qui sont
    sans rapport avec Bootstrap.
    ......
    Une simple solution de contournement possible est de
    remplacer le Bootstrap CSS, appliquer le contenu de la boîte de boîte de modèle à tous
    les éléments de la page et utiliser un border-box boîte de modèle pour certains
    Bootstrap elements, qui en ont besoin (ce sont tous les .col-... classes,
    .de ligne, de .conteneur et .conteneur de fluide). Vous pouvez ajouter le code CSS suivant
    règles après l'Amorçage et le Kendo UI feuilles de style.

    Voir référence pour l'échantillon css solution:
    http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-twitter-bootstrap#nesting-kendo-ui-widgets-and-bootstrap-grid-layout

  2. 1

    J'ai résolu ce problème en ajoutant ces lignes css... :

    .k-animation-container, .k-widget, .k-widget *, .k-animation-container *, .k-widget *:before, .k-animation-container *:after, .k-block .k-header, .k-list-container {
    box-sizing: inherit;
}
.k-block > .k-header, .k-window-titlebar {
    height:auto;
}
  3. 1

    Cela a sans doute à voir avec le fait de Bootstrap et le Kendo compter sur les différents modèles et les difficultés dans la réalisation des éléments qui s'appuient sur box-sizing: border-box se mélangent avec celles qui s'appuient sur box-sizing: content-box.

    En général, tout le style pour le Kendo est basé sur la norme content-box modèle. Cependant, tout le style de Bootstrap s'appuie sur le plus facile à utiliser border-box modèle. La plus grande différence entre les deux est de savoir comment le rembourrage, les frontières, etc. sont traités. Dans content-box ils font partie de la largeur d'un élément, dans border-box ils ne sont pas.

    Bootstrap suppose que bien sûr, vous voulez utiliser border-boxet pourquoi pas vous! Il a obligeamment jeux de tout sur la page à utiliser border-boxy compris le Kendo widgets. Pour sa part, le Kendo sait que Bootstrap pourrait définir tout pour utiliser border-box de sorte qu'il définit tout retour à la content-box pour le Kendo widgets et tous leurs enfants. Alors maintenant, si vous nest rien Bootstrap liées à l'intérieur de quelque chose de Kendo connexes, vous aurez le mal de modèle de boîte. C'est un gâchis.

    J'ai essayé un tas de différents hacks à essayer et à atténuer ce problème, mais le fait de la question est qu'il ya pas de bonne façon de le résoudre. C'est le code CSS que j'ai trouvé qui fonctionne le mieux pour l'instant (il utilise un attribut CSS sélecteur, donc c'est un no-go pour les anciens navigateurs):

    .border-box, .border-box * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    [class^="k-"] {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }
}

    Vous pouvez alors définir class='border-box' sur tout élément qui pourrait obtenir imbriquée à l'intérieur d'un Kendo widget que vous savez qu'ils ont Bootstrap contenu.