Hi Thierry,

In a group of buttons, the inner borders are square, only the outer borders being rounded.
If a button becomes invisible when refreshing, the borders that have become external remain square.
Is it possible to remedy it ?

Hi Vincent, any screenshot to illustrate?

Yes, of course.

2 active buttons:

1 remaining:

Hi Vincent,

It's a CSS caveat, Bootstrap can't do nothing about it, even version 4, we need some custom JavaScript and CSS.

Please test this solution (will move to FoxInCloud V 2.31.0-beta.2 if your tests are OK)

in xxx.css

/* 2020-05-14 thn -- {FiC V 2.31.0-beta.2} {en} rounded border on first visible outer button -- move to FoxInCloud.css if OK */
.btn-group>.btn.rbLeft:not(:first-child) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.btn-group>.btn.rbRight:not(:last-child) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.btn-group-vertical>.btn.rbTop:not(:last-child) {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.btn-group-vertical>.btn.rbRight:not(:last-child) {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

in xxx.js, add this inside 
jQuery.extend(FoxInCloud, {
…

/* 2020-05-14 thn -- {FiC V 2.31.0-beta.2} {en} rounded border on first visible outer button -- move to FoxInCloud.js if OK */
  AjaxComplete_: function (jqXHR) {
    jQuery.fn.reverse = function() {
      return this.pushStack(this.get().reverse(), arguments);
    }; 
    var $grp, vertical, $bts, reverse, $btn, visible, visible_, btnFn = function(idx){
      $btn = jQuery(this);
      visible = $btn.is(':visible');
      $btn[(idx > 0 && visible && !visible_ ? 'add' : 'remove') + 'Class'](reverse ? (vertical ? 'rbBot': 'rbRight') : (vertical ? 'rbTop': 'rbLeft'));
      visible_ = visible_ || visible;
    };
    jQuery('.btn-group').add('.btn-group-vertical').each(function(){
      $grp = jQuery(this);
      vertical = $grp.is('.btn-group-vertical');
      $bts = $grp.find('.btn');

      visible_ = false;
      reverse = false;
      $bts.each(btnFn);

      visible_ = false;
      reverse = true;
      $bts.reverse().each(btnFn);
    });
  },

…
  junk: null
});

So class ! (sans jeu de mots ...)

But it's ok on the left side of the button but not on the right side:

left:

right:

1. I may have updated the code since your test, please try with the code currently posted
2. Please make sure to clear the cache before re-testing
3. If you still have an issue, please post the HTML of the whole button group (with contained buttons) that you copy from within the developer tools (select the button group, F2, copy), and outline the button where the behaviour is different from expected
4. if possible, please test also on a vertical button group

TIA

<div class="btn-group awBSgrp-retourdon p001">
<button type="button" id="realise_scx-retourdon" class="realise_scx-retourdon btn-default btn" title="Retour aux données pour modifier le compromis" tabindex="3"><span class="fa fa-undo" aria-hidden="true"></span> Retour aux données</button>
<button type="button" id="realise_scx-raz" class="realise_scx-raz btn-default btn" title="Remise à zéro (sans supp. des données) permettant une nouvelle finalisation" tabindex="2" style="display: none;">RAZ sign.</button>
</div>

The right corners of this button:

With vertical buttons group:

<div class="form-group awBSgrp-ajout p001">
<div class="btn-group-vertical awBSgrp-ajout p001">
<button type="button" id="partiesdoss_scx-ajout" class="partiesdoss_scx-ajout doo-ajouter btn-default btn" title="Ajouter une ligne" tabindex="2" accesskey="A" style="cursor: pointer;"><span class="fa fa-plus-circle" aria-hidden="true"></span> Ajouter</button>
<button type="button" id="partiesdoss_scx-modifier" class="partiesdoss_scx-modifier doo-modifier btn-default btn" tabindex="3" accesskey="M" style="cursor: pointer;"><span class="fa fa-edit text-primary" aria-hidden="true"></span> Modifier</button>
<button type="button" id="partiesdoss_scx-retirer" class="partiesdoss_scx-retirer doo-retirer btn-default btn" title="Retirer l'option sélectionnée" tabindex="4" accesskey="R" style="cursor: pointer;"><span class="fa fa-minus-circle text-danger" aria-hidden="true"></span> Retirer</button>
<button type="button" id="partiesdoss_scx-effacer" class="partiesdoss_scx-effacer doo-effacer btn-default btn" title="Effacer les informations de la page courante" tabindex="5" style="cursor: pointer;"><span class="fa fa-eraser" aria-hidden="true"></span> Effacer</button>
<button type="button" id="partiesdoss_scx-voir1" class="partiesdoss_scx-voir1 doo-visualiser btn btn-default" tabindex="7" accesskey="V" style="display: none;"><span class="fa fa-eye" aria-hidden="true"></span> Visualiser</button>
</div>
</div>

Problem with the last one ("Visualiser" is not visible):

OK thanks for the feedback; please try this code in xxx.js:

/* 2020-05-14 thn -- {FiC V 2.31.0-beta.2} {en} rounded border on first visible outer button -- move to FoxInCloud.js if OK */
  AjaxComplete_: function (jqXHR) {
    jQuery.fn.reverse = function() {
      return this.pushStack(this.get().reverse(), arguments);
    }; 
    var $grp, vertical, $bts, reverse, $btn, visible, visible_, btnFn = function(idx){
      $btn = jQuery(this);
      visible = $btn.css('display') !== 'none';
      $btn[(idx > 0 && visible && !visible_ ? 'add' : 'remove') + 'Class'](reverse ? (vertical ? 'rbBot': 'rbRight') : (vertical ? 'rbTop': 'rbLeft'));
      visible_ = visible_ || visible;
    };
    jQuery('.btn-group').add('.btn-group-vertical').each(function(){
      $grp = jQuery(this);
      vertical = $grp.is('.btn-group-vertical');
      $bts = $grp.find('.btn');

      visible_ = false;
      reverse = false;
      $bts.each(btnFn);

      visible_ = false;
      reverse = true;
      $bts.reverse().each(btnFn);
    });
  },

and in xxx.css

/* 2020-05-14 thn -- {FiC V 2.31.0-beta.2} {en} rounded border on first visible outer button -- move to FoxInCloud.css if OK */
.btn-group>.btn.rbLeft:not(:first-child) {
  border-top-left-radius: 4px!important;
  border-bottom-left-radius: 4px!important;
}
.btn-group>.btn.rbRight:not(:last-child) {
  border-top-right-radius: 4px!important;
  border-bottom-right-radius: 4px!important;
}
.btn-group-vertical>.btn.rbTop:not(:first-child) {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.btn-group-vertical>.btn.rbBot:not(:last-child) {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

TIA

Same results. With the same screens:

Vertical buttons (last one):

<div class="col col-ajout col-xs-12 col-sm-3 text-right">
<div class="form-group awBSgrp-ajout p001">
<div class="btn-group-vertical awBSgrp-ajout p001">
<button type="button" id="partiesdoss_scx-ajout" class="partiesdoss_scx-ajout doo-ajouter btn-default btn" title="Ajouter une ligne" tabindex="2" accesskey="A" style="cursor: pointer;"><span class="fa fa-plus-circle" aria-hidden="true"></span> Ajouter</button>
<button type="button" id="partiesdoss_scx-modifier" class="partiesdoss_scx-modifier doo-modifier btn-default btn" tabindex="3" accesskey="M" style="cursor: pointer;"><span class="fa fa-edit text-primary" aria-hidden="true"></span> Modifier</button>
<button type="button" id="partiesdoss_scx-retirer" class="partiesdoss_scx-retirer doo-retirer btn-default btn" title="Retirer l'option sélectionnée" tabindex="4" accesskey="R" style="cursor: pointer;"><span class="fa fa-minus-circle text-danger" aria-hidden="true"></span> Retirer</button>
<button type="button" id="partiesdoss_scx-effacer" class="partiesdoss_scx-effacer doo-effacer btn-default btn" title="Effacer les informations de la page courante" tabindex="5" style="cursor: pointer;"><span class="fa fa-eraser" aria-hidden="true"></span> Effacer</button>
<button type="button" id="partiesdoss_scx-voir1" class="partiesdoss_scx-voir1 doo-visualiser btn btn-default" tabindex="7" accesskey="V" style="display: none;"><span class="fa fa-eye" aria-hidden="true"></span> Visualiser</button>
</div>
</div>
</div>

and horizontal (right corners):

<div class="btn-group awBSgrp-retourdon p001">
<button type="button" id="realise_scx-retourdon" class="realise_scx-retourdon btn-default btn" title="Retour aux données pour modifier le compromis" tabindex="3"><span class="fa fa-undo" aria-hidden="true"></span> Retour aux données</button>
<button type="button" id="realise_scx-raz" class="realise_scx-raz btn-default btn" title="Remise à zéro (sans supp. des données) permettant une nouvelle finalisation" tabindex="2" style="display: none;">RAZ sign.</button>
</div>

I doubt… sure you have this code in xxx.js seen in the dev tools?

visible = $btn.css('display') !== 'none';

Also sure you've updated the CSS and hit ctrl+F5 or emptied the cache?

yes and yes, I even tried with Chrome

OK Thanks will make a repro case tomorrow

Thanks in advance

UPDATE: FoxInCloud.js needs an update; will be in the next release… sorry for the delay.

This enhancement does not support .wlEffect*=.T.; please set at design time or in xxxCmd.Init(): xxxCmd.wlEffectHide = .F., xxxCmd.wlEffectShow = .F..

This CSS should work:

/* 2020-05-14 thn -- {FiC V 2.31.0-beta.2} {en} rounded border on first visible outer button */
.btn-group>.btn.rbLeft:not(:first-child):not(.dropdown-toggle) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.btn-group>.btn.rbRight:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.btn-group-vertical>.btn.rbTop:not(:first-child):not(.dropdown-toggle) {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.btn-group-vertical>.btn.rbBot:not(:last-child):not(.dropdown-toggle) {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

Sorry, I hadn't seen your answer.
If the next beta is near, I can wait.

I tried again, without success for the right borders and for the last vertical button.

I didn't find a .wlEffect* property but I guess you meant .wuEffect* (disabled by default in my subclass) ?

I tried again, without success

Will work with the next FoxInCloud release… then think of removing all the JS & CSS code added for testing

.wuEffect*

right

OK. I wait ... impatiently 😃