Just starting out with jquery, I've got a dialog box and I'm looking to decrease the height of this red image:
https://i.sstatic.net/BuyQL.png
Is there a way to do it?
I've already made changes in the jquery-ui.css code, like so:
.ui-dialog {
position: fixed;
top: 0;
left: 0;
padding: .2em;
outline: 0;
}
/*.fixed-dialog{
position: fixed;
top: 50px;
left: 50px;
}*/
/* Popup title bar */
.ui-dialog .ui-dialog-titlebar {
padding: .1em 1em;
border: 0;
position: relative;
top: -80px;
height: 45px;
/*width: 310px; */
margin: 1em 0;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
border-radius: 5px 5px 5px 5px;
}
/* Popup title */
.ui-dialog .ui-dialog-title {
float: left;
margin: .1em 0;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
/* added */
text-align: center;
color: #ffffff;
}
/* Close button on top */
.ui-dialog .ui-dialog-titlebar-close {
display: none;
position: absolute;
right: .3em;
top: 170%;
width: 21px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px;
outline: none;
}
/* Popup text */
.ui-dialog .ui-dialog-content {
position: relative;
border: 0;
padding: 0em 1em;
background: none;
overflow: auto;
}
/* Button bar */
.ui-dialog .ui-dialog-buttonpane {
position: relative;
text-align: left;
border-width: 1px 0 0 0;
margin-top: .5em;
padding: .3em .6em .6em 1em; /* H D B G */
outline: none;
background: #a3cb38;
border-radius: 5px 5px 5px 5px;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
/* float: right; */
float: none !important;
text-align:right;
}
.ui-dialog .ui-dialog-buttonpane button {
/*margin: .5em .4em .5em 0;*/
position: relative;
border: 0;
top: 3px;
left: 15px;
width: 100px;
height: 45px;
cursor: pointer;
color: #ffffff; /* button text color */
outline: none;
font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
background: #fed136; /* button background color */
border-radius: 12px 5px 12px 5px;
}
.ui-dialog .ui-resizable-se {
width: 12px;
height: 12px;
right: -5px;
bottom: -5px;
background-position: 16px 16px;
The code in my html file:
$("#dialog").dialog({
autoOpen: true,
modal: false,
bgiframe: true,
draggable: true,
height: 300,
width: 350,
position: 'center',
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "fade",
duration: 400
},
resizable: false,
buttons: [
{text: "OK", click: function () {
[...]
}
Any suggestions on how to reduce the height of this red area?
The html lines:
<header>
<!-- popup -->
<div id="dialog" class="pop" title="Info">
<h3><center ">A long text here, like this one. And more.</center></h3>
<h3><center ">Second line !</center></h3>
</div>
</header>
My css file:
.pop.active {
visibility: visible;
display: block;
}
.pop.desactive {
visibility: hidden;
display: none;
}