Hiding detail buttons on preview forms (v2023)

v23

  • occurs on all preview display types

there’s a master table: Clients

  • Detail tables: notes, documents, contacts

when the preview page is displayed the “master/detail” & “client notes” / “client documents” / “client contacts” buttons appear and then disappear, at one point they will all be hidden, when you re-open the details page, the cycle starts again.I have css code that was suppose to hide these buttons

sticcino wrote:

I have css code that was suppose to hide these buttons

Where did you put it? You might put it at a wrong location so your CSS styles are removed and then added when you open a new preview row. Post your code and explain how you hide them for discussion.You better put it under HTML → Styles → User.

looks like I misspoke, I don’t believe the css code has any effectI removed everything from the CSS section and the previews still display the button, then when you click another tab and go back the button is removedas for script code, there’s nothing on any of the forms to note:in global startup, nothing to note as well, except for:

$( ".fa-angle-double-left" ).remove();
$( ".info" ).remove();

There is css after the user_styles section that looks like it was inserted by the infinite scroll module

/*BEGIN_USER_STYLES*/
.pagebreak {
  page-break-before: always;
}

.ew-grid {
  width: 100% !important;
}

.textarea.form-control {
  width: 25%;
}

.ew-aggregate::after {
  content: "";
}

form#fuserpriv {
  padding-bottom: 20px !important;
}

div.indent {
  text-indent: 40px;
}

#toast-container {
  padding-top: 110px;
}

.icon-md-view {
  visibility: hidden !important;
  display: none;
}

.icon-table {
  visibility: hidden !important;
  display: none;
}

textarea.form-control {
  width: auto;
}

.icon-md-edit {
  visibility: hidden !important;
  display: none;
}

.box {
  width: 440px;
  float: left;
  margin: 0 20px 0 20px;
}

.box div, .box input {
  border: 1px solid;
  -moz-border-radius: 4px;
  border-radius: 4px;
  width: 100%;
  padding: 5px;
  margin: 3px 0 10px 0;
}

.box div {
  border-color: grey;
  height: 300px;
  overflow: auto;
}

div code {
  display: block;
}

#first div code {
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #eee;
  margin-bottom: 5px;
}

#second div {
  font-size: 0.8em;
}

div.form-group.row > div.col-sm-9 > div {
  display: table;
}

input:read-only {
  background-color: #E9ECEF;
  opacity: 1;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 0.71rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-clip: padding-box;
  border: 1px solid #CED4DA;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.user-panel {
  display: none !important;
}

/*END_USER_STYLES*/

i think i need to create a test project again and see the effects.
i’m not even sure what the method to remove them from the preview form would be now…

sticcino wrote:

$( “.fa-angle-double-left” ).remove();
$( “.info” ).remove();

You should not use such general selectors which affect all other elements with the same CSS classes outside the preview row. You better use CSS Descendant combinator, e.g. if you only want to style HTML elements inside the preview row, you better use “.ew-table-preview-row .my-class”.Also read Inspect HTML element and add your own CSS styles.