Layout Classes
The following is a table of all the layout related classes that are currently provided in the autocomplete input element Please refer to CSS documentation on what each of the CSS properties do:
| Class Name | CSS |
|---|---|
| display-none | { display: none; } |
| full-height | { height: 100%; } |
| height-0 | { height: 0; } |
| height-5 | { height: 5px; } |
| height-10 | { height: 10px; } |
| height-15 | { height: 15px; } |
| height-20 | { height: 20px; } |
| height-25 | { height: 25px; } |
| height-30 | { height: 30px; } |
| height-35 | { height: 35px; } |
| height-40 | { height: 40px; } |
| height-45 | { height: 45px; } |
| height-50 | { height: 50px; } |
| height-55 | { height: 55px; } |
| height-60 | { height: 60px; } |
| height-65 | { height: 65px; } |
| height-70 | { height: 70px; } |
| height-75 | { height: 75px; } |
| height-80 | { height: 80px; } |
| height-85 | { height: 85px; } |
| height-90 | { height: 90px; } |
| height-95 | { height: 95px; } |
| height-100 | { height: 100px; } |
| height-105 | { height: 105px; } |
| height-110 | { height: 110px; } |
| height-115 | { height: 115px; } |
| height-120 | { height: 120px; } |
| height-125 | { height: 125px; } |
| height-130 | { height: 130px; } |
| height-135 | { height: 135px; } |
| height-140 | { height: 140px; } |
| height-145 | { height: 145px; } |
| height-150 | { height: 150px; } |
| height-155 | { height: 155px; } |
| height-160 | { height: 160px; } |
| height-165 | { height: 165px; } |
| height-170 | { height: 170px; } |
| height-175 | { height: 175px; } |
| height-200 | { height: 200px; } |
| height-300 | { height: 300px; } |
| height-400 | { height: 400px; } |
| height-500 | { height: 500px; } |
| height-600 | { height: 600px; } |
| full-width | { width: 100%; } |
| width-0 | { width: 0; } |
| width-5 | { width: 5px; } |
| width-10 | { width: 10px; } |
| width-15 | { width: 15px; } |
| width-20 | { width: 20px; } |
| width-25 | { width: 25px; } |
| width-30 | { width: 30px; } |
| width-35 | { width: 35px; } |
| width-40 | { width: 40px; } |
| width-45 | { width: 45px; } |
| width-50 | { width: 50px; } |
| width-55 | { width: 55px; } |
| width-60 | { width: 60px; } |
| width-65 | { width: 65px; } |
| width-70 | { width: 70px; } |
| width-75 | { width: 75px; } |
| width-80 | { width: 80px; } |
| width-85 | { width: 85px; } |
| width-90 | { width: 90px; } |
| width-95 | { width: 95px; } |
| width-100 | { width: 100px; } |
| width-105 | { width: 105px; } |
| width-110 | { width: 110px; } |
| width-115 | { width: 115px; } |
| width-120 | { width: 120px; } |
| width-125 | { width: 125px; } |
| width-130 | { width: 130px; } |
| width-135 | { width: 135px; } |
| width-140 | { width: 140px; } |
| width-145 | { width: 145px; } |
| width-150 | { width: 150px; } |
| width-155 | { width: 155px; } |
| width-160 | { width: 160px; } |
| width-165 | { width: 165px; } |
| width-170 | { width: 170px; } |
| width-175 | { width: 175px; } |
| width-200 | { width: 200px; } |
| width-250 | { width: 250px; } |
| width-300 | { width: 300px; } |
| width-400 | { width: 400px; } |
| width-500 | { width: 500px; } |
| width-600 | { width: 600px; } |
| width-700 | { width: 700px; } |
| width-800 | { width: 800px; } |
| width-900 | { width: 900px; } |
| min-max-width-100 | { min-width: 100px; max-width: 100px; } |
| min-max-width-200 | { min-width: 200px; max-width: 200px; } |
| min-max-width-300 | { min-width: 300px; max-width: 300px; } |
| min-max-width-400 | { min-width: 400px; max-width: 400px; } |
| min-max-width-500 | { min-width: 500px; max-width: 500px; } |
| min-max-width-600 | { min-width: 600px; max-width: 600px; } |
| min-max-width-700 | { min-width: 700px; max-width: 700px; } |
| min-max-width-800 | { min-width: 800px; max-width: 800px; } |
| min-max-width-900 | { min-width: 900px; max-width: 900px; } |
| margin-0 | { margin: 0; } |
| margin-5 | { margin: 5px; } |
| margin-10 | { margin: 10px; } |
| margin-15 | { margin: 15px; } |
| margin-20 | { margin: 20px; } |
| margin-25 | { margin: 25px; } |
| margin-30 | { margin: 30px; } |
| margin-35 | { margin: 35px; } |
| margin-40 | { margin: 40px; } |
| margin-45 | { margin: 45px; } |
| margin-50 | { margin: 50px; } |
| margin-top-0 | { margin-top: 0; } |
| margin-top-5 | { margin-top: 5px; } |
| margin-top-10 | { margin-top: 10px; } |
| margin-top-15 | { margin-top: 15px; } |
| margin-top-20 | { margin-top: 20px; } |
| margin-top-25 | { margin-top: 25px; } |
| margin-top-30 | { margin-top: 30px; } |
| margin-top-35 | { margin-top: 35px; } |
| margin-top-40 | { margin-top: 40px; } |
| margin-top-45 | { margin-top: 45px; } |
| margin-top-50 | { margin-top: 50px; } |
| margin-right-0 | { margin-right: 0; } |
| margin-right-5 | { margin-right: 5px; } |
| margin-right-10 | { margin-right: 10px; } |
| margin-right-15 | { margin-right: 15px; } |
| margin-right-20 | { margin-right: 20px; } |
| margin-right-25 | { margin-right: 25px; } |
| margin-right-30 | { margin-right: 30px; } |
| margin-right-35 | { margin-right: 35px; } |
| margin-right-40 | { margin-right: 40px; } |
| margin-right-45 | { margin-right: 45px; } |
| margin-right-50 | { margin-right: 50px; } |
| margin-bottom-0 | { margin-bottom: 0; } |
| margin-bottom-5 | { margin-bottom: 5px; } |
| margin-bottom-10 | { margin-bottom: 10px; } |
| margin-bottom-15 | { margin-bottom: 15px; } |
| margin-bottom-20 | { margin-bottom: 20px; } |
| margin-bottom-25 | { margin-bottom: 25px; } |
| margin-bottom-30 | { margin-bottom: 30px; } |
| margin-bottom-35 | { margin-bottom: 35px; } |
| margin-bottom-40 | { margin-bottom: 40px; } |
| margin-bottom-45 | { margin-bottom: 45px; } |
| margin-bottom-50 | { margin-bottom: 50px; } |
| margin-left-0 | { margin-left: 0; } |
| margin-left-5 | { margin-left: 5px; } |
| margin-left-10 | { margin-left: 10px; } |
| margin-left-15 | { margin-left: 15px; } |
| margin-left-20 | { margin-left: 20px; } |
| margin-left-25 | { margin-left: 25px; } |
| margin-left-30 | { margin-left: 30px; } |
| margin-left-35 | { margin-left: 35px; } |
| margin-left-40 | { margin-left: 40px; } |
| margin-left-45 | { margin-left: 45px; } |
| margin-left-50 | { margin-left: 50px; } |
| margin-top-bottom-0 | { margin-top: 0; margin-bottom: 0; } |
| margin-top-bottom-5 | { margin-top: 5px; margin-bottom: 5px; } |
| margin-top-bottom-10 | { margin-top: 10px; margin-bottom: 10px; } |
| margin-top-bottom-15 | { margin-top: 15px; margin-bottom: 15px; } |
| margin-top-bottom-20 | { margin-top: 20px; margin-bottom: 20px; } |
| margin-top-bottom-25 | { margin-top: 25px; margin-bottom: 25px; } |
| margin-top-bottom-30 | { margin-top: 30px; margin-bottom: 30px; } |
| margin-top-bottom-35 | { margin-top: 35px; margin-bottom: 35px; } |
| margin-top-bottom-40 | { margin-top: 40px; margin-bottom: 40px; } |
| margin-top-bottom-45 | { margin-top: 45px; margin-bottom: 45px; } |
| margin-top-bottom-50 | { margin-top: 50px; margin-bottom: 50px; } |
| margin-left-right-0 | { margin-left: 0; margin-right: 0; } |
| margin-left-right-5 | { margin-left: 5px; margin-right: 5px; } |
| margin-left-right-10 | { margin-left: 10px; margin-right: 10px; } |
| margin-left-right-15 | { margin-left: 15px; margin-right: 15px; } |
| margin-left-right-20 | { margin-left: 20px; margin-right: 20px; } |
| margin-left-right-25 | { margin-left: 25px; margin-right: 25px; } |
| margin-left-right-30 | { margin-left: 30px; margin-right: 30px; } |
| margin-left-right-35 | { margin-left: 35px; margin-right: 35px; } |
| margin-left-right-40 | { margin-left: 40px; margin-right: 40px; } |
| margin-left-right-45 | { margin-left: 45px; margin-right: 45px; } |
| margin-left-right-50 | { margin-left: 50px; margin-right: 50px; } |
| padding-0 | { padding: 0; } |
| padding-5 | { padding: 5px; } |
| padding-10 | { padding: 10px; } |
| padding-15 | { padding: 15px; } |
| padding-20 | { padding: 20px; } |
| padding-25 | { padding: 25px; } |
| padding-30 | { padding: 30px; } |
| padding-35 | { padding: 35px; } |
| padding-40 | { padding: 40px; } |
| padding-45 | { padding: 45px; } |
| padding-50 | { padding: 50px; } |
| padding-top-0 | { padding-top: 0; } |
| padding-top-5 | { padding-top: 5px; } |
| padding-top-10 | { padding-top: 10px; } |
| padding-top-15 | { padding-top: 15px; } |
| padding-top-20 | { padding-top: 20px; } |
| padding-top-25 | { padding-top: 25px; } |
| padding-top-30 | { padding-top: 30px; } |
| padding-top-35 | { padding-top: 35px; } |
| padding-top-40 | { padding-top: 40px; } |
| padding-top-45 | { padding-top: 45px; } |
| padding-top-50 | { padding-top: 50px; } |
| padding-right-0 | { padding-right: 0; } |
| padding-right-5 | { padding-right: 5px; } |
| padding-right-10 | { padding-right: 10px; } |
| padding-right-15 | { padding-right: 15px; } |
| padding-right-20 | { padding-right: 20px; } |
| padding-right-25 | { padding-right: 25px; } |
| padding-right-30 | { padding-right: 30px; } |
| padding-right-35 | { padding-right: 35px; } |
| padding-right-40 | { padding-right: 40px; } |
| padding-right-45 | { padding-right: 45px; } |
| padding-right-50 | { padding-right: 50px; } |
| padding-bottom-0 | { padding-bottom: 0; } |
| padding-bottom-5 | { padding-bottom: 5px; } |
| padding-bottom-10 | { padding-bottom: 10px; } |
| padding-bottom-15 | { padding-bottom: 15px; } |
| padding-bottom-20 | { padding-bottom: 20px; } |
| padding-bottom-25 | { padding-bottom: 25px; } |
| padding-bottom-30 | { padding-bottom: 30px; } |
| padding-bottom-35 | { padding-bottom: 35px; } |
| padding-bottom-40 | { padding-bottom: 40px; } |
| padding-bottom-45 | { padding-bottom: 45px; } |
| padding-bottom-50 | { padding-bottom: 50px; } |
| padding-left-0 | { padding-left: 0; } |
| padding-left-5 | { padding-left: 5px; } |
| padding-left-10 | { padding-left: 10px; } |
| padding-left-15 | { padding-left: 15px; } |
| padding-left-20 | { padding-left: 20px; } |
| padding-left-25 | { padding-left: 25px; } |
| padding-left-30 | { padding-left: 30px; } |
| padding-left-35 | { padding-left: 35px; } |
| padding-left-40 | { padding-left: 40px; } |
| padding-left-45 | { padding-left: 45px; } |
| padding-left-50 | { padding-left: 50px; } |
| padding-top-bottom-0 | { padding-top: 0; padding-bottom: 0; } |
| padding-top-bottom-5 | { padding-top: 5px; padding-bottom: 5px; } |
| padding-top-bottom-10 | { padding-top: 10px; padding-bottom: 10px; } |
| padding-top-bottom-15 | { padding-top: 15px; padding-bottom: 15px; } |
| padding-top-bottom-20 | { padding-top: 20px; padding-bottom: 20px; } |
| padding-top-bottom-25 | { padding-top: 25px; padding-bottom: 25px; } |
| padding-top-bottom-30 | { padding-top: 30px; padding-bottom: 30px; } |
| padding-top-bottom-35 | { padding-top: 35px; padding-bottom: 35px; } |
| padding-top-bottom-40 | { padding-top: 40px; padding-bottom: 40px; } |
| padding-top-bottom-45 | { padding-top: 45px; padding-bottom: 45px; } |
| padding-top-bottom-50 | { padding-top: 50px; padding-bottom: 50px; } |
| padding-left-right-0 | { padding-left: 0; padding-right: 0; } |
| padding-left-right-5 | { padding-left: 5px; padding-right: 5px; } |
| padding-left-right-10 | { padding-left: 10px; padding-right: 10px; } |
| padding-left-right-15 | { padding-left: 15px; padding-right: 15px; } |
| padding-left-right-20 | { padding-left: 20px; padding-right: 20px; } |
| padding-left-right-25 | { padding-left: 25px; padding-right: 25px; } |
| padding-left-right-30 | { padding-left: 30px; padding-right: 30px; } |
| padding-left-right-35 | { padding-left: 35px; padding-right: 35px; } |
| padding-left-right-40 | { padding-left: 40px; padding-right: 40px; } |
| padding-left-right-45 | { padding-left: 45px; padding-right: 45px; } |
| padding-left-right-50 | { padding-left: 50px; padding-right: 50px; } |
| float-left | { float: left; } |
| float-right | { float: right; } |
| text-align-left | { text-align: left; } |
| text-align-center | { text-align: center; } |
| text-align-right | { text-align: right; } |
| text-overflow-clip | { text-overflow: clip; } |
| text-overflow-ellipsis | { text-overflow: ellipsis; } |
| line-clamp-1 | { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } |
| line-clamp-2 | { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } |
| line-clamp-3 | { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } |
| line-clamp-4 | { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } |
| line-clamp-5 | { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } |
| cursor-pointer | { cursor: pointer; } |
| vertical-align-top | { vertical-align: top; } |
| vertical-align-bottom | { vertical-align: bottom } |
| vertical-text | { writing-mode: vertical-rl; text-orientation: sideways-right; padding: 10px; } |
| overflow-auto | { overflow: auto; min-height: 0; / min-height required for Firefox / } |
| overflow-hidden | { overflow: hidden; } |
| overflow-scroll | { overflow: scroll; } |
| overflow-visible | { overflow-x: visible; } |
| overflow-x-auto | { overflow-x: auto; } |
| overflow-x-hidden | { overflow-x: hidden; } |
| overflow-x-scroll | { overflow-x: scroll; } |
| overflow-x-visible | { overflow-x: visible; } |
| overflow-y-auto | { overflow-y: auto; } |
| overflow-y-hidden | { overflow-y: hidden; } |
| overflow-y-scroll | { overflow-y: scroll; } |
| overflow-y-visible | { overflow-y: visible; } |
You can still type in whatever class you like. This is just an added convenience to help you see what is available. This list will grow as we continue to add the classes to our database.