Por exemplo: Em / user / login, os campos de entrada de nome de usuário e senha incluem um atributo HTML size = “60”.
Em Bartik, os campos têm largura fixa.
No Bootstrap , os campos são esticados para preencher toda a largura da tela.
Comportamento solicitado: Eu gostaria de faça com que o Bootstrap obedeça ao atributo size – on / user / login e em todas as outras páginas do site. Não consigo gerar uma lista de todas as páginas afetadas, pois há muitas e isso mudará com o tempo.
Parece que algo no SCSS do Bootstrap está bagunçando as larguras dos campos de entrada. Eu gostaria de excluir esse algo ou substituí-lo. No entanto, ainda não consegui descobrir como fazer isso.
O que descobri até agora: Já existe um problema no Drupal.org , onde o mantenedor do módulo markcarver diz
A razão pela qual eles “são” esticados “na largura total é que ambos têm uma classe de controle de forma. Isso faz parte do design do Bootstrap e não vou lutar contra isso fora da caixa. Existem várias maneiras de alterar este formulário como você achar necessário, em um subtema.
O que funciona parcialmente, mas não 100% certo: Seria possível escrever CSS para definir uma nova largura em todas as entradas com classe de controle de formulário do tipo texto. Isso é bom, mas define a largura para um valor fixo, como 15em. Gostaria de recuperar a largura original, que será diferente em cada entrada.
Comentários
- Eu me pergunto por que não ' Você simplesmente corrige isso com CSS ???
- @leymannx que esclareço, consulte " EDIT 2 ". Sim, estou esperando consertá-lo com CSS, mas estou procurando uma única alteração que abranja todos os campos. Se você sabe como fazer isso, poste / comente.
- Se a pessoa que votou contra pudesse explicar o porquê, então talvez eu pudesse aprender algo e fazer perguntas melhores no futuro
- Não ' t downvote, mas acho que aconteceu porque você realmente faz uma pergunta excessivamente ampla e não ' não destaca nada que você mesmo fez até agora para corrigir esse problema por conta própria. Além disso, quando você pode consertá-lo com CSS e nos perguntar como fazer isso, essa pergunta também está fora do tópico. Não vamos ' ensiná-lo a criar um subtema e ' não ensiná-lo a escrever CSS robusto. Já existem centenas de tutoriais por aí cobrindo isso. Boa sorte! 🙂
- @leymannx Obrigado. Na verdade, estou fazendo uma pergunta muito específica, mas acho que a expliquei mal. Eu ' tentarei mais uma edição. Mas talvez eu deva apenas excluir a pergunta, pois está causando confusão.
Resposta
A maneira padrão de corrigir isso é para usar css em seu subtema baseado em Bootstrap. Para os campos de login de nome de usuário e senha:
#edit-name, #edit-pass { width: 15em; } NB, estou procurando uma solução que cubra todos forma de entrada, não apenas o login do usuário como um caso especial.
Você pode usar este método (css) para cada campo de entrada de texto que deseja substituir Comportamento padrão do bootstrap. Obviamente, você precisa usar o seletor css correto para o campo que deseja substituir.
Comentários
- Obrigado por dedicar um tempo para responder. Por favor, veja minha " EDIT 2 " – Espero evitar ter de identificar cada campo que pode ser afetado caso a caso já que isso não é prático ou sustentável
- entrada e destino por classe de controle de formulário do tipo texto?
- @kevin, desculpe, mas não entendi a pergunta.
- em vez de usar IDs, você poderia apenas direcionar entradas com essa classe, que são do tipo ' text '.
- @Kevin obrigado, sim, isso é mais o que eu esperava. No entanto, parece que eu ainda estaria preso com uma largura fixa como 15em. Eu preferiria manter a largura real especificada em #size. Gostaria de " desfazer " tudo o que o Bootstrap fez para substituir as larguras e pegar exatamente a mesma largura que ocorre em Bartik.
Resposta
Eu esperava uma resposta de um especialista e ainda assim agradeceria – ficaria feliz em definir aceite outra resposta em vez da minha.
Esta é minha melhor tentativa até agora. Parece funcionar para a página de login e o bloqueio de pesquisa. No entanto, ainda sinto que “estou lutando contra um sistema que não conheço” entendo totalmente.
.form-control, .input-group .form-control, .input-group-btn { width: auto; }