[Résolu] Changer de position un bouton d'une table

Bonjour à tous, voici mon problème :

j'ai des boutons dans mes headers d'une table et je souhaiterais en déplacer un, le mettre hors de la table, au dessus aligné avec un autre bouton. Mais j'aimerai le faire en n'utilisant pas le mode absolu, pour pas faire des problèmes d'affichage par la suite, et là je bug car en relative il reste bloqué dans le header..

Voici un exemple simple qui ressemble bcp à ce que j'ai actuellement:
http://codepen.io/anon/pen/oxRZKL?editors=1100

Une image pour récapitulée:


Merci d'avance
Modifié par Xan (17 May 2016 - 11:57)

Bonjour Xan,

Xan a écrit :
en relative il reste bloqué dans le header

Et heureusement ! En effet ce comportement est très précisément la fonction du positionnement relatif.

D'autre part ce que tu demande est tout aussi précisément la fonction du positionnement absolu. Dommage que tu ne souhaite apprendre à maitriser ces 2 concepts de positionnement qui sont complémentaires dans une mise en page.

C'est ton choix, mais ceci limite tes possibilités. Je ne vois donc pas trente-six solutions à ton problème, il faut dédoubler ton bouton : créer le même hors table.
A la limite côté css, et suivant la présentation de ta table, jouer alternativement avec un display: none;/display: block; (ou table-cell vu que tu es dans une table) sur les boutons.

La meilleur solution restant, à mon sens, une gestion intégralement en Css en jouant avec le positionnement absolu et les marges

Qu'en dis-tu ?
Modifié par Greg_Lumiere (17 May 2016 - 09:37)

Greg_Lumiere a écrit :
Bonjour Xan,

Et heureusement ! En effet ce comportement est très précisément la fonction du positionnement relatif.

D'autre part ce que tu demande est tout aussi précisément la fonction du positionnement absolu. Dommage que tu ne souhaite apprendre à maitriser ces 2 concepts de positionnement qui sont complémentaires dans une mise en page.

C'est ton choix, mais ceci limite tes possibilités. Je ne vois donc pas trente-six solutions à ton problème, il faut dédoubler ton bouton : créer le même hors table.
A la limite côté css, et suivant la présentation de ta table, jouer alternativement avec un display: none;/display: block; (ou table-cell vu que tu es dans une table) sur les boutons.

La meilleur solution restant, à mon sens, une gestion intégralement en Css en jouant avec le positionnement absolu et les marges

Qu'en dis-tu ?

Oui, je préfererai ne pas avoir à dédoubler mon boutton
Mais en mode absolu, j'avais déjà fais certains tests auparavant, et cela posait des problèmes d'affichage, quand on réduit la page etc..

A moins qu'il existe une solution, en utilisant le mode absolu + le mode relatif pour que lorsque l'on réduit la page, cela ne pose pas de probleme?

(car j'aurai d'autres éléments à mettre par la suite, et la position absolu pose problème, de superposition notamment quand on réduit la page)

Enfait, l'idéal ce serait qu'il soit en relatif par rapport au bouton du dessus
(Mais je sais pas si c'est possible)
Modifié par Xan (17 May 2016 - 09:59)

Xan a écrit :
Oui, je préfererai ne pas avoir à dédoubler mon boutton

Je comprends bien mais il faut tout de même faire un choix.

Xan a écrit :
Mais en mode absolu, j'avais déjà fais certains tests auparavant, et cela posait des problèmes d'affichage

Un problème récurrent. Je pense que tout débutant s'y est frotté et s'y est piqué.
C'est comme après une chute à cheval... remonte en selle.

Xan a écrit :
A moins qu'il existe une solution, en utilisant le mode absolu + le mode relatif pour que lorsque l'on réduit la page, cela ne pose pas de problème?

Et tu crois que les autres font comment ? Ils gèrent leurs divers modes de positionnement et y arrivent.

Ce qu'il est indispensable à garder en tête :
Un objet placé de manière absolue se place par rapport à son premier parent placé EXPLICITEMENT relativement à son propre parent.

C'est, je pense, ce qui est souvent source d'effet indésirable.

Après c'est un jeu de marge et de j'te vois - j'te vois pas
Par exemple t'applique une marge haute à ta table égale à la hauteur de ta "zone boutons", tu place ta table relativement et tu positionne tes boutons en absolu dans cet inter-espace.
Quelques coups de display et roule ma poule.

Xan a écrit :
la position absolu pose problème [...] quand on réduit la page

Les media-queries c'est pas pour les chiens...
Ben non, c'est justement fait pour ça. C'est d'ailleurs vrai pour tout mode de positionnement.

Xan a écrit :
En fait, l'idéal ce serait qu'il soit en relatif par rapport au bouton du dessus

Il n'y a que la poudre de fée qui puisse réaliser ce souhait mon ami (ou d'autres langages beaucoup plus compliqués).


Et pourquoi tes bouton sont d'office inclus à ta table ? C'est quoi leur fonction ?

Greg_Lumiere a écrit :
Je comprends bien mais il faut tout de même faire un choix.

Un problème récurrent. Je pense que tout débutant s'y est frotté et s'y est piqué.
C'est comme après une chute à cheval... remonte en selle.

Et tu crois que les autres font comment ? Ils gèrent leurs divers modes de positionnement et y arrivent.

Ce qu'il est indispensable à garder en tête :
Un objet placé de manière absolue se place par rapport à son premier parent placé EXPLICITEMENT relativement à son propre parent.

C'est, je pense, ce qui est souvent source d'effet indésirable.

Après c'est un jeu de marge et de j'te vois - j'te vois pas
Par exemple t'applique une marge haute à ta table égale à la hauteur de ta "zone boutons", tu place ta table relativement et tu positionne tes boutons en absolu dans cet inter-espace.
Quelques coups de display et roule ma poule.


Les media-queries c'est pas pour les chiens...
Ben non, c'est justement fait pour ça. C'est d'ailleurs vrai pour tout mode de positionnement.


Il n'y a que la poudre de fée qui puisse réaliser ce souhait mon ami (ou d'autres langages beaucoup plus compliqués).


Et pourquoi tes bouton sont d'office inclus à ta table ? C'est quoi leur fonction ?

Mes boutons sont inclus dans ma table, car j'utilise un plugin de tri, qui fait que lorsque je clique sur le header d'une colonne (et donc un bouton), cela tri la colonne

Dommage, j'aurai bien aimé la poudre de fée

je vais donc bidouillé comme tu le dis avec les marges etc.. je voulais faire un truc bien propre mais bon

Merci de m'avoir éclairé
Modifié par Xan (17 May 2016 - 10:24)

Xan a écrit :
j'utilise un plugin de tri

Ok. Donc j'imagine que ces boutons sont gérés en JS. Si tu t'y connais en JS tu peux positionner tes boutons côté client.
Tu les masque par défaut,
suivant la résolution tu les affiches dans la table ou hors table en jouant sur les propriétés css et les media-queries
et si l'utilisateur a désactivé JS, les boutons restent masqués.

Sinon en css,
sois rigoureux dans la syntaxe, ne balance pas des position: relative à tout bout de champs et reste logique et tu verras que tu y arriveras.

Au pire tu pourras toujours poster tes questions

Hello,

Il existe d'autres pistes à explorer :

1- JavaScript (pour déplacer des éléments dans le DOM), 2 solutions :
- en JavaScript natif, avec un script “RelocateJS” : http://edenspiekermann.github.io/minwidth-relocate/more/demo.html
- en jQuery, via un prepend/append : http://codepen.io/raphaelgoetter/pen/ZWxrdy

2- PHP avec détection du User-Agent et ajout de conditions (en dernier recours)

Salut,
J'aurais en effet proposé une solution comme celle de Raphaël avec le .appendTo() de jQuery.
Ça a pour effet de réellement le déplacer dans le DOM et du coup plus de prise de tête sur le positionnement un peu aléatoire, tu le déplaces dans le même bloc que ton bouton déjà hors de ta table.
Ca serait même plus simple que l'exemple de Raphaël puisque c'est indépendant de le résolution du device.

EDIT : j'avais pas vu ton Codepen... Voici un fork : http://codepen.io/korell/pen/NNVgdq
Par contre il faut voir comment ça cohabite avec ta lib de tri, à voir quand il faut le déplacer.
Il faudrait que tu ajoute ton script qui gère le tri
Dans Codepen, tu peux charger des librairies externes voir appeler charger d'autres Pens !
Modifié par MatthieuR (17 May 2016 - 11:48)

Merci de vos réponses, oui utiliser javascript pour déplacer le bouton semble être une idée très intéressante, je vais essayer de faire comme cela, merci

MatthieuR a écrit :
Salut,
J'aurais en effet proposé une solution comme celle de Raphaël avec le .appendTo() de jQuery.
Ça a pour effet de réellement le déplacer dans le DOM et du coup plus de prise de tête sur le positionnement un peu aléatoire, tu le déplaces dans le même bloc que ton bouton déjà hors de ta table.
Ca serait même plus simple que l'exemple de Raphaël puisque c'est indépendant de le résolution du device.

EDIT : j'avais pas vu ton Codepen... Voici un fork : http://codepen.io/korell/pen/NNVgdq
Par contre il faut voir comment ça cohabite avec ta lib de tri, à voir quand il faut le déplacer.
Il faudrait que tu ajoute ton script qui gère le tri
Dans Codepen, tu peux charger des librairies externes voir appeler charger d'autres Pens !

Merci de ta solution, ça a l'air niquel tout ça, je vais l'utiliser merci

C'est quand même bien utile le javascript
Modifié par Xan (17 May 2016 - 11:54)

Ok, super, mais c'est la solution de Raphaël