Loading...
 
Features / Usability

Features / Usability


Adding modules side-by-side in module zone

posts: 11

Hi,

I want to display 2 modules (Search and Menu) side by side in a topbar. For this I added the modulezone module and then assigned the 2 modules to it. However, these are always displayed one below another. I even tried to mention the CSS class as mentioned here:
https://doc.tiki.org/Module+zone

You add a "zone", and then you can drop a module menu in it. The menu module creates the toggle button and internal nabbers. Modules assigned to the custom module zone module, if they are meant to be displayed side by side in a horizontal row, will need CSS rules for positioning. Since Tiki now uses Bootstrap grid classes, these are a recommended method. Three modules in a row could have the "top class" or "containing class" of "col-md-2", "col-md-8", and "col-md-2", for example, for divs or columns whose widths are proportioned 1:4:1. Some experimenting might be necessary to get the right combination of widths for the content of the modules.

It still does't display side-by-side. How do I make modules do that?

Thanks,
Amit

posts: 11
Forgot to mention, I am using Tiki 14.0

posts: 1563 Germany

 Hello Amit,

by default modules have a 100% width.

You have to limit the with with CSS (helpful to apply some class to the module)

You could experiment with applying some Bootstrap Gutter class (example col-md-6) to the module in tiki-admin_modules.php . This type of classes has predefined values and then you did not need to customise css.

Alternatively for your use case you can build a custom module navbar (aswell in tiki-admin_modules.php):

1.) copy and paste a bootstrap navbar, ex. from http://getbootstrap.com

2.) customise to your needs and use a Tiki menu in a list element

Copy to clipboard
<li>{menu Id=X bootstrap=y/n css =y/n ... }</li>


3.) use the search module in another list element

Copy to clipboard
{module module="search" ...}

I am not sure which searh module to use best - search or search box or so. Just check the list of all modules in tiki-admin_modules.php and play a bit with it.

see here: Bootstrap Navbar

Regards,
Torsten


posts: 11

Thanks Torsten.

I tried the first option - for my search module the parameters are: 

input_size=25
compact=y
topclass=col-md-4

 

and  for menu module

 

structureId=Streams
type=horiz
nobox=y
topclass=col-md-10

However this doesn't seem to work. 

The other option you have mentioned, I am not too comfortable with. I have installed the TikiWiki for the first time and not too keen on making changes to files.

posts: 4656 Japan

Just read your latest post and one thing to change is the "4" and/or "10". The two numbers must equal (or be less to but equal is best) 12 in order to display side by side.

-- Gary

posts: 1563 Germany

Actually I do find this stil a bit confusing and try to add a few lines hoping to clarify thiungs and not to even meke it more confusing for our new community member ;-)

1.) Basically Bootstrap and thus Tiki's layout works with rows and columns

2.) You can put up to 12 columns into one row, as we have a 12 gutter system. One gutter's width is 1/12 th of 100% or optionally 1/12 of fixed width.

3.) The width of each column in a row is defined by a class set to the columns defining div element. This class does not define an absolute width, but it defines over how many gutters the column spans.
Example: a column class defining 3 gutters defines a width of 3/12 th of the conaining row.

4.) The brake point at which screen width the displayed column width changes to 100% is defined by the same class.
The brake points xs (extra small), sm (small), md (middle) and lg (large) are predefined in the Bootstrap based CSS file of the theme.

5.) The sum of the gutters (defining the width) of all columns in one row shall be exact 12.

Now some examples:

{CODE(color=html)}
a row with two columns, each 6/12th width and middle brake point:



content


content



a row with 3 columns, each 4/12th width and small brake point:



content


content


content



a row with 4 different width colums and small brake point, but made with Wiki Syntaxfor use in a wiki page:

{DIV(class="row")}

content

{DIV(class="col-sm-4")}
content
{DIV)}

content
{DIV

content

{CODE}

You see, that in all cases the number of gutters sum up to 12.

Surely you can do more fancy stuff by using different brake points or by using additional classes like pull/push or visible/hidden classes, which use gutters and brake points aswell.

More information at http://getbootstrap.com or http://themes.tiki.org

Regards,
Torsten


posts: 4656 Japan

If you want the modules side by side in Tiki's "topbar" module zone, you don't need to make a custom module zone. But we need to be sure about what you mean by topbar. In Tiki traditionally there is a "top" module zone that contains the site logo and title, as at this site. Then below that there's a "topbar" module zone that at this site contains a menu and a search form. If by topbar you mean this zone, you can assign modules to it directly, without creating a custom module zone (the same being true for any of the default module zones).

Just input for each assigned module's "top (containing) class" parameter a Bootstrap grid div class name like "col-sm-6" to each, to specify a width for it. (Bootstrap uses a grid system based on twelve columns, so "6" means half of the 12 columns' width, and the "sm" means that in small displays or larger, the 6/12 width will be used for the module.)

I hope this helps.

-- Gary


posts: 11

Hi,

It worked! I had tried to put  the modules directly to topbar (yes its the one below the top ), but still it was not working. However, I had made a mistake, there was already another module in topbar (quicklinks, only for admin) for which I hadn't given the cloumn width. So it was occupying 100% and then the other 2 were getting displaced. Now I have given columns to all 3 and its displayed properly.

 

Just on another note, How do I display the topbar full width like this site is using? 

 

Thanks for your help!

Regards,

Amit


posts: 4656 Japan

To get the full-width topbar, you can change the "Site layout" on the Look & Feel admin page (tiki-admin.php?page=look). The "Fixed_top_modules" and "Social_networking" options will do the trick. The first one is what is used at this site. It displays the top zone and the topbar zone. The second displays some info automatically (site title, etc) and the topbar module zone's modules.

-- Gary


Upcoming Events

1)  18 Apr 2024 14:00 GMT-0000
Tiki Roundtable Meeting
2)  16 May 2024 14:00 GMT-0000
Tiki Roundtable Meeting
3)  20 Jun 2024 14:00 GMT-0000
Tiki Roundtable Meeting
4)  18 Jul 2024 14:00 GMT-0000
Tiki Roundtable Meeting
5)  15 Aug 2024 14:00 GMT-0000
Tiki Roundtable Meeting
6)  19 Sep 2024 14:00 GMT-0000
Tiki Roundtable Meeting
7) 
Tiki birthday
8)  17 Oct 2024 14:00 GMT-0000
Tiki Roundtable Meeting
9)  21 Nov 2024 14:00 GMT-0000
Tiki Roundtable Meeting
10)  19 Dec 2024 14:00 GMT-0000
Tiki Roundtable Meeting