Labels with Inline Edit

sitesurfer

I have just had a look at the inline editing options (which functionally work perfectly).

On clicking the cell in DT, the text box appears as you would expect - but with the addition of the label too alongside it.

Is there a way to replicate the examples using Bootstrap OR is the latest version of Editor forcing the labels on the edit override to show as default? I have more or less replicated the inline edit with check box example and with the bootstrap styling overrides the checkbox css update does not fill (changing the font awesome icon) - thats the least of my worries but worth mentioning.

I have tried title: false and even in vague hope label : false but nothing stops the display of the form label next to the inline text field.

Any ideas?

Oo

allan

Hi,

The Bootstrap integration CSS file for Editor has a few styling missing in the current release. Try the following, which will be in the next release:

div.DTE_Field:after {
  display: block;
  content: ".";
  height: 0;
  line-height: 0;
  clear: both;
  visibility: hidden;
}

div.DTE_Inline div.DTE_Field {
  width: 100%;
}
div.DTE_Inline div.DTE_Field > div {
  width: 100%;
  padding: 0;
}
div.DTE_Inline div.DTE_Field label {
  display: none;
}
div.DTE_Inline div.DTE_Field input {
  width: 100%;
  color: black;
}
div.DTE_Inline div.DTE_Field div.help-block {
  display: none;
}

div.DTE_Bubble {
  position: absolute;
  z-index: 11;
  margin-top: -6px;
  opacity: 0;
}
div.DTE_Bubble div.DTE_Bubble_Liner {
  position: absolute;
  bottom: 0;
  border: 1px solid black;
  width: 300px;
  margin-left: -150px;
  background-color: white;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 0 0 0.5em 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table {
  display: table;
  width: 100%;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form {
  display: table-cell;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content {
  padding: 0;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field {
  position: relative;
  zoom: 1;
  margin-bottom: 0.5em;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field:last-child {
  margin-bottom: 0;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field label,
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field > div {
  width: 100%;
  float: none;
  clear: both;
  text-align: left;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table > form div.DTE_Form_Content div.DTE_Field label {
  padding-bottom: 4px;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Table div.DTE_Form_Buttons {
  display: table-cell;
  vertical-align: bottom;
  padding: 0 1em 0.75em 0.75em;
  width: 1%;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Header {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  font-size: 14px;
  width: 100%;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Form_Error {
  float: none;
  display: none;
  padding: 0;
  margin-bottom: 0.5em;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close {
  position: absolute;
  top: -11px;
  right: -11px;
  width: 22px;
  height: 22px;
  border: 2px solid white;
  background-color: black;
  text-align: center;
  border-radius: 15px;
  cursor: pointer;
  *cursor: hand;
  z-index: 12;
  box-shadow: 2px 2px 6px #111;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
  content: '\00d7';
  color: white;
  font-weight: bold;
  font-size: 18px;
  line-height: 18px;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:hover {
  background-color: #092079;
  box-shadow: 2px 2px 9px #111;
}
div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
  margin-top: -2px;
  display: block;
}
div.DTE_Bubble div.DTE_Bubble_Triangle {
  position: absolute;
  height: 10px;
  width: 10px;
  top: -6px;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

div.DTE_Bubble_Background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.05);
}

Allan

sitesurfer

Bloody hell you're good.

Five stars with Oak Leaves.

Oo

sitesurfer

Hi Allan

Just had a user come to me with a wonderful issue, Chrome still has the labels showing issue - Firefox does not and I have no idea on IE (does anyone?!)

Is there a reason for this oddity? So in essence FF is perfect but Chrome (which I would have thought was bob on) still has the issue.

Wow - UPDATE.
On the Mac Chrome its fine, just not the PC version. I wonder if her version is out of date, I will do an update to check.

sitesurfer

This is a doozy.

Its one PC with Chrome, which is up to date. Its like its not seeing the updated CSS - but other machines on the network are seeing it just fine.

allan

Possibly clearing the cache might help? Depends on how aggressive the caching has been set up. Something like CloudFlare could also be caching the files if you are using it.

Allan

sitesurfer

Woohoo my hair can remain in place - it was the cache!