0





46
1

After I added the css file token-input-mac.css, my text_area became so tiny, like a text input_field. How do I keep the new css and only change the height of the text_field.

Here is the token-input-mac.css

/* Example tokeninput style #2: Mac Style */
fieldset.token-input-mac {
position: relative;
padding: 0;
margin: 5px 0;
background: #fff;
width: 400px;
height: 400px;
border: 1px solid #A4BDEC;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}fieldset.token-input-mac.token-input-dropdown-mac {
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
} ul.token-input-list-mac {
 position: relative;
 overflow: hidden;
 height: auto !important;
 cursor: text;
 font-size: 12px;
 min-height: 1px;
 z-index: 999;
 margin: 0;
 padding: 0;
 background: transparent;
 } ul.token-input-list-mac.error {
  border: 1px solid #C52020;
  }  ul.token-input-list-mac li {
   list-style-type: none;
   }  li.token-input-token-mac p {
   display: inline;
   padding: 0;
   margin: 0;
  } li.token-input-token-mac span {
  color: #231C34;
  margin-left: 5px;
  font-weight: bold;
  cursor: pointer;
  }
  /* TOKENS */  li.token-input-token-mac {
     position: relative;
     display: inline-block;
     width: auto !important;
     font-size: 8pt;
     line-height: 12pt;
     margin: 0px 3px 3px 0px;
     padding: 4px 10px;
     background: none;
     background-color: #0F004E;
     color: #fefefe;
     cursor: default;
     float: left;
     font-weight: bold;
     }   li.token-input-highlighted-token-mac {
     background-color: #231C34;
     color: #fefefe;
     font-weight: bold;
    }  li.token-input-selected-token-mac {
    background-color: #231C34;
    color: #fefefe;
    font-weight: bold;
  } li.token-input-highlighted-token-mac span.token-input-delete-token-mac {
    color: #fefefe;
    font-weight: bold;
    }li.token-input-selected-token-mac span.token-input-delete-token-mac {
   color: #fefefe;
   font-weight: bold;
 } li.token-input-input-token-mac {
   border: none;
   background: transparent;
   float: left;
   padding: 0;
   margin: 0;
  } li.token-input-input-token-mac input {
   width: 100px;
   padding: 3px;
   margin: 0;
 } div.token-input-dropdown-mac {
   position: absolute;
   border-top: none;
   left: -1px;
   right: -1px;
   background-color: #fefefe;
   overflow: hidden;
   cursor: default;
   font-size: 10pt;
   }  div.token-input-dropdown-mac p {
   font-size: 8pt;
    margin: 0;
    padding: 0 10px;
     color: #fff;
    } div.token-input-dropdown-mac h3.token-input-dropdown-category-mac {
   font-size: 10pt;
   font-weight: bold;
   border: none;
   padding: 0 5px;
   margin: 0;
   } div.token-input-dropdown-mac ul {
   margin: 0;
   padding: 0;
  } div.token-input-dropdown-mac ul li {
   list-style-type: none;
   cursor: pointer;
   background: none;
   background-color: #fefefe;
   margin: 0;
   padding: 0 0 0 10px;
   color: #999;
   text-transform: uppercase;
  } div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac span.token-input-dropdown-item-description-mac {
  float: right;
  font-size: 8pt;
  font-style: italic;
  padding: 0 10px 0 0;
  color: #999;
  text-transform: uppercase;;
}div.token-input-dropdown-mac ul li strong {
  font-weight: bold;
  text-decoration: underline;
  color: #999;
  text-transform: uppercase;
}div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd {
  background: #0F004E;
  color: #bb8322; //Official Red
  text-transform: uppercase;
  font-weight: bold;
  } div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-      mac:hover,
 div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd:hover,
 div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac:focus,
 div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd:focus {
 color: #fff;
} div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac   span.token-input-dropdown-item-description-mac,
 div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd span.token-input-dropdown-item-description-mac {
 color: #fff;
 }
Question author Codigomonstruo | Source

0


1

All the places where the font size is defined are really small. It's difficult to tell without the corresponding HTML page, but these are probably your problem styles (you'll want the font to be a minimum of 14px, and most people would probably suggest 16 or 18px):

ul.token-input-list-mac { font-size: 12px;}  li.token-input-token-mac {     font-size: 8pt;} div.token-input-dropdown-mac {   font-size: 10pt;} div.token-input-dropdown-mac p {   font-size: 8pt;}div.token-input-dropdown-mac h3.token-input-dropdown-category-mac {   font-size: 10pt;}div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac span.token-input-dropdown-item-description-mac {  font-size: 8pt;}
Answer author Kate-miller

Ask about this question here!