CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designdrupal-7
Shaza Abou Shakra
Shaza Abou Shakra

Reputation: 11

bootstrap table-responsive scroll not working on ios (direction rtl)

i'm using bootsrap for a website that has an arabic and english versions. so table-responsive which is supposed to add a scroll to the table on mobile is not working on IOS. the scroll is not showing and the table is not scrolling. however when i add direction: rtl to the table-responsive class it works but messes up my design. any help is appreciated.

Upvotes: 1

Views: 2905

Answers (4)

kannan D.S
kannan D.S

Reputation: 1101

RTL Best Solution.Tested In All Devices

.table-responsive {
-webkit-overflow-scrolling: touch;
direction: ltr;
}
.table-responsive > table {
direction: rtl !important;
}
table, th {
direction:rtl
}
table, tr {
direction:rtl;
}

$('.table-responsive').animate({ scrollLeft: $('.thposition1').position().left }, 500);

Upvotes: 2

Mohamed Osama
Mohamed Osama

Reputation: 61

You should add touch !important; to your .table-responsive along with max-width: none; to the .table-responsive .table

.table-responsive {
  -webkit-overflow-scrolling: touch !important;
}

.table-responsive .table {
  max-width: none;
}

Upvotes: 0

Ali Gh
Ali Gh

Reputation: 700

just add these lines to your CSS with check priority :

.table-responsive {
      direction:ltr !important;
      }
.table-responsive .table {
      direction:rtl !important;
}

wish can helps you ;-)

Upvotes: 0

MajiD
MajiD

Reputation: 2585

just do this :

.table-responsive .table {
    max-width: none;
}

Upvotes: 2

Related Questions