Return to Snippet

Revision: 37962
at December 24, 2010 09:33 by RuslanSavenok


Updated Code
/* Twinkie input`s */    
     #offerTable .Qinput input { display: inline-block; height: 30px; line-height: 25px; font-size: 14px; background: #ffff99 url({fileURL}images/big-empty.png) 100% 50% no-repeat; border: 2px solid #C0C0C0; padding: 0px 30px 0px 5px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
     #offerTable .Qinput select { display: inline-block; font-size: 14px; background: #ffff99; border: 2px solid #C0C0C0; padding: 5px 2px 5px 2px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
     #offerTable .Qinput input,
     #offerTable .Qinput select{
       margin: 2px 0;
       width: 259px;
     }
     #offerTable .Qinput option {background: #ffff99;}
     #offerTable .Qinput select {
       width: 297px;
     }
     #offerTable .Qinput div select {
       width: 93px;
     }


function setTwinkieInputsWidth() {
  var table = document.getElementById('offerTable');
  var input = table.getElementsByTagName('input');
  var select = table.getElementsByTagName('select');
  
  for(var i=0; i<select.length; i++ ) {
    if(select[i].parentNode.nodeName == 'DIV') {
      select[i].style.width = (input[0].offsetWidth-18) / 3;
    } else {
    select[i].style.width = input[0].offsetWidth;
    }
  }
}


if(!document.doctype) {setTwinkieInputsWidth()};

Revision: 37961
at December 24, 2010 09:05 by RuslanSavenok


Updated Code
/* Twinkie input`s */    
     #offerTable .Qinput input { display: inline-block; height: 30px; line-height: 25px; font-size: 14px; background: #ffff99 url({fileURL}images/big-empty.png) 100% 50% no-repeat; border: 2px solid #C0C0C0; padding: 0px 30px 0px 5px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
     #offerTable .Qinput select { display: inline-block; font-size: 14px; background: #ffff99; border: 2px solid #C0C0C0; padding: 5px 2px 5px 2px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
     #offerTable .Qinput input,
     #offerTable .Qinput select{
       margin: 2px 0;
       width: 259px;
     }
     #offerTable .Qinput option {background: #ffff99;}
     #offerTable .Qinput select {
       width: 297px;
     }
     #offerTable .Qinput div select {
       width: 93px;
     }


function setTwinkieInputsWidth() {
  var table = document.getElementById('offerTable');
  var input = table.getElementsByTagName('input');
  var select = table.getElementsByTagName('select');
  
  for(var i=0; i<select.length; i++ ) {
    if(select[i].parentNode.nodeName == 'DIV') {
      select[i].style.width = (input[0].offsetWidth-18) / 3;
    } else {
    select[i].style.width = input[0].offsetWidth;
    }
  }
}


if(!document.body.parentNode.getAttribute("xmlns")) {setTwinkieInputsWidth()};

Revision: 37960
at December 21, 2010 10:05 by RuslanSavenok


Initial Code
#offerTable .Qinput input { display: inline-block; height: 30px; line-height: 25px; font-size: 14px; background: #ffff99 url({fileURL}images/big-empty.png) 100% 50% no-repeat; border: 2px solid #C0C0C0; padding: 0px 30px 0px 5px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
     #offerTable .Qinput select { display: inline-block; font-size: 14px; background: #ffff99; border: 2px solid #C0C0C0; padding: 5px 2px 5px 2px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
     #offerTable .Qinput input,
     #offerTable .Qinput select{
       margin: 2px 0;
       box-sizing:content-box ;
       -moz-box-sizing:content-box ;
       -webkit-box-sizing:content-box ;
     }
     #offerTable .Qinput option {background: #ffff99;}
     #offerTable .Qinput input {
       width: 228px;
       width: expression("255px");
     }
     #offerTable .Qinput select {
       width: 259px;
       width: expression("255px");
     }
     #offerTable .Qinput div select {
       width: 75px;
       width: expression("79px");
     }

Initial URL

                                

Initial Description

                                

Initial Title
Rounded corners Style with Arrow (TWINKIE)

Initial Tags

                                

Initial Language
CSS