SharePoint Online ne peut pas étendre la largeur de la partie Web

Question

J'ai un sous-site de blog sur un site SharePoint Online (2013) qui comporte par défaut 3 zones de parties Web: BlogNavigator, gauche et droite (ordonnées de gauche à droite).

La disposition des zones est frustrant, parce que la zone de gauche, qui abrite le contenu réel du site, est relativement étroite compte tenu de la quantité d'espace disponible à droite de la zone droite.

Lorsque je déplace tous les composants WebPart de la zone Droite dans BlogNavigator, la zone Gauche conserve sa taille, même s'il est possible de déployer vers la droite.

J'ai essayé de déclarer manuellement la zone gauche ContainerWidth sur le fichier de page dans SP Designer, j'ai essayé d'appliquer un CSS file à la page pour définir la largeur, mais rien ne semble fonctionner.

J'ai même supprimé toutes les références à la zone de droite sur le fichier de la page, en le supprimant complètement, mais la zone gauche conserve sa largeur d'origine.

Y a-t-il un moyen de modifier cette zone?

Answer 1

Les mises en page de page SharePoint prêtes à l'emploi utilisent un cadre de grille particulier pour mettre en page les différentes zones de la partie WebPart.

Cette structure, qui est définie dans la structure css, utilise display: table et display: table-cell pour positionner les zones dans la disposition horizontale.

Les mises en page de table entraînent généralement des problèmes de dimensionnement impairs similaires à ceux que vous avez décrits.

Dans un projet sur lequel j'ai travaillé récemment, j'ai dû corriger la disposition de la table pour qu'elle soit plus rigide afin qu'il n'y ait pas de problème de dimensionnement. Le site sur lequel je travaillais était un site de publication donc je ne suis pas sûr que les cours soient les mêmes sur votre blog mais voici le CSS que j'ai utilisé pour modifier le cadre de la grille.

#DeltaPlaceHolderMain .ms-table { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
    margin-left: -15px; 
    margin-right: -15px; 
    width: auto; } 
    #DeltaPlaceHolderMain .ms-table > div[class*="tableCol"] { 
    -webkit-box-flex: 1; 
    -ms-flex: 1 0 auto; 
    flex: 1 0 auto; 
    padding-left: 15px; 
    padding-right: 15px; 
    box-sizing: border-box; } 

#DeltaPlaceHolderMain .tableCol-75, 
#DeltaPlaceHolderMain .tableCol-33, 
#DeltaPlaceHolderMain .tableCol-25, 
#DeltaPlaceHolderMain .tableCol-50 { 
    width: 100%; 
    display: block; 
    min-width: 0; } 

#contentBox { 
    padding-left: 15px; 
    padding-right: 15px; } 

#titleAreaRow { 
    display: table; } 

#contentRow { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; } 

#sideNavBox { 
    margin-right: 5px; } 

#contentBox { 
    min-width: 0; 
    margin: 0; 
    -webkit-box-flex: 1; 
    -ms-flex: 1 0; 
    flex: 1 0; } 

#s4-titlerow, 
#contentRow { 
    max-width: 1450px; 
    margin: 0 auto; } 
@media screen and (min-width: 1020px) { 
    #DeltaPlaceHolderMain .tableCol-75 { 
    width: 66.666%; } 
    #DeltaPlaceHolderMain .tableCol-33 { 
    width: 33.333%; 
    } 
    #DeltaPlaceHolderMain .tableCol-25 { 
    width: 33.333%; } 
    #DeltaPlaceHolderMain .tableCol-50 { 
    width: 50%; } } 
@media screen and (min-width: 1340px) { 
    #DeltaPlaceHolderMain .tableCol-75 { 
    width: 75%; } 
    #DeltaPlaceHolderMain .tableCol-25 { 
    width: 25%; } } 
* { 
    outline: none; } 

html { 
    -webkit-text-size-adjust: 100%; } 


/* Sidenav */ 
#sideNavBox { 
    min-width: 180px; 
    max-width: 300px; 
    width: auto; }