Блоки поиска и поиска SharePoint, расположенные друг над другом

Question

У меня есть сайт SharePoint, который я пытаюсь маркировать, и один из запросов заключался в размещении элемента управления поиском и текстового поля поиска друг над другом (встроенный?). Я видел онлайн некоторые jQuery волшебные перевернуть расположение этих ящиков, чтобы изменить внешний вид, как описано здесь: http://labs.steveottenad.com/reskinrestyle-the-sharepoint-2010-advanced-search-box/

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

Это мой код главной страницы для области поиска прямо сейчас. Я полагаю, что это немного грязно, что, как я знаю, не помогает ... поэтому мне трудно распознать, какой div является поисковым компонентом.

<td style="width: 2px">
<div id="s4-searcharea" class="s4-search s4-rp"></div>
<div class="customSearch">
    <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
<SPSWC:SearchBoxEx id="SearchBox" runat="server" 
GoImageUrl="/_layouts/images/gosearch.gif" 
GoImageUrlRTL="/_layouts/images/gosearch.gif" 
DropdownModeEx=ShowDD 
DropdownWidth="120"
UseSiteDefaults="true"      
QueryPromptString="Keyword(s)"
FrameType="None" WebPart="true" __WebPartId="{551E15C2-XXX}"/>
</asp:ContentPlaceHolder>                       
    </div>
    </td>

Я думаю, что мне нужно будет использовать атрибут display: inline и, возможно, присвоить значение z-index обоим классам? Любая помощь в настройке этого была бы великолепна.

Answer 1

Вам нужно смотреть html, а не aspx-код, если вы работаете со стилями. Для такого рода вещей я обычно использую FireBug или Chrome Inspect Element, чтобы найти работающие стили, а затем скопировать их в таблицу стилей главной страницы.

Вы можете делать то, что хотите, только с помощью css, хотя я подозреваю, что вам все равно понадобится jquery, как в примере, который вы нашли - css не может переупорядочивать элементы или удалять таблицу.

Answer 2

Я автор статьи, на которую вы ссылаетесь в своем вопросе.Я уверен, что об этом уже позаботились, но кому бы ни пришлось столкнуться с ним в будущем, вам нужно будет использовать javascript / jquery, чтобы изменить разметку элемента управления поиском.По умолчанию раскрывающийся список областей видимости находится в другой ячейке таблицы, и вы не сможете получить сложенный вид, используя только CSS.Попробуйте что-то вроде этого:

var scopedropdown = $('.ms-sbscopes select');
$('.ms-sbrow .ms-sbcell').eq(1).prepend(scopedropdown);

Я понимаю, что использование .eq () является хакерским, но SP2010 не дает уникального класса для ячейки, на которую нужно нацелиться.Как только вы поместите раскрывающуюся область в нужную ячейку, перейдите в город с CSS, чтобы она выглядела так, как вы хотите.Вы также можете использовать .append () вместо .prepend (), если вы хотите раскрывающийся список под окном поиска.

Также обратите внимание, что кнопка поиска включена в другую ячейку, поэтому у вас могут возникнуть проблемы с шириной раскрывающегося списка.

Answer 3

У меня нет установки Sharepoint, с которой я могу проверить это, но я чувствую себя обязанным попробовать;). если вы можете сделать так, чтобы ваше окно поиска выглядело как окно поиска демо-версии, то этот код должен дать вам хорошее начало использования css для получения красивого вертикального стека.

     <script type="text/javascript">
            $(function(){
                //Hide Default search Icon
                $('.srch-gosearchimg').hide();  
//removed the line below, your html template included it already
                //$('.ms-sbplain').wrap('<div class="customSearchBox">');   
    //save the current 'scopes' drop down, we're about to delete its current location
                var scopes = $('.ms-sbscopes').clone();
    //delete the standard 'scopes' drop down
                $('.ms-sbscopes').remove();
    //wrap our scopes Copy in a Div.  change this class with css to position it correctly.

//removed this line, let's just get it to show up again.
//                    scopes.wrap("<div class=''>");
    //this code sticks the 'scopes' dd ahead of the '.ms-sbplain' item, not behind it like the demo
                $('.customSearchBox').prepend(scopes);
            });     
        </script>