Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS how to replace jquery dialog Title with custom DIV?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #155633
    ajmaly
    Participant

    By another post I came across to know that we can replace the jquery dialog title bar with some custom DIV (span).

    $('#dlg').dialog({/*options*/}).parent().find("div.ui-dialog- titlebar').addClass('myClassname');
    $('.myClassname span').css({position: "absolute", left: "300px", top: "-10px", background: "red"});
    $('.myClassname).css("height", "50px");

    We are trying to do the same for below JS Fiddle code, but I when I set above properties, then dialog not works.

    Currently we show/hide the red color DIV (which is not looks good to me).

    How can we directly replace the title with custom DIV as well as How can I know the top left corner position of jquery dialog?

    here is Fiddle link,

    link………

    #156135
    noahgelman
    Participant

    Probably because you have a number of issues.

    Below, notice you have a single quote and a double quote? There is also an extra space in there.

    .find("div.ui-dialog- titlebar')
    

    Here is missing an apostrophe.

    $('.myClassname).css("height", "50px");
    

    Even after you fix it, it still wouldn’t work. The selector for the titlebar is wrong.

    .parent().find("div.ui-dialog- titlebar')
    

    The Dialog box and the Title Bar are siblings. The Title Bar isn’t a parent of the dialog box.

    Here is a new fiddle for you. I removed the typos and fixed the selector. I also moved all the css you made with jquery into the css file.

    Fiddle

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.