CODEWITHSUNDEEP
jquerycssdialog
Craigeve
Craigeve

Reputation: 155

Jquery dialog box, changing the text field size and font

I'm writing a Canvas game in HTML 5 and i want to float a div over the canvas so the user can enter their name into a box and the game capture it.

I've got this working but i have no idea how to actually change the size of the text, font and length of the box the user types in.

My JS is as follows:

$("#menuBox").dialog({
    resizable : false,
    position  : [30,30],
    minHeight : 100,
    minWidth  : 10,
    height    : 200,
    width     : 500
});

In the body

<body>
  <div id="wrapper">
  <div id="container">
  <div id="menuBox" style="display:none">
    <form action="POST"> <input type="text" /></form>
  </div>

  </div>
</body>

and the CSS

#wrapper{
  position: relative;
  left:10px;
  top:10px;
}

#container{
  position: absolute;
  left: 0px;
  top: 0px;
  background-image: url("Main.jpg");
  height: 540px;
  width: 900px;
}

div.ui-dialog div.ui-widget-header { 
  border: none; 
  display: none;
}

.ui-dialog .ui-dialog-content  { 
   border: none; 
   padding: 0;
}

.ui-dialog {
   width: 500px;
   padding: 0;
}

So the idea is the only thing the user sees is the long text box and it just appears over my formatted canvas environment.

I'm new to JQuery (which is why the first bits are still non-JQuery), so i'm not even sure what i want is possible. If I wanted to make the font size 20 and Tomoha and the input box 300px long, i can't see where i would enter this or even if i could make it happen, as using the parameters in .dialog doesn't seem to alter that input field. Any advice?

Thanks for reading.

Upvotes: 1

Views: 7720

Answers (3)

Umesh Patil
Umesh Patil

Reputation: 10705

If problem is only updating styles for dialog box content, you can mention specific parent ID or class like below.

If this didn't solve, it would be better to provide quick solution if you can show me the dialog box html code generated by jQuery.

#menuBox .ui-dialog-content {
  font-size:20px;
  font-family:Tomoha;   
}
#menuBox .ui-dialog-content input {
    max-width: 320px;
    width: 300px;
}

Upvotes: 3

Filippo oretti
Filippo oretti

Reputation: 49873

did you tryed something like : 

$(some_element).css({'width':'','font-size':''});

?

or by css: you need to use !important to ovveride rules, ie:

.dialog{
width:300px !important;
}

Upvotes: 1

Haroldo_OK
Haroldo_OK

Reputation: 7280

Generic answer: use your browser's DOM inspector feature to visualize the dialog's structure, then use this knowledge to build the required CSS selectors. I recommend looking at w3schools CSS selector reference.

Upvotes: 0

Related Questions