Different breakpoints for different orientation

[rashidul0405]

Hi,

as we already computed orientation and related stuffs. I think it would be gr8 to support different breakpoints for different orientation.

For example: I've implemented FooTable in one of my project. While I'm on portrait mode, I remove the right side bar and when on landscape I wanna c the right side. As width changes so as Footable breakpoints

[steveush]

Hi rashidul04,

I get where you coming from but I never implemented this sort of functionality as FooTable works solely off width's and allows you to define multiple width's using the breakpoints option. I originally intended to use orientation etc in the calculations as evidenced by the info object containing these details but as I refactored it down it became apparent that width was the only thing I was concerned about. I left the orientation information in there though so you could use it in a handler bound to one of the custom events and do as you like with it.

That said could you try the following;

Add some new breakpoints defining your portrait widths (the default phone and tablet widths will remain), the below shows an example of this:

$('table').footable({
  breakpoints: {
    phone_p: 320,
    tablet_p: 768
  }
});

Once you have these new breakpoints you can use them where needed to better refine when the column is hidden or shown. In the below example the Status column will now be hidden when in phone and tablet portrait widths.

    <table class="footable">
      <thead>
        <tr>
          <th data-class="expand">
            First Name
          </th>
          <th>
            Last Name
          </th>
          <th data-hide="phone_p,phone,tablet_p,tablet">
            Job Title
          </th>
          <th data-hide="phone_p,phone,tablet_p,tablet">
            DOB
          </th>
          <th data-hide="phone_p,tablet_p">
            Status
          </th>
        </tr>
      </thead>
      <tbody>
          ...
      </tbody>
    </table>

This should allow you to achieve the effect you require.

Thanks
Steve

[steveush]

No response, closing issue.