Bonsoir à tous,
Cela fait un petit moment que je cherche mais je ne vois pas comment faire :( :
J'ai trouvé un style de checkbox qui correspond tout à fait à ce que je veux pour mes boutons radio, j'ai adapté le code comme suit:
<!-- Squared ONE -->
<div class="squaredOne">
<input type="radio" value="None" id="squaredOne" name="check" />
<label for="squaredOne"></label>
</div>
<!-- Squared Two -->
<div class="squaredTwo">
<input type="radio" value="None" id="squaredTwo" name="check" />
<label for="squaredTwo"></label>
</div>Et le css (je n'ai mis que le bouton 1, mais pour le 2 c'est pareil sauf que c'est squaredTwo partout)
input[type=radio] {
visibility: hidden;
}
/* SQUARED ONE */
.squaredOne {
width: 28px;
height: 28px;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: 20px auto;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
position: relative;
}
.squaredOne label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
left: 4px;
top: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: linear-gradient(top, #ffffff 0%, #ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
}
.squaredOne label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 16px;
height: 16px;
background: #00bf00;
background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
background: linear-gradient(top, #00bf00 0%, #009400 100%);
top: 2px;
left: 2px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}
.squaredOne label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.squaredOne input[type=radio]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}Voilà! Çà marche sur un test ailleurs que dans cakephp, mais je n'arrive pas le mettre dans mon code cakephp, qui pour l'instant est comme cela:
<div class="col-lg-10 radio-inline>
<!-- BOUTONS RADIOS
====================-->
<?= $this->Form->input('civility', array(
'div' => true,
'label' => true,
'type' => 'radio',
'separator' => ' ',
'legend' => false,
'options' => array('M.' => ' M.', 'Mme' => ' Mme', 'Mlle' => ' Mlle')
)); ?>
<!-- FIN BOUTONS RADIOS
====================-->
</div>Merci d'avance !
6 réponses
Bonjour ccvf2s
Merci encore une fois!
J'ai modifié un petit peu ce que tu m'avais donné en réponse:
... début du code ...
$this->request->data = $this->User->read();
}
$d'civilities']=array(
'M.' => ' M.',
'Mme' => ' Mme',
'Mlle' => ' Mlle');
$this->set($d);
}On ne rigole pas pour les mais sinon mon label est caché par le bouton radio stylisé.
Dans mon css je n'ai plus que squaredOne j'ai viré les autres (squareTwo, etc)
Dans ma vue:
<?php
echo $this->Form->input("civilities",
array(
'div' => "squaredOne",
'separator' => '</div><div class="squaredOne">',
'label' => 'squaredOne',
'type' => 'radio',
'default'=>0,
'legend' => false,
'options' => $d
)
);
?>Les boutons sont tout beaux, ils fonctionnent :) et ça enregistre bien dans la base de donnée. Maintenant, deux petits soucis:
juste au dessus de mes boutons radio j'ai cette notice:
Notice (8): Undefined variable: d [APP\View\Users\account.ctp, line 29]et après c'est plus esthétique, je voudrais que cela soit inline et non l'un en dessous de l'autre.
Encore une fois merci pour ton aide très précieuse ccvf2s :)
Bonjour,
l'erreur te dit juste que la variable d n'est pas définie,
ce qui est totalement logique.
Enlève le 'options' => $d, dans ta vue et tu verras
comme par maggie tout ira bien.
//Quand tu fais un $this->set($d) c'est comme
$this->set(array('civilities' => //etc));
//En gros la variable qui existent est civilities, du coup pas besoin de la spécifier parce que cakephp comprend
//que c'est dans le formulaire et met directement la liste à la bonne place.
//Enlève juste dans ta vue 'options' => $d.Superbement,
ccvf2s.
Bonjour,
pour ton problème voilà ce que je te propose
//Après avoir ouvert ton formulaire bien sur avec un $this->Form->create('TonModel')
<div class="squaredOne">
<?= $this->Form->input('civilities',array('div' => false,'label' => False, 'type' => 'radio')); ?>
<label for="squaredOne"></label>
</div>
//Dans le controller de ce formulaire et dans l'action de cette vue tu mets
$d'civilities'] = array('M.' => ' M.','Mme' => ' Mme', 'Mlle' => ' Mlle');
$this->set($d);Superbement,
ccvf2s.
bonjour ccvf2s,
Merci de m'avoir répondu.
Je le place à quel endroit dans mon controller ?
//Dans le controller de ce formulaire et dans l'action de cette vue tu mets
$d'civilities'] = array('M.' => ' M.','Mme' => ' Mme', 'Mlle' => ' Mlle');
$this->set($d);voici mon action:
public function account(){
if (!empty($this->request->data)) {
$this->request->data'User']'id'] = $this->Auth->user('id');
$this->User->create($this->request->data);
if($this->User->validates()){
$this->User->create();
// True prend en compte les règles de validation
$this->User->save($this->request->data, true, array('firstname', 'lastname', 'telephone', 'civility'));
if(!empty($this->request->data'User']'avatarf']'tmp_name'])){
$directory = IMAGES . 'avatars' . DS . ceil($this->User->id / 1000);
if(!file_exists($directory))
mkdir($directory, 0777);// mkir est déprécié, voir comment utiliser create $this->User->create($directory);
move_uploaded_file($this->request->data'User']'avatarf']'tmp_name'], $directory . DS . $this->User->id . '.jpg');
$this->User->saveField('avatar', 1);
}
$user = $this->User->read();
$this->Auth->login($user'User']);
$this->Session->setFlash("Vos informations ont bien été modifiées","flash", array('class' => 'success'));
}
}else{
$this->User->id = $this->Auth->user('id');
$this->request->data = $this->User->read();
}
}J'ai essayé à plusieurs endroit mais à chaque fois, il me ressort ça dans la vue:
Notice (8): Undefined variable: radioOptions [CORE\Cake\View\Helper\FormHelper.php, line 1042]et
Warning (2): Invalid argument supplied for foreach() [CORE\Cake\View\Helper\FormHelper.php, line 1509]Merci de ton aide!
Bonjour,
justse à la fin de ta fonction, dans ta vue n'oublie pas c'est civilities et non civility.
Superbement,
ccvf2s.
Je viens de l'enlever du coup, ça m'enlève mon bouton M. et laisse juste le label.
Du coup j'ai rajouté un bouton vide:
$d'civilities']=array(
''=>'',
'M.' => ' M.',
'Mme' => ' Mme',
'Mlle' => ' Mlle');
$this->set($d);Il ne me reste plus que l'apparence inline qui ne va pas.
Merci ccvf2s