0

Tengo un dialog que contiene componentes de Form.

Estos son los estilos definidos:

const myStyle = makeStyles(theme => ({
  confclass: {
    background: '#8bc34a',
    borderRadius: 7,
    border: 0,
    color: 'white',
    padding: '0 30px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    textTransform: 'capitalize',
    margin: theme.spacing(3)
  },
  delclass: {
    background: '#c62828',
    borderRadius: 7,
    border: 0,
    color: 'white',
    padding: '0 30px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    textTransform: 'capitalize',
    margin: theme.spacing(3)
  },
  formControl: {
    marginLeft: theme.spacing(2),
    marginBottom: theme.spacing(2)
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  },
  dialogContent: {
    minHeight: 135,
    marginBottom: 25,
    overflow: 'hidden'
  },
  inputLabelAnsMsg: {
    marginBottom: 30,
    minHeight: 65,
    overflow: 'hidden'
  },
  divTextFields: {
    marginLeft: 20
  }
}));

Este es el código del componente Dialog:

const DialogQuestion = props => {
const classes = myStyle();

      return (
        <Dialog
          open={props.open}
          onClose={props.closeHandler}
          onExit={onExitDialogHandler}
          aria-labelledby='form-dialog-title'
          PaperProps={{
            style: {
              width: '75%',
              maxHeight: '80%',
              backgroundColor: '#e0e0e0'
            }
          }}
        >
          <DialogTitle id='form-dialog-title'>Nueva pregunta</DialogTitle>
          <DialogContent dividers className={classes.dialogContent}>
            <DialogContentText>
              Para crear una nueva pregunta es necesario completar los siguientes
              campos. Puedes cancelar esta acción con el botón Cancelar en la parte
              inferior o dando click por fuera de este cuadro.
            </DialogContentText>

            <TextField
              autoFocus
              id='question'
              label='Pregunta'
              onChange={textFieldQuestionHandler}
              type='text'
              fullWidth
              required
              variant='outlined'
              defaultValue={questionDetails.question}
              error={errorTextField}
              InputProps={{
                startAdornment: (
                  <InputAdornment position='start'>
                    <HelpIcon />
                  </InputAdornment>
                )
              }}
            />

            <input type='file' onChange={handleUploaded} />
          </DialogContent>
          {files.length > 0 && (
            <Carousel arrows>
              {files &&
                files.map(element => {
                  return <img src={element} />;
                })}
            </Carousel>
          )}
          <div className={classes.formControl}>
            <TextField
              select
              fullWidth
              label='Grupo'
              variant='outlined'
              value={questionDetails.category || group[0].value}
              onChange={event => selectChangeHandler(event, 'category')}
              style={{ marginBottom: 15 }}
            >
              {categoryList}
            </TextField>
            <TextField
              select
              fullWidth
              label='Complejidad'
              variant='outlined'
              value={questionDetails.level || complexity[0].value}
              onChange={event => selectChangeHandler(event, 'level')}
            >
              {levelList}
            </TextField>
          </div>

          {answerListForm}

          <FormControl component='fieldset' className={classes.formControl}>
            <FormLabel component='legend'>Tipo de pregunta</FormLabel>
            <RadioGroup
              aria-label='questionType'
              name='questionType1'
              value={questionType}
              onChange={handleChangeQuestionType}
            >
              <FormControlLabel
                value={QUESTION_TYPES.OPEN}
                control={<Radio />}
                label='Abierta'
              />
              <FormControlLabel
                value={QUESTION_TYPES.MULTIPLE}
                control={<Radio />}
                label='Múltiple'
              />
              <FormControlLabel
                value={QUESTION_TYPES.BINARY}
                control={<Radio />}
                label='Binaria (T o F)'
              />
            </RadioGroup>
          </FormControl>

          <DialogActions>
            <Button
              className={classes.delclass}
              onClick={cancelDialogHandler}
              color='primary'
              key='cancelButtonNewQuestion'
            >
              Cancelar
            </Button>
            <Button
              className={classes.confclass}
              color='primary'
              key='successButtonNewQuestion'
              onClick={
                dialogAction === 0 ? addQuestionHandler : editQuestionHandler
              }
              disabled={errorChecks || errorOptions || errorTextField}
            >
              {props.dialogAction === 0 ? 'Crear' : 'Guardar cambios'}
            </Button>
          </DialogActions>
        </Dialog>
      );

}

Y esto es lo que aparece:

introducir la descripción de la imagen aquí

Debajo del campo de pregunta debería aparecer bien un "Seleccionar archivo" o algo como eso. El botón que se alcanza a ver sí sirve. Y más abajo del botón de "Seleccionar archivo" debería estar un grupo de radios que ni siquiera aparece.

4
  • 1
    Creo que si tenes un css que aplique al form alguien que pueda contestarte lo va a necesitar...
    – gbianchi
    Commented el 10 feb. 2020 a las 14:17
  • 1
    Podrías mostrar la manera en que estas llamando tu css?. Commented el 10 feb. 2020 a las 15:32
  • @LuisEnriqueGómezPérez adjunté un poco más de código, la declaración del estilo y la instanciación de "classes". const classes = myStyle();
    – V0LT3RR4
    Commented el 10 feb. 2020 a las 15:46
  • 1
    En React los estilos al final forman un todo, es decir que aunque desarrollemos o incorporemos componentes con sus propios estilos, finalmente esos estilos se aplican a toda la aplicación. Así, puede ocurrir que un componente no se vea como se esperaba porque hay estilos definidos en otra parte que le afectan. Tendrás que usar el inspector de propiedades para localizar esos estilos que interfieren los de material y modificarlos (nombres de clases por ejemplo) para que no se apliquen a esos componentes.
    – Orici
    Commented el 10 feb. 2020 a las 22:46

2 respuestas 2

0

Prueba cambiando en tu css la linea:

const myStyle = makeStyles(theme => ({

Por:

const myStyle = makeStyles({
2
  • Observa que algunas propiedades definidas en myStyle dependen de theme. :'(
    – V0LT3RR4
    Commented el 10 feb. 2020 a las 16:05
  • es cierto... verifica la ruta donde estas importando el css. Commented el 10 feb. 2020 a las 16:15
0

Detecté el problema en los <DialogContent>. Los retiré y ajusté las secciones con un div y estilos, eso soluciona la altura de los componentes que no se muestran bien, pero no me satisface la solución. ¿Los <DialogContent> tienen la altura limitada?

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.