Discussion :

[Creepy78]

Bonjour à toutes & tous,

J'ai fait un toute bête popup en html/jquery, dont voici le code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div id="dialogAddTask" class="addTask" title="Add a task...">
    <form action="task_form">
        Task: <input type="text" name="task"><br>
        Owner: <input type="text" name="owner"><br>
        Priority: <input type="text" name="priority"><br>
        Status: <input type="text" name="status"><br>
        Due date: <input type="text" id="datepicker" name="dueDate"><br>
        <input type="submit" value="Submit">
    </form>
</div>

J'essaie de mettre en forme via mon fichier CSS.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.addTask {
    background-color: #E9E9E9;
    color: #000000;
    width:25em;
    height:20em;
}

Mais cela ne met rien en page, on dirait que quelque chose prend le pas sur mon CSS et le remplace.
Si je fait F12 dans mon firefox, j'ai ce code au niveau de la popup.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front addTask ui-draggable ui-resizable" aria-describedby="dialogAddTask" aria-labelledby="ui-id-1" style="position: relative; height: auto; width: 300px; top: -607.531px; left: 1111.5px;"><div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-1" class="ui-dialog-title">Add a task...</span><button type="button" class="ui-dialog-titlebar-close"></button></div><div id="dialogAddTask" class="addTask ui-dialog-content ui-widget-content" style="width: auto; min-height: 130px; max-height: none; height: auto;">
    <form action="task_form">
        Task: <input type="text" name="task"><br>
        Owner: <input type="text" name="owner"><br>
        Priority: <input type="text" name="priority"><br>
        Status: <input type="text" name="status"><br>
        Due date: <input type="text" id="datepicker" name="dueDate" class="hasDatepicker"><br>
        <input type="submit" value="Submit">
    </form>
</div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div></div>

On dirait que le JQuery ajoute automatiquement des balises.

Ma question comment faire pour appliquer son propre CSS sur un popup JQuery.

Merci

Creepy

[NoSmoking]

Bonjour,
il semblerait que tu ais un problème de poids de ton sélecteur.

	A lire : Règles d'application des styles CSS et gestion des conflits

[Creepy78]

Hello,

Et pas que dans mon selecteur le problème de poids !

Merci pour le lien je vais lire cela de ce pas.

Creepy