Расширение заголовка для длинных заголовков проекта в теме Redmine по умолчанию - PullRequest
Новая
       7

Расширение заголовка для длинных заголовков проекта в теме Redmine по умолчанию

2 голосов
/ 19 мая 2011

Я пытаюсь настроить стандартную тему Redmine, чтобы решить проблему с заворачиванием крошек с длинным заголовком проекта в заголовок страницы.Проблема заставляет сильно вложенные названия проектов показываться так:

Redmine subprojects with long titles

Я нашел пару билетов и сообщений на доске о подобных проблемах, но никто не имеет надлежащего решения для этого.

То, что я пытаюсь сделать, это держать #main-menu в нижней части #header и чтобы #header расширялся, когда текст переносится.Просто сделать #header больше, чем изначально установленное height, работает, но выглядит немного странно для коротких заголовков.Есть ли хороший способ сделать это без полного рестайлинга заголовка?(это моя запасная идея).В идеале я бы хотел сделать это, не удаляя элементы из списка.

Я думаю, что макет на официальном сайте Redmine использует те же CSS и HTML для справки, но соответствующиебиты:

HTML 

<div id="header">
    <div id="quick-search"></div>
    <h1>
      <a href="" class="root">Test Project</a> » … » 
      <a class="ancestor">Really long project title 2</a> » 
      <a class="ancestor">Really long project title 3</a> » 
      Really project title 4
    </h1>
    <div id="main-menu">
      <ul>
        <li>...</li>
        ...
      </ul>
    </div>
</div>

CSS 

#header {
  height: 5.3em;
  margin: 0;
  padding: 4px 8px 0px 6px;
  position: relative;
}

#main-menu {
  position: absolute;
  bottom: 0px;
  left: 6px;
  margin-right: -500px;
}

1 Ответ

2 голосов
/ 19 мая 2011

Это работает для меня в Chrome.Не проверено в другом месте.

Измените divs в header div на значения с плавающей запятой следующим образом 

#quick-search {
float: right;
margin-top: 0.8em;
width: 25%;
text-align: right; 
} 

#header h1 {
margin-top: 0.3em;
margin-left: 0px;
float: left;
width: 75%;
}

#main-menu {
float: left;
clear: both;
left: 6px;
}

Возможно, вам придется поиграться с шириной.

Также добавьте brпосле main menu div, но до </div> для header

 <br style="clear:both">

Удалите height на #header div

...