GRUPOS DE DISCUSSÃO PROFISSIONAL
WINDEV
,
WEBDEV
e
WINDEV Mobile
Inicio
|
Mensagens recentes
|
Conecte-se...
|
Disconnect
|
Português
Inicio
→
WEBDEV 2024
→
Fix column in a table
Fix column in a table
Iniciado por Marc, jul., 11 2021 10:41 AM - 3 respostas
Conecte-se…
Marc
#1
Publicado em julho, 11 2021 - 10:41 AM
Hi,
Since Webdev is still unable to fix the first columns in a table - essential behaviour for tables, Pcsoft ??? - I try a simulation.
Put the 2 tables side by side, the left one contains the 'fixed' columns, the other the data.
when I click left, I can make the right one follow.
But when I scroll the left one, how can I make the right one follow?
Any help much appreciated.
Denunciar
0
0
Marc
#2
Publicado em julho, 16 2021 - 9:56 AM
Found another solution after some thinking out of the box.
Don't use the horizontal scrollbar, add 2 buttons to scroll horizontally. If you want to move to the right, keep your fixed columns and set the other visible columns to invisible.. and the next set on the right appear
They are other solutions of course, but this one fits our needs since we have horizontal & vertical (sub) totals in our table as well.
Denunciar
0
0
Xavier BERNARD
#3
Membro registado
59 mensagems
Popularité : +3 (3 votes)
Publicado em agosto, 04 2021 - 11:08 AM
Not sure if you were the same Marc in the French section that posted the message too.
Below is the message I put, basically you go in the description of the control Table and select the column you want to fix.
In style go in the overload and in the CSS add the following code:
position: sticky !important;
left: 50px !important;
z-index: 50;
background-color: #ffffff;
outline: 1px solid lightgray;
Message is in French but you can google translate it.
Posted on August, 02 2021 - 11:02 AM
Bonjour Arriety et vous tous,
le problème que nous avions, était:
- L'en-tete colonne scrollait et donc n’était pas fixe.
- le première cellule de la colonne était fixe mais celle-ci et celles du dessous étaient en sur-impression avec les autres ( overlapped)
A ce qu'Arriety a conseillé, nous avons ajouté z-index: 50; et avons pris en compte la largeur de nos colonnes car nous en bloquons 3.
( le outline c'est pour faire plus joli afin que le cadre de la cellule ne change pas de couleur et évite un clignotement quand on scroll)
Afin d’éviter de faire un inspect et découvrir le nom de la colonne; nous sommes allés dans le description de la table et pour chaque colonne que nous voulions bloquer nous avons ajouté ceci:
Pour la premiere colonne:
position: sticky !important;
left: 0px !important;
z-index: 50;
background-color: #ffffff;
outline: 1px solid lightgray;
Pour la deuxième (et les suivantes)
( la seule différence est dans le left. left prend en compte la largeur de la colonne précédente (elle est de 50 pour nous) ainsi elles ne se surimposent pas)
position: sticky !important;
left: 50px !important;
z-index: 50;
background-color: #ffffff;
outline: 1px solid lightgray;
Pour la troisieme ( left prend en compte la largeur des 2 premières colonnes soit 50 + 90 = 140)
position: sticky !important;
left: 140px !important;
z-index: 50;
background-color: #ffffff;
outline: 1px solid lightgray;
et ainsi de suite en fonction de la largeur de vos colonnes, si on veut d'autres colonnes bloquées.
Le seule inconvénient avec z-index 50 c'est que cela risque de cacher les popups associés a votre table (ce qu'a dit mon développeur) mais nous n'en avons pas.
Donc cette solution nous convient parfaitement, merci Arriety d'avoir relancé le sujet et d'avoir partagé vos informations .
cordialement,
Xavier
Denunciar
0
0
Marc
#4
Publicado em abril, 08 2022 - 3:49 PM
Yes, the same Marc.
I was happy to find your solution in the French forum, it works great and I shared it with a collegue who implemented it with perfect results. Thank you!
Now looking to find a way to put some rows (or the cells in the row) to read only. This is much needed since we put total rows in our table (accounting).
Denunciar
0
0
→ Voltar para WEBDEV 2024
WINDEV 2024
WEBDEV 2024
WINDEV Mobile 2024
WINDEV (versões anteriores)
Français
English
Español
Portuguesa
Fermer cette fenêtre
Tipo de Pesquisa
Apenas tópicos
Todas as mensagens
Período de pesquisa
Qualquer momento
Última hora
Últimas 24 horas
Semana passada
Mês passado
Ano passado
Cancelar
Pré-visualização da sua mensagem
Adicionar imagem
Importar uma imagem de uma URL
Enviar uma imagem a partir do seu disco
Deixe um ficheiro ou clique em "Procurar ..."
ou
Cancelar
0%
WLanguage
SQL
XML, HTML
JAVA, Javascript
Texto