CODEWITHSUNDEEP
cssinternet-explorer-8scrollbar
Alec Smart
Alec Smart

Reputation: 95970

Force vertical scrollbar to display in IE8

The vertical bar does not appear in IE8 if the page is not long enough. In FF, there is a workaround for this

html {
    overflow: -moz-scrollbars-vertical;
}

I tried the following for IE8: overflow:scroll; but the scroll bar appears on both sides. I want it only for vertical and not horizontal. scroll-y does not work.

Any solution?

Upvotes: 12

Views: 32907

Answers (12)

user2896372
user2896372

Reputation: 1

Well see my code, the datatable is inside 1 DIV

<div style="overflow-y: scroll; overflow-x: scroll; width: 44em; height: 17em;">
    <p:dataTable id="dataTableDeposito" lazy="true"  style="width: 1040px; height: 240px; "
                 selection="#{envioValijaView.selectedItems}"
                 emptyMessage="#{msg.tablaVaciaDeposito}"
                 value="#{envioValijaView.valijaManagedBean.valijaBean.listaDepositos}"
                 var="tablaDepositos"
                 rowKey="#{tablaDepositos.idDespositoCheque}">


        <p:column sortBy="bancoBean.nombreBanco"  headerText="#{label.fechaHora}" styleClass="texto_14" width="150">
                <h:outputLabel style="font-size: 12px; text-align: center;" value="#{label.cantDepositos}"/>
        </p:column>

        <p:column sortBy="nroCataporte" headerText="#{label.nroCataporte}" styleClass="texto_14" disabledSelection="#{true}" width="150">
            <p:commandLink action="#{envioValijaView.detalleDeposito}" value="#{tablaDepositos.idDespositoCheque}">
                <f:setPropertyActionListener value="#{tablaDepositos}" target="#{envioValijaView.depositoChequeBean}"/>
            </p:commandLink>
        </p:column>

        <p:column sortBy="nroCheque" headerText="#{label.cantiDepositos}" styleClass="texto_14" width="155">
            <h:outputLabel value="#{label.montTotalDeposito}" styleClass="texto_12"/>
        </p:column>

        <p:column sortBy="monto" headerText="#{label.montoTotal}"  styleClass="texto_14" width="150">
            <h:outputText value="#{tablaDepositos.montoDeposito}" styleClass="texto_12">
                <f:convertNumber pattern="#{envioValijaView.patronMoneda}"/>
            </h:outputText>
        </p:column>

        <!-- Verificar -->
        <p:column sortBy="monto" headerText="#{label.transportista}"  styleClass="texto_14" width="150" >
            <h:outputText value="#{tablaDepositos.montoDeposito}" styleClass="texto_12">
                <f:convertNumber pattern="#{envioValijaView.patronMoneda}"/>
            </h:outputText>
        </p:column>

        <p:column sortBy="monto" headerText="#{label.estado}"  styleClass="texto_14" width="150">
            <h:outputText value="#{tablaDepositos.montoDeposito}" styleClass="texto_12">
                <f:convertNumber pattern="#{envioValijaView.patronMoneda}"/>
            </h:outputText>
        </p:column>
    </p:dataTable>
</div>

Upvotes: 0

Vibhor
Vibhor

Reputation: 1

Add overflow:auto in css for html tag.

Upvotes: 0

Arnon Weinberg
Arnon Weinberg

Reputation: 901

Just noting that normalize.css recommended:

html { overflow-y: scroll; }

which is slightly different from Alec's answer, but has since dropped it. Per HTML5 Boilerplate:

The following style is no longer included by default due to problems that can arise in Firefox when combined with JS plugins (like modals or drag-and-drop UIs) that rely on viewport dimension calculations.

And indeed my experience is that it messes up some jQuery plugins.

I'm not sure why the various min-height / margin-bottom / padding-bottom solutions aren't preferred, but they do create an active scrollbar (albeit with a 1px movement) whereas overflow-y creates a disabled scrollbar, which is nicer.

Upvotes: 1

Dianne
Dianne

Reputation: 21

Best reply to date (may 2012) for forcing vertical scrollbar in safari, opera & firefox is:

html {
    height: 101%; /* setting height to 101% forces scroll bar to display */
}
html { min-height: 100%; padding-bottom: 1px; }

Opera was the most difficult and would only insert the vertical scrollbar no matter the height of the page if both html tags above were used.

Thanks - Dianne

Upvotes: 2

JoshuaDavid
JoshuaDavid

Reputation: 9549

html {
    height: 100%;
    border-bottom: 1px #999 solid;
}

NOTE: I wanted to force the scrollbar on pages that I KNOW will not need to scroll. This solution is for such a situation.

Jonesy's solution didn't work for me in all browsers, but I'm willing to have an insignificant 1px gray stripe which works consistently in all browsers. To me it's better than showing a full 1% extra (chip's solution). Design wise, it's hardly even a concession because it's so insignificant - try it and see what I mean.

Also, this solution is going to be super future-proof. If you want to add blank space like the other solutions, there's no telling what optimizations will get built into future browsers and I could imagine some browser detecting wasted blank space and eliminating it (stranger things have happened). By conceding 1px, you are forcing the browser to deal with this 1 pixel no matter what.

Upvotes: 0

Sebasti&#225;n
Sebasti&#225;n

Reputation: 21

html, body { height: 100.1%; }

Upvotes: 2

Dave
Dave

Reputation: 71

Try

-ms-overflow-y : scroll;

Upvotes: 7

chip
chip

Reputation: 81

I use the following:

html {
    height: 101%; /* setting height to 101% forces scroll bar to display */
}

Upvotes: 8

Shubham
Shubham

Reputation: 1

put it in your div i.e. 

style="overflow: -moz-scrollbars-vertical; overflow-y: scroll;

for example :

<div class="left" style="overflow: -moz-scrollbars-vertical; overflow-y: scroll;
 width: 230px; height: 500px;" >

Upvotes: 4

Jonesy
Jonesy

Reputation: 11

html {height: 100%; margin-bottom: 1px;}

Makes your page always 1px longer so the scroll bars always appear and only adds 1px scroll to pages that are not long enough so it doesn't make the viewer think they are missing something and scroll down for no reason. Simple and works in all main stream browsers (that i tested)

Upvotes: 1

Waggers
Waggers

Reputation: 621

Another solution is to set the body height to 100% - see a before/after example at http://www.iecustomizer.com/msmvp/HTMLHeightTest.htm

Upvotes: 3

Alec Smart
Alec Smart

Reputation: 95970

Oh figured it. Its

body {
   overflow-y: scroll;
}

Upvotes: 19

Related Questions