kendo ui - kendo.ui.progress no funciona como se esperaba

kendo-ui

Question

Estoy usando la versión gratuita de la interfaz de usuario de kendo. Estoy mostrando un indicador de progreso usando el código:

kendo.ui.progress($(''#loginform''), true);

donde $(''#loginform'') es el div que me gustaría mostrar el indicador de progreso. Tenía la impresión de que el indicador de progreso estaría contenido y centrado en el div que proporciono a la función. Sin embargo, parece mostrarse en toda la página. También lo intenté:

kendo.ui.progress(''#loginform'', true);

y

kendo.ui.progress(''loginform'', true); (which caused an error).

Supongo que no estoy equivocado sobre la forma en que se supone que funciona, de lo contrario, ¿por qué la función tomaría el nombre de un div en absoluto? ¿Alguna idea de lo que estoy haciendo mal?

Por lo que puedo decir, estoy haciendo lo mismo. Aquí está mi HTML:

<form class="form-signin" id="loginform">
    <h2 class="form-signin-heading" style="color:whitesmoke;">Please Sign In</h2>
        <input type="text" id="username" class="input-block-level" placeholder="Username" />
        <input type="password" id="password" class="input-block-level" placeholder="Password" />
    <label class="checkbox" style="color:whitesmoke;">
        <input type="checkbox" id="remember" value="remember-me" /> Remember me
    </label>
    <button type="button" id="login" class="btn btn-large btn-success">OK</button>
    <button type="button" id="cancel" class="btn btn-large btn-danger">Cancel</button>
</form>

Lo siento, no puedo entender cómo formatearlo correctamente. Creo que el ejemplo de jsFiddle solo se ve centrado porque esa pestaña es la página completa en el ejemplo.

Answer 1

loginform definir el posicionamiento para la forma de loginform de loginform relative , absolute o fixed .

Intente agregar la siguiente definición de CSS:

#loginform {
    position: relative;
}

Lo necesita porque el progress trata de cubrir completamente el elemento HTML que lo contiene. Para hacer eso, define el width y la height como 100%. Entonces, para restringir su tamaño al tamaño del contenedor (y no desbordarlo), necesita definir la posición como uno de estos.

También podría funcionar si algunos de los antepasados ​​tienen uno de estos posicionamientos. En este caso, cubrirá el 100% de este y no el 100% del antecesor inmediato.

Ejemplo: definir los siguientes estilos

#container1 {
    position: fixed;
    border: 1px solid red;
    margin: 3px;
}

#container2 {
    position: static;
    border: 1px solid green;
    margin: 30px;
}

y el HTML como:

<div id="container1">
    <div id="container2">
        <form class="form-signin" id="loginform">
            <h2 class="form-signin-heading" style="color:whitesmoke;">Please Sign In</h2>
            <input type="text" id="username" class="input-block-level" placeholder="Username"/>
            <input type="password" id="password" class="input-block-level" placeholder="Password"/>
            <label class="checkbox" style="color:whitesmoke;">
                <input type="checkbox" id="remember" value="remember-me"/> Remember me </label>
            <button type="button" id="login" class="btn btn-large btn-success">OK</button>
            <button type="button" id="cancel" class="btn btn-large btn-danger">Cancel</button>
        </form>
    </div>
</div>

Verá que cubre el 100% de container1 ya que está fixed mientras que container2 es static .