0

I'm creating a search page. The filters is on a different page block than the results but then the title went to a new line. (see photo)

enter image description here

Is there a way to put "Search" and "Filters" on the same line?

Here's my view

    <apex:pageBlock tabStyle="LightBlue__c">

        <apex:panelgrid columns="2">
            <apex:outputpanel styleClass="SearchFilters">
                <apex:pageBlock title="Search Filters" mode="edit" id="criteria" tabStyle="LightBlue__c">
                    <div class="SearchFiltersBlock">
                        <table cellpadding="2" cellspacing="2">
                            <tr>
                                <td style="font-weight:bold;">
                                    <apex:inputCheckbox value="{!articlename}" />Article Name (exact)
                                    <br/>
                                </td>
                            </tr>
                            <tr>
                                <td style="font-weight:bold;">
                                    <apex:inputCheckbox value="{!articleName}" />Contains
                                    <br/>
                                </td>
                            </tr>
                            <tr>
                                <td style="font-weight:bold;">
                                    <apex:inputCheckbox value="{!matchCase}" />Match Everything
                                    <br/>
                                </td>
                            </tr>
                            <tr>
                                <td style="font-weight:bold;">
                                    <apex:inputCheckbox value="{!published}" />Published
                                    <br/>
                                </td>
                            </tr>
                            <tr>
                                <td style="font-weight:bold;">
                                    <apex:selectList value="{!dataCategory}" multiselect="false" size="1">
                                        <apex:selectOptions value="{!DataCategoryOption}" /></apex:selectList>
                                </td>
                            </tr>
                            <tr>
                                <td style="font-weight:bold;">
                                    Tag
                                    <br/>
                                    <apex:inputText value="{!tag}" style="width:100px;" />
                                </td>
                            </tr>
                        </table>

                        <table cellpadding="2" cellspacing="2">
                            <tr>
                                <td style="font-weight:bold;">
                                    <apex:selectList value="{!sortBy}" multiselect="false" size="1">
                                        <apex:selectOptions value="{!sortByOptions}" /></apex:selectList>
                                </td>
                            </tr>
                        </table>

                        <!--hide this on the visualforce page and check on why it's causing the expecting colon error-->
                        <div style="top:165px;right:27px;position:absolute;display:none">
                            <apex:inputtext value="{!searchresultlimit}" style="width:30px;right:20px;" />&nbsp;
                            <apex:outputlabel value="records" rendered="{!$Profile.Name=='System Administrator'}" style="font-weight:bold;color:#474747;" />
                        </div>

                        <apex:actionStatus id="actStatusId">
                            <apex:facet name="start">
                                <div class="waitingSearchDiv outerGrayedPanel" id="casActionProcessing">
                                    <div class="waitingHolder innerProcessPanel">
                                        <br />
                                        <img class="waitingImage" src="/img/loading.gif" title="Searching for matching Articles... " />
                                        <span class="waitingDescription">Searching for matching Articles...</span>
                                    </div>
                                </div>
                            </apex:facet>
                        </apex:actionStatus>

                        <!-- <apex:actionSupport event="onclick" action="{!incrementCounter}" rerender="counter" status="counterStatus" /> -->

                    </div>
                </apex:pageBlock>
            </apex:outputpanel>

            <apex:outputPanel layout="block" styleClass="searchresultblock">
                <apex:pageBlock title="Search Results" tabStyle="LightBlue__c">
                    <div class="SearchResultsBlock">
                        <apex:pageBlockSection columns="1">
                            <apex:outputText rendered="{!accountresult.size==0}" value="No matching records." />
                        </apex:pageBlockSection>

                        <apex:pageblockTable rendered="{!accountresult.size!=0}" value="{!AllSearchGDCKnowledgeArticle}" var="accr" id="searchresulttable">
                            <apex:column headerValue="Article">
                                <apex:outputlink value="https://ap1.salesforce.com/{!accr.id}">{!accr.Name}</apex:outputlink>
                            </apex:column>
                            <apex:column value="{!accr.id}" />
                            <apex:column value="{!accr.Published__c}" />
                            <apex:column value="{!accr.Data_category__c}" />
                            <!--<apex:column value="{!accr.shippingcountry}" />
            <apex:column value="{!accr.industry}" />
            <apex:column value="{!accr.type}" />-->

                        </apex:pageBlockTable>

                        <div class="paginator">
                            <span class="prevNextLinks">
                <apex:commandLink styleClass="prevNext" action="{!first}" rendered="{!accountresult.size!=0}" rerender="searchresulttable" status="Loadingrecords"><img src="/s.gif" title="First Page" alt="First Page" class="first"/></apex:commandlink> 
                <apex:commandLink styleClass="prevNext" action="{!previous}" rendered="{!accountresult.size!=0}" rerender="searchresulttable" status="Loadingrecords"><img src="/s.gif" title="Previous" alt="Previous" class="prev"/>Previous</apex:commandlink>

                <apex:commandLink styleClass="prevNext" action="{!next}" rendered="{!accountresult.size!=0}" rerender="searchresulttable" status="Loadingrecords">Next<img src="/s.gif" title="Next" alt="Next" class="next"/></apex:commandlink>
                <apex:commandLink styleClass="prevNext" action="{!last}" rendered="{!accountresult.size!=0}" rerender="searchresulttable" status="Loadingrecords"><img src="/s.gif" title="Last Page" alt="Last Page" class="last"/></apex:commandlink>

                </span>
                        </div>

                        <apex:actionStatus id="Loadingrecords">
                            <apex:facet name="start">
                                <div class="waitingSearchDiv outerGrayedPanel" id="casActionProcessing">
                                    <div class="waitingHolder innerProcessPanel">
                                        <br />
                                        <img class="waitingImage" src="/img/loading.gif" title="Loading records..." />
                                        <span class="waitingDescription">Loading records...</span>
                                    </div>
                                </div>
                            </apex:facet>
                        </apex:actionStatus>
                    </div>
                </apex:pageBlock>
            </apex:outputPanel>
        </apex:panelgrid>

    </apex:pageBlock>
  • share your VF page code. – Mahmood Dec 4 '14 at 7:51
  • @MahmoodButt I've edited my question and added my VF page code. :) – Raph Dec 4 '14 at 8:12
  • I have seen your code, still bit confused. Can you please further elaborate on your requirements. – Mahmood Dec 4 '14 at 9:50
1

The reason it shows up on two lines is because the browser is allowed to wrap the text onto multiple lines so that it can be shown without pushing content off of the visible area of the page.

The solution is to leverage the CSS property which disallows the wrapping of text onto multiple lines.

white-space: nowrap;

This can be implemented using the style attribute directly on the element or using a custom CSS class declaration.

| improve this answer | |
0

Try fiddling around with the CSS a bit. Your styleClass="SearchFilters" might have some width parameter which might be wrapping your text.

| improve this answer | |
0

Update this line

<apex:panelgrid columns="2">

and replace with the following line

<apex:panelgrid columns="2" style="width:100%;" >

Should work :)

| improve this answer | |
  • This did not work. – Raph Dec 4 '14 at 14:07
  • then share your css for both SearchFilters and searchresultblock only. – Mahmood Dec 4 '14 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.