Easiest way to create 2 column layout (filters left, data right)

Status
Not open for further replies.
F

fractikdesigns

Member
Is there an easy way to create a 2 column look and feel? Meaning having the filters on the left and the data tables on the right? Was trying to manipulate via CSS and it seems like no matter what i do i cannot get it to work the way i would like.

I assume I have to create a custom bootstrap table for this or is there a way either css or in the component to do so? Pretty much similar to how you have the tutorials section of your website setup.

Can i put filters in a module and place it possibly? Not sure if that is possible or not.

Thanks in advance.. Site is http://bs.fractik.com (site info is in my profile)

See attached image for proposed idea2012voicelinkMOCK.jpg
 
found something in the wiki on creating templates... Seems and I assume that is the best way to go for this? Just wasn't sure if there was anything easier... So ill take a stab at it and see what I can do. Actually changing the list view by custom template will help me make the data table look like above since you cannot round a TR in a table and i couldn't get it to space properly in html either.

Any advice let me know.. if not ill close this tomorrow afternoon or delete as it seems I most likely found my own answer in the wiki...

What was that editor you were using in the video template tutorial? Any recommendations for a MAC would be appreciated. Used to dreamweaver but i don't have that for MAC and no longer have a PC. Thanks
 
Not about 2 columns but do you know the list filter option "Filters"="under headings"?
 
Yeah, you'd probably need to clone a template to do that, by coping the ./components/com_fabrik/views/list/tmpl/bootstrap to a new folder.

Shouldn't need too much by way of changes to the overall structure, in default.php and default_fiters.php.

Let us know if you need some help getting that structure the way you want it.

-- hugh
 
Quite a nice layout actually.

It's fairly straight forward to sort out thanks to the benefits of bootstrap. I mocked one up quickly but you will need to adjust it to your requirements.

Essentially I added a "span12" at the beginning of default.php, moved the filters code and added them in a span3 and then the rest of the list code within span9. The result is shown in the picture attached. I've also attached the template with the few mods for you to try. As I say you may need to tweak it but the filters work as they should.
 

Attachments

  • filterleft.zip
    10.9 KB · Views: 256
  • leftfilter.png
    leftfilter.png
    37.3 KB · Views: 434
getting this when i load the template. I renamed it to voicelink 2

Fatal error​
: Class 'FText' not found in ​
/home/fracti7/public_html/bs/components/com_fabrik/views/list/tmpl/voicelink2/default_filter.php​
on line ​
39​
 
I made an adjustment to the above for the filter heading. but using your template as is i get the follow error


Fatal error: Class 'FText' not found in /home/fracti7/public_html/bs/components/com_fabrik/views/list/tmpl/filterleft/default_filter.php on line 34
 
Hmm yes I can see the error on your site. It seems to be complaining about outputting one of the search parameters, I'll enable them on my test site to see if I can replicate the error.
 
FText was added very recently. Are you running a recent GitHub update.


Gesendet mit Tapatalk
 
I can't see to work out why it would error, there isn't any drastic changes that we are doing. Are you running a fairly recent GitHub?

EDIT:- Yes as Troester says. I missed her reply.
 
There is no harm upgrading to the latest code, although I would suggest backing up in full before you do so.

FText was added very recently
Click to expand...

As per Troester comment it is probably the cause. I haven't yet gone through the changelog to see when that was added though.

Alternatively just look at the changes I made and add them to your previous template.
 
I updated to latest github and its working, thanks for the suggestions... Only thing is since im using a 960px template its not displaying correctly. I assume I can change the span 3 and 6 to custom css and control that way possibly with widths? Since you already separated the code into columsn for me? So close now this is great.

I also need to look at the code to see where the search code is so i can put that in the filter box as well http://bs.fractik.com
 
nevermind. realized i had filters set to 4 columsn instead of 1. changed to 1 and it started working correctly... just need to see where the search code is and move that to the bottom of the filter and ill be set on my template. thanks so much
 
only thing now is it seems the width is off compared to what it was. a lot of padding on either side... hmmmm but the columns are working great.

Should code 2 columns into the software, might be a good feature... any suggestions on the padding/margin on either side let me know. Going to look through and see what it could be now.
 
Is this the code for the search box? I cannot seem to get it moved to the bottom of the filter list...

Code: 
<form class="fabrikForm form-search" action="<?php echo $this->table->action;?>" method="post" id="<?php echo $this->formid;?>" name="fabrikList">
 
I discovered something and why things aren't working 100%...

Its adding extra code and changing the way it renders the DIV...

First example using span3 and 9

Code: 
<div class=""span3"">

Its adding an extra set of quotations

If i try to hardcode using style=

Code: 
<div style=""float:left;" width:740px;">

so while it works there is extra padding and all kinds of issues. There is a margin-left on all span classes and a 30px margin on span3..

How can i get this resolved?
 
Status
Not open for further replies.

Useful links

  • Create a Fabrik Account (Downloads)
  • Create a Forum Account
  • Fabrik Wiki
  • Fabrik 4 Changelog /Install /Upgrade
    • We are in need of some funding.
    More details.

    Thank you.

    Members online

    No members online now.
    Total: 85 (members: 0, guests: 85)
    Back
    Top