[usually related to site CSS, post link] overlapping content

More
10 years 9 months ago #44013 by gkhn
Hi there,

I have an item type

Positions are as follow:

Image-Text next to the image

I have created two items using the same item type.

1st item: The image is horizontal and I am using col-sm-3 for the image and col-sm-9 for the text.
2nd item: The image is vertical and I am using the same item type therefore the same layout.

With the second item, the text is overlapping the image. If I change it to something like col-sm-6 and col-sm-6 then my problem is fixed but then again the first item is broken...

The solution is to create a new item type for this item or what do you think I should do?

Thank you.

Please Log in or Create an account to join the conversation.

More
10 years 9 months ago #44033 by micker
... strange can give a link ?

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

More
10 years 9 months ago #44035 by gkhn

micker wrote: ... strange can give a link ?

Hi micker, can I send you the link PM?

Thank you.

Please Log in or Create an account to join the conversation.

More
10 years 9 months ago #44041 by ggppdk
Hello

posting CSS issues specific to a site is -almost- meaningless without a link,

... if it is a general CSS questions then OK

but you have a website that probably loads at least a dozen of CSS files


-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Please Log in or Create an account to join the conversation.

More
10 years 9 months ago #44057 by gkhn

ggppdk wrote: Hello

posting CSS issues specific to a site is -almost- meaningless without a link,

... if it is a general CSS questions then OK

but you have a website that probably loads at least a dozen of CSS files


Yes sure. I should have provided the original source code. Sorry about that.
Code:
<?php /** * HTML5 Template * @version 1.5 stable $Id: item_html5.php 0001 2012-09-23 14:00:28Z Rehne $ * @package Joomla * @subpackage FLEXIcontent * @copyright (C) 2009 Emmanuel Danan - www.vistamedia.fr * @license GNU/GPL v2 * * FLEXIcontent is a derivative work of the excellent QuickFAQ component * @copyright (C) 2008 Christoph Lukes * see www.schlu.net for more information * * FLEXIcontent is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. */ defined( '_JEXEC' ) or die( 'Restricted access' ); // first define the template name $tmpl = $this->tmpl; $item = $this->item; $menu = JFactory::getApplication()->getMenu()->getActive(); JFactory::getDocument()->addScript( JURI::base(true).'/components/com_flexicontent/assets/js/tabber-minimized.js'); JFactory::getDocument()->addStyleSheet(JURI::base(true).'/components/com_flexicontent/assets/css/tabber.css'); // Prepend toc (Table of contents) before item's description (toc will usually float right) // By prepend toc to description we make sure that it get's displayed at an appropriate place if (isset($item->toc)) { $item->fields['text']->display = $item->toc . $item->fields['text']->display; } // *********** // DECIDE TAGS // *********** $page_heading_shown = $this->params->get( 'show_page_heading', 1 ) && $this->params->get('page_heading') != $item->title; // Main container $mainAreaTag = $page_heading_shown ? 'section' : 'article'; // SEO, header level of title tag $itemTitleHeaderLevel = ( $this->params->get( 'show_page_heading', 1 ) && $this->params->get('page_heading') != $item->title && $this->params->get('show_title', 1) ) ? '2' : '1'; // SEO, header level of tab title tag $tabsHeaderLevel = $itemTitleHeaderLevel == '2' ? '3' : '2'; $page_classes = 'flexicontent'; $page_classes .= $this->pageclass_sfx ? ' page'.$this->pageclass_sfx : ''; $page_classes .= ' fcitems fcitem'.$item->id; $page_classes .= ' fctype'.$item->type_id; $page_classes .= ' fcmaincat'.$item->catid; if ($menu) $page_classes .= ' menuitem'.$menu->id; ?> <?php echo '<'.$mainAreaTag; ?> id="flexicontent" class="<?php echo $page_classes; ?> group" > <?php echo ( ($mainAreaTag == 'section') ? '<header>' : ''); ?> <?php if ($item->event->beforeDisplayContent) : ?> <!-- BOF beforeDisplayContent --> <aside class="fc_beforeDisplayContent group"> <?php echo $item->event->beforeDisplayContent; ?> </aside> <!-- EOF beforeDisplayContent --> <?php endif; ?> <?php $pdfbutton = flexicontent_html::pdfbutton( $item, $this->params ); $mailbutton = flexicontent_html::mailbutton( FLEXI_ITEMVIEW, $this->params, $item->categoryslug, $item->slug ); $printbutton = flexicontent_html::printbutton( $this->print_link, $this->params ); $editbutton = flexicontent_html::editbutton( $item, $this->params ); $statebutton = flexicontent_html::statebutton( $item, $this->params ); $approvalbutton = flexicontent_html::approvalbutton( $item, $this->params ); ?> <?php if ($pdfbutton || $mailbutton || $printbutton || $editbutton || $statebutton || $approvalbutton) : ?> <!-- BOF buttons --> <div class="buttons"> <?php echo $pdfbutton; ?> <?php echo $mailbutton; ?> <?php echo $printbutton; ?> <?php echo $editbutton; ?> <?php echo $statebutton; ?> <?php echo $approvalbutton; ?> </div> <!-- EOF buttons --> <?php endif; ?> <?php if ( $this->params->get( 'show_page_heading', 1 ) ) : ?> <!-- BOF page heading --> <h1 class="componentheading"> <?php echo $this->params->get('page_heading'); ?> </h1> <!-- EOF page heading --> <?php endif; ?> <?php echo ( ($mainAreaTag == 'section') ? '</header>' : ''); ?> <?php echo ( ($mainAreaTag == 'section') ? '<article>' : ''); ?> <?php $header_shown = $this->params->get('show_title', 1) || $item->event->afterDisplayTitle || isset($item->positions['subtitle1']) || isset($item->positions['subtitle2']) || isset($item->positions['subtitle3']); ?> <?php if ( $header_shown ) : ?> <header class="group"> <?php endif; ?> <?php if ($this->params->get('show_title', 1)) : ?> <!-- BOF item title --> <?php echo '<h'.$itemTitleHeaderLevel; ?> class="contentheading"><span class="fc_item_title"> <?php echo ( mb_strlen($item->title, 'utf-8') > $this->params->get('title_cut_text',200) ) ? mb_substr ($item->title, 0, $this->params->get('title_cut_text',200), 'utf-8') . ' ...' : $item->title; ?> </span><?php echo '</h'.$itemTitleHeaderLevel; ?>> <!-- EOF item title --> <?php endif; ?> <?php if ($item->event->afterDisplayTitle) : ?> <!-- BOF afterDisplayTitle --> <div class="fc_afterDisplayTitle group"> <?php echo $item->event->afterDisplayTitle; ?> </div> <!-- EOF afterDisplayTitle --> <?php endif; ?> <?php if (isset($item->positions['subtitle1'])) : ?> <!-- BOF subtitle1 block --> <div class="flexi lineinfo subtitle1 group"> <?php foreach ($item->positions['subtitle1'] as $field) : ?> <div class="flexi element"> <?php if ($field->label) : ?> <span class="flexi label field_<?php echo $field->name; ?>"><?php echo $field->label; ?></span> <?php endif; ?> <div class="flexi value field_<?php echo $field->name; ?>"><?php echo $field->display; ?></div> </div> <?php endforeach; ?> </div> <!-- EOF subtitle1 block --> <?php endif; ?> <?php if (isset($item->positions['subtitle2'])) : ?> <!-- BOF subtitle2 block --> <div class="flexi lineinfo subtitle2 group"> <?php foreach ($item->positions['subtitle2'] as $field) : ?> <div class="flexi element"> <?php if ($field->label) : ?> <span class="flexi label field_<?php echo $field->name; ?>"><?php echo $field->label; ?></span> <?php endif; ?> <div class="flexi value field_<?php echo $field->name; ?>"><?php echo $field->display; ?></div> </div> <?php endforeach; ?> </div> <!-- EOF subtitle2 block --> <?php endif; ?> <?php if (isset($item->positions['subtitle3'])) : ?> <!-- BOF subtitle3 block --> <div class="flexi lineinfo subtitle3 group"> <?php foreach ($item->positions['subtitle3'] as $field) : ?> <div class="flexi element"> <?php if ($field->label) : ?> <span class="flexi label field_<?php echo $field->name; ?>"><?php echo $field->label; ?></span> <?php endif; ?> <div class="flexi value field_<?php echo $field->name; ?>"><?php echo $field->display; ?></div> </div> <?php endforeach; ?> </div> <!-- EOF subtitle3 block --> <?php endif; ?> <?php if ( $header_shown ) : ?> </header> <?php endif; ?> <div class="fcclear"></div> <?php // Find if at least one tabbed position is used $tabcount = 6; $createtabs = false; for ($tc=1; $tc<=$tabcount; $tc++) { $createtabs = @$createtabs || isset($item->positions['subtitle_tab'.$tc]); } ?> <?php if ($createtabs) :?> <section> <!-- tabber start --> <div id="fc_subtitle_tabset" class="fctabber group"> <?php for ($tc=1; $tc<=$tabcount; $tc++) : ?> <?php $tabpos_name = 'subtitle_tab'.$tc; $tabpos_label = JText::_($this->params->get('subtitle_tab'.$tc.'_label', $tabpos_name)); $tab_id = 'fc_'.$tabpos_name; ?> <?php if (isset($item->positions[$tabpos_name])): ?> <!-- tab start --> <div id="<?php echo $tab_id; ?>" class="tabbertab"> <h3 class="tabberheading"><?php echo $tabpos_label; ?></h3><!-- tab title --> <div class="flexi lineinfo"> <?php foreach ($item->positions[$tabpos_name] as $field) : ?> <div class="flexi element"> <?php if ($field->label) : ?> <span class="flexi label field_<?php echo $field->name; ?>"><?php echo $field->label; ?></span> <?php endif; ?> <div class="flexi value field_<?php echo $field->name; ?>"><?php echo $field->display; ?></div> </div> <?php endforeach; ?> </div> </div> <!-- tab end --> <?php endif; ?> <?php endfor; ?> </div> <!-- tabber end --> <section> <?php endif; ?> <div class="fcclear"></div> //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// <?php if ((isset($item->positions['image'])) || (isset($item->positions['top']))) : ?> <!-- BOF image/top row --> <?php if (isset($item->positions['image'])) : ?> <!-- BOF image block --> <?php foreach ($item->positions['image'] as $field) : ?> <div class="col-sm-3"> <?php echo $field->display; ?> </div> <?php endforeach; ?> <?php endif; ?> <?php if (isset($item->positions['top'])) : ?> <?php foreach ($item->positions['top'] as $field) : ?> <div class="col-sm-9"> <?php echo $field->display; ?> </div> <?php endforeach; ?> <?php endif; ?> <?php endif; ?>[/b] //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// <div class="fcclear"></div> <?php if (isset($item->positions['description'])) : ?> <!-- BOF description --> <div class="description group"> <?php foreach ($item->positions['description'] as $field) : ?> <?php if ($field->label) : ?> <div class="desc-title"><?php echo $field->label; ?></div> <?php endif; ?> <div class="desc-content"><?php echo $field->display; ?></div> <?php endforeach; ?> </div> <!-- EOF description --> <?php endif; ?> <div class="fcclear"></div> <?php // Find if at least one tabbed position is used $tabcount = 6; $createtabs = false; for ($tc=1; $tc<=$tabcount; $tc++) { $createtabs = @$createtabs || isset($item->positions['bottom_tab'.$tc]); } ?> <?php if ($createtabs) :?> <section> <!-- tabber start --> <div id="fc_bottom_tabset" class="fctabber group"> <?php for ($tc=1; $tc<=$tabcount; $tc++) : ?> <?php $tabpos_name = 'bottom_tab'.$tc; $tabpos_label = JText::_($this->params->get('bottom_tab'.$tc.'_label', $tabpos_name)); $tab_id = 'fc_'.$tabpos_name; ?> <?php if (isset($item->positions[$tabpos_name])): ?> <!-- tab start --> <div id="<?php echo $tab_id; ?>" class="tabbertab"> <h3 class="tabberheading"><?php echo $tabpos_label; ?></h3><!-- tab title --> <div class="flexi lineinfo"> <?php foreach ($item->positions[$tabpos_name] as $field) : ?> <div class="flexi element"> <?php if ($field->label) : ?> <span class="flexi label field_<?php echo $field->name; ?>"><?php echo $field->label; ?></span> <?php endif; ?> <div class="flexi value field_<?php echo $field->name; ?>"><?php echo $field->display; ?></div> </div> <?php endforeach; ?> </div> </div> <!-- tab end --> <?php endif; ?> <?php endfor; ?> </div> <!-- tabber end --> </section> <?php endif; ?> <div class="fcclear"></div> <?php $footer_shown = isset($item->positions['bottom']) || $item->event->afterDisplayContent; ?> <?php if ( $footer_shown ) : ?> <footer class="group"> <?php endif; ?> <?php if (isset($item->positions['bottom'])) : ?> <!-- BOF bottom block --> <?php $bottom_cols = $this->params->get('bottom_cols', 'two'); $span_class = $bottom_cols == 'one' ? 'span12' : 'span6'; // bootstrap span ?> <div class="flexi infoblock <?php echo $bottom_cols; ?>cols group"> <ul class="flexi row"> <?php foreach ($item->positions['bottom'] as $field) : ?> <li class="flexi <?php echo $span_class; ?>"> <div> <?php if ($field->label) : ?> <span class="flexi label field_<?php echo $field->name; ?>"><?php echo $field->label; ?></span> <?php endif; ?> <div class="flexi value field_<?php echo $field->name; ?>"><?php echo $field->display; ?></div> </div> </li> <?php endforeach; ?> </ul> </div> <!-- EOF bottom block --> <?php endif; ?> <?php if ($item->event->afterDisplayContent) : ?> <!-- BOF afterDisplayContent --> <aside class="fc_afterDisplayContent group"> <?php echo $item->event->afterDisplayContent; ?> </aside> <!-- EOF afterDisplayContent --> <?php endif; ?> <?php if ( $footer_shown) : ?> </footer> <?php endif; ?> <?php echo $mainAreaTag == 'section' ? '</article>' : ''; ?> <?php if ($this->params->get('comments') && !JRequest::getVar('print')) : ?> <!-- BOF comments --> <section class="comments group"> <?php if ($this->params->get('comments') == 1) : if (file_exists(JPATH_SITE.DS.'components'.DS.'com_jcomments'.DS.'jcomments.php')) : require_once(JPATH_SITE.DS.'components'.DS.'com_jcomments'.DS.'jcomments.php'); echo JComments::showComments($item->id, 'com_flexicontent', $this->escape($item->title)); endif; endif; if ($this->params->get('comments') == 2) : if (file_exists(JPATH_SITE.DS.'plugins'.DS.'content'.DS.'jom_comment_bot.php')) : require_once(JPATH_SITE.DS.'plugins'.DS.'content'.DS.'jom_comment_bot.php'); echo jomcomment($item->id, 'com_flexicontent'); endif; endif; ?> </section> <!-- BOF comments --> <?php endif; ?> <?php echo '</'.$mainAreaTag.'>'; ?>
This is my item pages source code. The part in bold is where the problem is. When I have vertical image, the text next to this image overlaps.

And I have the standard flexi css. I manually load bootstrap 3 and my template override css. These are the css files I have. Thank you.

Please Log in or Create an account to join the conversation.

More
10 years 9 months ago #44065 by micker
send link

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

Moderators: vistamediajoomlacornerggppdk
Time to create page: 0.308 seconds
Save
Cookies user preferences
We use cookies to ensure you to get the best experience on our website. If you decline the use of cookies, this website may not function as expected.
Accept all
Decline all
Essential
These cookies are needed to make the website work correctly. You can not disable them.
Display
Accept
Analytics
Tools used to analyze the data to measure the effectiveness of a website and to understand how it works.
Google Analytics
Accept
Decline