WebSite X5Help Center

 
Gabriele C.
Gabriele C.
User

Rimuovere o modificare Scrollbar Orizzontale  it

Auteur : Gabriele C.
Visité 225, Followers 1, Partagé 0  

Salve Community!

Vorrei modificare la Scrollbar Orizzontale e chiedo per favore un vostro aiuto.

In pratica vorrei realizzare delle pagine principali per i vari prodotti e ho pensato di usare un oggetto "Tabella" per consentire anche da mobile una navigazione tra questa sorta di menu con un semplice swipe left. Qualche consiglio? 

Posté le
27 RéPONSES - 3 UTILE
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... la tabella non è il modo migliore per gestire certe presentazioni, d valutare caso per caso...
... ormai dovresti saperlo, basta individuare l'ID del selettore ed inibire la proprietà overflow-x, ...ma potrebbe essere cotroproducente...
... a seconda della conformazione e contenuto della tabella la gran parte di problemi relativi si potrebbero risolvere con il mio metodo per rendere le tabelle elastiche...
.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Gabriele C.
Gabriele C.
User
Auteur

Avevo provato ma non notavo alcun risultato.

Impostando nel -webkit-scrollbar height: 0px riesco a eliminare la barra di scorrimento.

Non è il modo migliore però mi consente di gestire più voci sulla stessa riga senza alterare altri parametri da mobile.

Impatta leggermente sulla UX in quanto se non si scorre il dito non ci comprende che la sezione è scorrevole.

Lire plus
Posté le de Gabriele C.
Claudio D.
Claudio D.
Moderator
Meilleur utilisateur du mois IT

@Gabriele non so quante voci vuoi mettere ... 

ma io userei la Galleria normale con "miniature orizzontali"

Lire plus
Posté le de Claudio D.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... ci sarebbe anche l'Oggetto Testo | Stile Schede | O / V | Presentazione... ... 

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Gabriele C.
Gabriele C.
User
Auteur

Dovrebbero essere un 17 voci, ma non so con esattezza. Ho esportato online qui. Tenete presente che è ancora un "working in progress".

Come sempre vi ringrazio di cuore per i consigli e il prezioso tempo che mi dedicate.

Non ho usato la Galleria o l'oggetto Testo in quanto non mi consentirebbero di avere 17 voci su una sola riga senza troppi compromessi.

Ad esempio con l'oggetto galleria non consente lo swipe da mobile.

Lire plus
Posté le de Gabriele C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... questa è la mia idea, adatta per il 99% dei casi, ed diventata ormai di uso comune (ovviamente in //HEAD):

<style>
table {width:100% !important}
table img {width:100%;max-width:55px}
#imTableObject_504_225 { overflow-x: hidden}
</style>

...

... in caso di più tabelle nella stessa pagina, basta anteporre al TABLE il selettore di riferimento;

... in questo caso essendo unica tabella, #imTableObject_504_225  table = al solo table

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Gabriele C.
Gabriele C.
User
Auteur

Buongiorno.

Io intendo con la disposizione "Miniature Orizzontale", con 17 voci.

Ho notato che da mobile non si riesce a fare lo swipe con l'oggetto Galleria.

L'output finale che desidero è proprio quello, ma vorrei eliminare la barra orizzontale "Scrollbar" che compare da mobile su alcuni browser.

Lo spunto mi è venuto guardando online questo sito, che in materia di UX e design ne capisce qualcosina.

Volevo ricreare una pagina "Prodotto" con una sorta di menu per una navigazione rapida tra i vari prodotti, senza dover obbligare l'utente a ritornare sulla pagina "Catalogo" dove sono esposti i vari prodotti.

Per spiegare meglio il tutto e dare un'idea visualizzabile, questa in linea di massima sarà la pagina che raccoglie i vari prodotti "Catalogo" e successivamente ci saranno varie pagine "Prodotto".

Collegata all'idea appena esposta, vorrei ricreare una barra all'interno delle pagine (Prodotto e forse anche in Catalogo), per consentire al visitatore una navigazione più rapida da mobile e consentire l'acquisto del prodotto (es. qui) nella stessa pagina, senza trasformare in un discount il tutto in quanto dovrà essere visualizzata da clienti "Privati" e "Business".

Tra tutti gli oggetti che ci sono, l'oggetto "Tabella" mi sembra quello più versatile.

Lire plus
Posté le de Gabriele C.
Claudio D.
Claudio D.
Moderator
Meilleur utilisateur du mois IT
Gabriele C.
Buongiorno. Io intendo con la disposizione "Miniature Orizzontale", con 17 voci. Ho notato che da mobile non si riesce a fare lo swipe con l'oggetto Galleria.

allora non capisco cosa intenda tu per "swipe" ...

ho provato sul mio test con lo smartphone e si riesce a scorrere e selezionare senza problemi , anche alla risoluzione più bassa (android almeno, iphone non so)

Lire plus
Posté le de Claudio D.
Gabriele C.
Gabriele C.
User
Auteur
Claudio D.
allora non capisco cosa intenda tu per "swipe" ... ho provato sul mio test con lo smartphone e si riesce a scorrere e selezionare senza problemi , anche alla risoluzione più bassa (android almeno, iphone non so)

Per swipe intendo scorrere il dito da una parte all'altra di uno schermo, ho fatto dei test in locale avendo il PC  touch e non sono riuscito a scorrere le immagini.

Ora provo a esportare qui così possiamo verificare tutti.

Grazie per lo spunto! Credo sia più o meno simile al risultato della Tabella. Aggiungendo del codice elimino la Scrollbar su Google. 

Però su Firefox non funziona. Che codice dovrei inserire?

Non sta simpatico nemmeno a me perché non è di facile uso al primo impatto, ma non trovo altre soluzioni che occupino poco spazio.

Lire plus
Posté le de Gabriele C.
Claudio D.
Claudio D.
Moderator
Meilleur utilisateur du mois IT
Gabriele C.
Per swipe intendo scorrere il dito da una parte all'altra di uno schermo, ho fatto dei test in locale avendo il PC  touch e non sono riuscito a scorrere le immagini.

non so col touch , ma su smartphone e tablet la prova sul mio sito funziona...

Lire plus
Posté le de Claudio D.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Gabriele C.
... ...  Ora provo a esportare qui così possiamo verificare tutti. ... ... 

... così è finito lo scopo di quello che avevi chiesto, ...tanto vale come la tabella...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Gabriele C.
Gabriele C.
User
Auteur

Non comprendo l'ultimo messaggio.

Comunque sia ho esporto qui. Ma da cellulare non va.

Lire plus
Posté le de Gabriele C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Gabriele C.
Non comprendo l'ultimo messaggio. ... ... 

... la barra di scroll ... ... sta nella tua stessa domanda....laughing...

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... se non ricordo male, la presentazione che avevo detto prima, e che è prevista anche per la tabella, dovrebbe funzionare anche scrollando con il dito, quindi con tabelle ad hoc potrebbe essere l'ideale...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Claudio D.
Claudio D.
Moderator
Meilleur utilisateur du mois IT
 ‪ KolAsim ‪ ‪
... se non ricordo male, la presentazione che avevo detto prima, e che è prevista anche per la tabella, dovrebbe funzionare anche scrollando con il dito...

io rimango per la gallery...

mi pare @KolAsim, che la presentazione però puoi metterne solo uno per volta... 

a meno che in una scheda non ne inserisci più di uno...

...ora vi abbandono per un po' di ore...

buona domenica

Lire plus
Posté le de Claudio D.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... sì sì, anche la galleria mi era piaciuta; ...io purtroppo non posso provare...wink...

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Gabriele C.
Gabriele C.
User
Auteur

Se riesco parlo con il responsabile per domandare come preferisce procedere con la strutturazione.

Vi ringrazio nuovamente per il vostro prezioso aiuto.

Lire plus
Posté le de Gabriele C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... se le caratteristiche della tabella rimanessero quelle iniziali, cui i tuoi STAMP, col mio codice "elastico" potresti risolvere senza scroll e swipe...

... lo hai provato per riscontrare eventuali incongruenze, anche per una conferma o meno...?...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Gabriele C.
Gabriele C.
User
Auteur

Sì! Scusa se non ti ho dato un riscontro.

Ho provato qui.

Funziona egregiamente come ogni codice che hai sempre condiviso con gentilezza, tuttavia il mio interesse era solo eliminare la scrollbar.

Ho messo online qualche bozza per dare un'idea e consentire una scelta al responsabile.

Lire plus
Posté le de Gabriele C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... visto sullo smartphone, Test1,2,3,4,5,6,7, ...direi perfetti, ...sia in orizzontale che in verticale...

... grazie per il riscontro...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Gabriele C.
Gabriele C.
User
Auteur

Figurati, grazie a te! Il problema è che sono 17 voci (forse 19).

Lire plus
Posté le de Gabriele C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Gabriele C.
Figurati, grazie a te! Il problema è che sono 17 voci (forse 19).

... se sono tante voci, mi viene in mente la 500 con gli elefanti...laughing...

... ma, tu che puoi, potresti fare la prova con la tabella a schede o presentazione...

... e/o distruibuire su una o più righe/oggetti ...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪