标签: fluid

对于一个我正在使用Typo3 v6.0的项目.我正在寻找创建嵌套的内容元素或内容元素容器.我希望能够在不使用特定模板的情况下创建内联双列布局.我希望不使用templavoila 这样做.

我曾尝试扩展是gridelements,kb_nescefe,bs_fce,multicolumn但这些不工作,因为它们与TYPO3的V6兼容.

我的目标是像附加图像那样的最终结果.内联双列内容可以省略,使用一次或多次使用,包含任何其他内容元素.

我在这里寻找最简单的解决方案.我更喜欢不需要在flux诸如此类的解决方案中投入大量学习时间(http://fedext.net/ - 看起来很酷,但现在也耗费时间)

有任何想法吗？

这可能是一个非常简单的问题,但我已经离开CSS场景一段时间了,我似乎无法弄明白.我正在使用Bootstrap框架,我有一个固定的页眉和页脚.其间的容器包括导航栏和内容区域.我希望该容器填充页眉和页脚之间的整个空间(100%高度).

这是项目的jsFiddle:http://jsfiddle.net/NyXkt/2/

这是当前的html结构:

<div id="wrapper">
    <!-- Header -->
    <div class="container-fluid no-padding header">
        <div class="row-fluid fill-height">
            <!-- Header Left -->
            <div class="span2">
                <p class="center-text">Left</p>
            </div>
            <!-- Header Middle -->
            <div class="span8">
                <p class="center-text">Middle</p>
            </div>
            <!-- Header Right -->
            <div class="span2">
                <p class="center-text">Right</p>
            </div>
        </div>
    </div>
    <!-- Content Wrapper -->
    <div class="container-fluid no-padding fill">
        <div class="row-fluid">
            <div class="span2">
                <div class="well sidebar-nav-fixed no-padding">
                    <ul id="nav">
                        <li><a href="#">Item 1</a>

                            <ul>
                                <li><a href="#">Sub-Item 1 a</a>
                                </li>
                                <li><a href="#">Sub-Item 1 b</a>
                                </li>
                                <li><a …

我选择使用Raphaëljavascript库来获得广泛的浏览器支持,但是我无法在任何浏览器中正常显示SVG,Chrome和Firefox除外.我一直在摸不着头脑,我很想听听如何让SVG在响应式布局中工作.

Chrome和Firefox 完全按照我的意愿显示SVG.它均匀地缩放,保持正确的宽高比及其父级给定宽度的百分比.

Internet Explorer保持正确的宽高比,但不能与其父级正确缩放.

Safari的父级宽度适当缩放,但高度不合适.相对于父容器的高度以某种方式设置为100%.

使用Javascript

var menu = Raphael('menu', '100%', '100%');

menu.setViewBox('0', '0', '50', '50', true);

var menu_bg = menu.rect(0,0, 50, 50);
    menu_bg.attr({
        id : 'menu_bg',
        'stroke-width' : '0',
        'fill' : '#000'
    });

CSS

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    height: 100%;
}
#menu { 
    width: 50%;
    background: #60F;
    padding: 2.5%;
}
#menu svg { 
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
}
#text { …

在TYPO3 6.x中,快速创建自定义内容元素的简单方法是什么？

一个典型的例子(也许是一组推荐书):

在后端(有足够的标签):

• 一个图像
• 输入字段
• textarea

渲染时:

• 图像大小调整为xy
• 输入包含在h2中
• textarea通过parseFunc传递并包含更多标记

理想情况下,这些在页面模块中可用作cType,但至少在列表模块中可用.并使用流体模板.

我的问题:

• 从另一个CMS我习惯于同时应用于BE和FE的内容项模板(你为它应该做什么编写模板,然后只有那种类型的内容元素有一个后端项) - 但那是不是流体如何工作 - 或者可以做到吗？

• 是否有可以处理此类自定义内容元素的扩展(除了Templavoila)？

• 或者我是否必须为每个此类字段类型创建自定义extbase/fluid扩展？

• 顺便说一句:是否有一个推荐的新extbase kickstarter教程？我被所有领域建模的东西吓跑了.

plugin.tx_xxx {
    setting {
        storagePid = 23
    } 
}

我想在实用程序文件中使用此TYPO3设置.请帮我.

我们开发了一个软件.在这个软件中,我们根据不同的情况在各种输入屏幕上显示和隐藏一些控件.

当我们隐藏控件时会发生的事情是该控件占用的空间保持不变,并且布局在某些时候看起来非常糟糕.在具有更多控件的屏幕中.我们的客户不喜欢这样,并要求我们对此做些什么.

我的问题:我们是否可以通过某种方式创建流体布局,以便在隐藏控件时,其余控件会自动调整自身以填充隐藏控件所留下的空白区域,当控件显示时,它们应自动让路为控制和相应调整自己.

我知道我们可以通过编码实现这一点,但是每个屏幕需要大量代码来调整布局.我正在寻找能够减少每个屏幕编码的东西,因为有80多个屏幕.

请建议一些方法,它可以减少错误,并且可以在每个输入屏幕中摆脱不必要的编码.

是否可以在TYPO3 Fluid模板中获取当前语言键(或代码)？

与此同时,我发现了另一种使用此处的视图助手的解决方案:

<?php
class Tx_AboUnitReservation_ViewHelpers_LanguageViewHelper extends Tx_Fluid_Core_ViewHelper_AbstractViewHelper {

    /**
     * Get the current language
     */
    protected function getLanguage() {
        if (TYPO3_MODE === 'FE') {
            if (isset($GLOBALS['TSFE']->config['config']['language'])) {
                return $GLOBALS['TSFE']->config['config']['language'];
            }
        } elseif (strlen($GLOBALS['BE_USER']->uc['lang']) > 0) {
            return $GLOBALS['BE_USER']->uc['lang'];
        }
        return 'en'; //default
    }

    /**
     * Return current language
     * @return  string
     */
    public function render() {
        return $this->getLanguage();
    }

}

?>

我在流体模板中使用如下.

<f:alias map="{isGerman: 'de'}">
    <f:if condition="{aboUnitReservation:language()} == {isGerman}">
        <script type="text/javascript" src="{f:uri.resource(path:'js/jquery.ui.datepicker-de-CH.js')}"></script>
    </f:if>
</f:alias>

我正在尝试创建一个流畅的CSS网格,它适用于Firefox和IE8 +但不适用于Safari/Chrome/Opera,其中子像素舍入问题变得可见:

http://jsfiddle.net/bJKQ6/2/

.column {
  float: left;
  width: 25%;
}

主容器的宽度为100%,如果您在Safari/Chrome/Opera中更改浏览器大小,则可以看到圆角宽度是如何不一致的.

经过对该问题的广泛阅读后,我理解"子像素舍入没有正确或错误的解决方案",但Firefox方式对我来说似乎是最好的妥协.(例如,如果我设置4个宽度为25%的div,我希望覆盖区域为100%.)

我想知道是否有一个我错过的CSS解决方案,或者一些JavaScript来解决问题.

谢谢!

更新:截至2014年5月,Chrome 33和Safari 7似乎已经采用了"Firefox方式".

我正在尝试使用HTML和Javascript构建自定义日历,您可以将任务从一天拖放到另一天.我想将第一列和最后两列作为固定宽度并使剩余的列(周一到周五)流畅,以便表总是填满其父级的100%.

我遇到的问题是流体TD根据其中的内容自动调整大小,这意味着当我将任务从一天拖到另一天时,列宽会调整大小.我希望周一到周五的大小完全相同,无论内容如何,​​并且没有设置文本溢出:隐藏; (因为任务总是需要可见)

即我希望灰色列固定宽度和红色柱流动但彼此均匀,无论其中的内容如何.

编辑:我正在使用jQuery进行拖放功能,因此JavaScript解决方案也可以(尽管不是更好).

JSFiddle Live示例

HTML:

<table>
  <tr>
    <th class="row_header">Row Header</th>
    <th class="fluid">Mon</th>
    <th class="fluid">Tue</th>
    <th class="fluid">Wed</th>
    <th class="fluid">Thurs</th>
    <th class="fluid">Fri</th>
    <th class="weekend">Sat</th>
    <th class="weekend">Sun</th>
  </tr>
  <tr>
    <td>Before Lunch</td>
    <td>This col will be wider than the others because it has lots of content...</td>
    <td></td>
    <td></td>
    <td></td>
    <td>But I would really like them to always be the same size!</td>
    <td></td>
    <td></td>
  </tr>
</table>

CSS:

    table {
        width: 100%;
    }       

    td, th {
        border:1px solid black;
    }  

    th { …

我想比较两个日期.我想创建一个条件来检查我的数据库中的日期是否早于两天中的日期.

这是我的两个变量:

{<f:format.date format="d.m.Y">+2 days</f:format.date>}
{<f:format.date format="d.m.Y">{day.valid}</f:format.date>}

我想在模板中解决这个问题,而不是在模型或控制器中解决这个问题.