overflowstack9 overflowstack9 - 4 months ago 13
CSS Question

How to prevent the values applied by default

The above i have added the demo as you can see the

2 values

usa and asia
applied by default.

Firstly i needed to add placeholder to both the columns by default. And place holder should be different for each the tags how can i achieve this.



$('#countries').scombobox({
fullMatch: true
});

$('#continents').scombobox({
fullMatch: true,
highlight: false
});

body {
padding: 23px 0 0 0;
font-family: Arial, 'sans-serif';
font-size: 90%;
color: #333;
background: #FAFAFA;
}

.scombobox {
position: relative;
margin: 5px;
}
.scombobox select {
display: none;
}

.scombobox-display {
width: 100%;
height: 100%;
padding: 2px 4px;
border: 1px solid #CCC;
border-radius: 4px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.scombobox-display:focus {
box-shadow: 0 0 3px #CCC;
outline: none;
}
.scombobox-display:disabled {
background: #F0F0F0;
}
.scombobox-display.scombobox-invalid {
background: #FFCCD4;
}
.scombobox-display-div {
border: 1px solid #CCC;
border-radius: 4px;
cursor: pointer;
}
.scombobox-display-div-holder {
padding: 2px;
}
.scombobox-display-div-item {
border: 1px solid #CCC;
margin: 2px;
border-radius: 4px;
float: left;
height: 100%;
max-width: 150px;
padding: 4px 18px 4px 8px;
position: relative;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
cursor: default;
background: #F8F8F8;
display: none;
}
.scombobox-display-div-item-text {
max-width: 140px;
overflow: hidden;
}
.scombobox-display-div-item-remove {
position: absolute;
right: 2px; top: 2px;
background: #A0A0A0;
border-radius: 100px;
color: white;
cursor: pointer;
line-height: 90%;
padding: 1px 3px 0px;
}
.scombobox-display-div-item-remove:hover {
background: #408CBE;
}
.scombobox-display-div-item-remove:active {
background: #3075A3;
}

.scombobox-list {
display: none;
position: absolute;
max-height: 400px;
min-width: 100%;
max-width: 300%;
white-space: nowrap;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow-y: auto;
background: white;
border: 1px solid #CCC;
border-top: none; /* instead of margin-top: -1px */
border-radius: 4px;
box-shadow: 0 0 3px #CCC;
z-index: 10;
}
.scombobox-list p {
cursor: pointer;
margin: 0;
padding: 5px;
}
.scombobox-list p input[type="checkbox"] {
margin-right: 8px;
vertical-align: middle;
}
.scombobox-list p:hover, .scombobox-list p.scombobox-hovered {
background-color: #E9EFFC;
}
.scombobox-list p.scombobox-separator {
height: 2px; padding: 0; cursor: default; background: #EEE;
}
.scombobox-list p.scombobox-header {
cursor: default;
background: #EEE;
}
.scombobox-dropdown-arrow {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
}
.scombobox-dropdown-arrow:hover {
opacity: 1;
filter:alpha(opacity=100);
}
.scombobox-dropdown-background {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
background: white;
border: 1px solid #CCC;
border-radius: 0 4px 4px 0;
border-left: none;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.scombobox-dropdown-background-invalid {
border-left: 1px solid #CCC;
}
.scombobox-marker {
background: #958FFF;
color: white;
border-radius: 2px;
padding: 0 2px;
margin: 0 2px;
}
.scombobox input[type="checkbox"] {
cursor: pointer;
}
.scombobox-disabled .scombobox-dropdown-background,
.scombobox-disabled .scombobox-dropdown-arrow {
display: none;
}
.scombobox-disabled .scombobox-display-div {
background: #F8F8F8;
cursor: default;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='//cdn.rawgit.com/vijaykumarcmeseo/250f949a8de865b38e7e34bd9101e6f2/raw/670276916b77a4162e983e72aa2226cb645a6315/v.js' type='text/javascript'></script>
<script src='//cdn.rawgit.com/vijaykumarcmeseo/a9c7f54e83a228e54212c2c78a8b3422/raw/de75136be3a9beb9e4ab1538fd765e79acc58e00/lz.js' type='text/javascript'></script>
<select id="countries">
<option value="1"></option>
<option value="2">india</option>
</select>

<select id="continents">
<option value="1"></option>
<option value="2">northamerica</option>
</select>




Answer

add an option with value="0" and selected and disabled

$('#countries').scombobox({
  fullMatch: true

});

$('#continents').scombobox({
  fullMatch: true,
  highlight: false
});
body {
  padding: 23px 0 0 0;
  font-family: Arial, 'sans-serif';
  font-size: 90%;
  color: #333;
  background: #FAFAFA;
}
.scombobox {
  position: relative;
  margin: 5px;
}
.scombobox select {
  display: none;
}
.scombobox-display {
  width: 100%;
  height: 100%;
  padding: 2px 4px;
  border: 1px solid #CCC;
  border-radius: 4px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.scombobox-display:focus {
  box-shadow: 0 0 3px #CCC;
  outline: none;
}
.scombobox-display:disabled {
  background: #F0F0F0;
}
.scombobox-display.scombobox-invalid {
  background: #FFCCD4;
}
.scombobox-display-div {
  border: 1px solid #CCC;
  border-radius: 4px;
  cursor: pointer;
}
.scombobox-display-div-holder {
  padding: 2px;
}
.scombobox-display-div-item {
  border: 1px solid #CCC;
  margin: 2px;
  border-radius: 4px;
  float: left;
  height: 100%;
  max-width: 150px;
  padding: 4px 18px 4px 8px;
  position: relative;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  cursor: default;
  background: #F8F8F8;
  display: none;
}
.scombobox-display-div-item-text {
  max-width: 140px;
  overflow: hidden;
}
.scombobox-display-div-item-remove {
  position: absolute;
  right: 2px;
  top: 2px;
  background: #A0A0A0;
  border-radius: 100px;
  color: white;
  cursor: pointer;
  line-height: 90%;
  padding: 1px 3px 0px;
}
.scombobox-display-div-item-remove:hover {
  background: #408CBE;
}
.scombobox-display-div-item-remove:active {
  background: #3075A3;
}
.scombobox-list {
  display: none;
  position: absolute;
  max-height: 400px;
  min-width: 100%;
  max-width: 300%;
  white-space: nowrap;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  overflow-y: auto;
  background: white;
  border: 1px solid #CCC;
  border-top: none;
  /* instead of margin-top: -1px */
  border-radius: 4px;
  box-shadow: 0 0 3px #CCC;
  z-index: 10;
}
.scombobox-list p {
  cursor: pointer;
  margin: 0;
  padding: 5px;
}
.scombobox-list p input[type="checkbox"] {
  margin-right: 8px;
  vertical-align: middle;
}
.scombobox-list p:hover,
.scombobox-list p.scombobox-hovered {
  background-color: #E9EFFC;
}
.scombobox-list p.scombobox-separator {
  height: 2px;
  padding: 0;
  cursor: default;
  background: #EEE;
}
.scombobox-list p.scombobox-header {
  cursor: default;
  background: #EEE;
}
.scombobox-dropdown-arrow {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
}
.scombobox-dropdown-arrow:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}
.scombobox-dropdown-background {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  background: white;
  border: 1px solid #CCC;
  border-radius: 0 4px 4px 0;
  border-left: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.scombobox-dropdown-background-invalid {
  border-left: 1px solid #CCC;
}
.scombobox-marker {
  background: #958FFF;
  color: white;
  border-radius: 2px;
  padding: 0 2px;
  margin: 0 2px;
}
.scombobox input[type="checkbox"] {
  cursor: pointer;
}
.scombobox-disabled .scombobox-dropdown-background,
.scombobox-disabled .scombobox-dropdown-arrow {
  display: none;
}
.scombobox-disabled .scombobox-display-div {
  background: #F8F8F8;
  cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='//cdn.rawgit.com/vijaykumarcmeseo/250f949a8de865b38e7e34bd9101e6f2/raw/670276916b77a4162e983e72aa2226cb645a6315/v.js' type='text/javascript'></script>
<script src='//cdn.rawgit.com/vijaykumarcmeseo/a9c7f54e83a228e54212c2c78a8b3422/raw/de75136be3a9beb9e4ab1538fd765e79acc58e00/lz.js' type='text/javascript'></script>
<select id="countries">
  <option value="0" selected disabled>Choose..</option>
  <option value="1">usa</option>
  <option value="2">india</option>
</select>
<select id="continents">
  <option value="0" selected disabled>Choose..</option>
  <option value="1">asia</option>
  <option value="2">northamerica</option>
</select>

Comments