2011-10-20 2 views
0

J'ai besoin d'aligner certains éléments dans une iframe vers la droite et d'activer une barre de défilement horizontale sur l'iframe quand elle est écrasée.Obtenez une barre de défilement avec {position: absolute; droite: 0px; }

Le code suivant (dans le iframe) fonctionne parfaitement avec un positionnement gauche:

<html> 
    <body> 
     <div> 
      <table> 
       <tr> 
        <td>lorem ipsum here</td> 
        <td>lorem ipsum here</td> 
        <td>lorem ipsum here</td> 
        <td>lorem ipsum here</td> 
        <td>lorem ipsum here</td> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html> 

html{ 
    overflow:scroll; 
} 
table{ 
    position: absolute; 
    left: 0px; 
} 
td { 
    white-space: nowrap; 
    border: 1px solid black; 
} 

La même CSS exacte avec bon positionnement (à droite: 0px;) est brisée, l'horizontale la barre de défilement n'est pas activée.

EDIT: la barre de défilement horizontale

EDIT2: ce bit HTML est dans une iframe

EDIT3. Il est intéressant document.getElementById ('de tableID') scrollWidth donne des informations précises sur la scrollWidth la barre de défilement ne doit avoir fait pas d'affichage. Je pourrais essayer une solution moche laid à mon problème (par exemple créer une barre de défilement artificielle, fml)

+0

Oui c'est le cas. Quel navigateur utilisez-vous? – scottheckel

+0

@Hexxagonal J'ai oublié d'ajouter que le html est dans un iframe. Dans ce cas, cela ne fonctionne pas dans FF 5 et Chrome 15 – BenoitParis

+1

Est-ce que cela reproduit le comportement que vous rencontrez? - http://jsfiddle.net/ULnWF/1/ –

Répondre

1

Pour obtenir des barres de défilement, la table doit apparaître dans le flux; Si vous changez position en absolute, il est sorti du flux, donc sans JavaScript pour calculer les chiffres (ne faites pas cela jamais!) vous ne pouvez pas le faire.

Il me semble que ce que vous voulez est juste pour enlever la marge sur la page. Si cela est correct, il suffit de mettre dans vos styles body { padding: 0; } (et supprimer le position et left de table).

De plus, si vous voulez juste le faire défiler, vous n'avez pas besoin de le mettre dans un iframe (l'utilisation gratuite d'iframes est indésirable). overflow: scroll sur le conteneur est suffisant.

Si vous pouviez poster une démonstration plus complète de ce que vous essayez d'obtenir, des conseils plus précis peuvent être donnés.

+0

Je dois utiliser un iframe car les domaines sont différents. Heureusement, je contrôle les deux domaines (mais les fusionner n'est pas possible). Ce que je veux réaliser est d'avoir le scrollBar horizontal activé dans la zone en bas à droite de cette page: http://jsfiddle.net/ULnWF/1/ – BenoitParis

+0

@BenoitParis: donc vous voulez que l'iframe soit la taille minimum qui contiendra entièrement son contenu, comme si c'était un span ou tel? Que vous ne pouvez pas faire d'une manière que je sache (vous ne pouvez même pas en avoir l'intérieur pour signaler sa taille à l'extérieur pour changer manuellement ses dimensions en JavaScript parce qu'ils sont sur des domaines différents).Si vous pouviez le récupérer de manière AJAXy (vous rencontrerez des problèmes de requêtes inter-sites) et que vous l'incluiez en ligne, c'est la seule façon de le faire. –

+0

Vous avez lu mon intention correctement, je veux utiliser la largeur de la barre de défilement pour adapter la taille iframe. En fait, je le fais grâce à une extension de navigateur, donc le passage des choses est un peu plus facile. Cela fonctionne maintenant: D – BenoitParis

Questions connexes