Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #57 da revista programar. Faz já o download aqui!

Th3Alchemist

Alinhar input field e botão

Mensagens Recomendadas

Th3Alchemist    1
Th3Alchemist

Boas!

Estou a tentar alinhar um botão para pesquisar o que se encontra na input ao lado... Gostava que esse botão ficasse ao lado direito da input form, de forma:

O botão terá uma largura estática;

O input + botão partilham uma largura de 100%

Ou seja, ao redimensionar a largura da página, somente o input mudará de tamanho, mas mantendo o botão sempre ao lado direito dele...

capturadeecraem20120105.png

Tentei várias coisas mas acabei por limpar tudo... O código que tenho é este:

<div style="text-align: center; width: 100%;">
     <input id="address" type="text" value="<Rua>, <Cod. postal>, <Localidade>" style="width: 100%;" />
     <input type="button" class="botaovms" value="Procurar" onclick="codeAddress()" />  
</div>

Agradecia ajuda

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
mjamado    47
mjamado

com o input a width 100% nunca conseguirar por isso da forma como pretendes

Esse é o primeiro passo, remover essa largura do input. Já agora, o div também não precisa (em teoria, os div ocupam sempre 100%).

Mas o resto é fácil: basta dares posicionamento absoluto aos input e jogar com os left e right de cada um até ficarem alinhadinhos.

<div>
     <input id="address" type="text" value="Rua, Cod. postal, Localidade" style="position: absolute; left: 0px; right: 60px;" />
     <input type="button" class="botaovms" value="Procurar" onclick="codeAddress()" style="position: absolute; right: 0px;" />  
</div>

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
clera    4
clera

sim mas depois para teres o input do tamanho total menos o botão ainda são precisas algumas divs pelo meio para fazer a manha..

é por estas e por outras que deviam ser possiveis variaveis no css....

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
mjamado    47
mjamado
sim mas depois para teres o input do tamanho total menos o botão ainda são precisas algumas divs pelo meio para fazer a manha..

Não, não são. O código que eu coloquei funciona por si só.

é por estas e por outras que deviam ser possiveis variaveis no css....

É possível fazer cálculos em CSS (3), mas só é suportado no IE 9+ e Firefox 4+. Mas, no geral, é má ideia (os cálculos, devido à sua própria natureza transitória, são reavaliados a cada mudança no estado do browser, desde resizes a scrolls).

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
taviroquai    61
taviroquai

Só consegui assim...

<div>
<div style="margin: 0 110px 0 0;">
	<input id="address" type="text" value="<Rua>, <Cod. postal>, <Localidade>" style="width: 100%;" />
</div>
<div style="float: right; position: relative; top: -23px; width: 90px;">
	<input type="button" class="botaovms" value="Procurar" onclick="codeAddress()"/>
</div>
</div>

Ou sem floats...

<div style="position: relative;">
<div style="margin: 0 110px 0 0;">
	<input id="address" type="text" value="<Rua>, <Cod. postal>, <Localidade>" style="width: 100%;" />
</div>
<div style="position: absolute; right: 0; top: 0; width: 90px;">
	<input type="button" class="botaovms" value="Procurar" onclick="codeAddress()"/>
</div>
</div>

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
clera    4
clera

Não, não são. O código que eu coloquei funciona por si só.

Só consegui assim...

<div>
<div style="margin: 0 110px 0 0;">
	<input id="address" type="text" value="<Rua>, <Cod. postal>, <Localidade>" style="width: 100%;" />
</div>
<div style="float: right; position: relative; top: -23px; width: 90px;">
	<input type="button" class="botaovms" value="Procurar" onclick="codeAddress()"/>
</div>
</div>

tambem me parece que é preciso a div, que dê a margem para o input ficar com width a 100%..

de qualquer forma ja tinha experimentado o teu codigo @mjamado, e não funcionava..

É possível fazer cálculos em CSS (3), mas só é suportado no IE 9+ e Firefox 4+. Mas, no geral, é má ideia (os cálculos, devido à sua própria natureza transitória, são reavaliados a cada mudança no estado do browser, desde resizes a scrolls).

com scrolls, tirando casos particulares não é preciso fazer calculos nenhums..agora com resizes sim, o que normalment faço é tratar disso com javascript.. e para não subrecarregar tanto, em certos casos, utilizo um timer, para refazer os calculos apenas passados x millisegundos de ter havido um resize.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
HappyHippyHippo    1123
HappyHippyHippo

com scrolls, tirando casos particulares não é preciso fazer calculos

ai, ai ... estas a pensar so na horizontal,

e a vertical ?? basta pensar nos sticky footers ...

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
taviroquai    61
taviroquai

tambem me parece que é preciso a div, que dê a margem para o input ficar com width a 100%..

É isso clera... basta aquela div...

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
mjamado    47
mjamado

Argh! :buck2: Essas div a mais não são semânticamente relevantes...

Só o Chrome é que respeita correctamente o meu código - esqueci-me que os outros browsers dependem do valor do atributo size para definirem uma largura aos input...

com scrolls, tirando casos particulares não é preciso fazer calculos nenhums..agora com resizes sim, o que normalment faço é tratar disso com javascript.. e para não subrecarregar tanto, em certos casos, utilizo um timer, para refazer os calculos apenas passados x millisegundos de ter havido um resize.

Eu não estou a dizer se é preciso ou não; estou a dizer que os browsers que o suportam reavaliam as expressões de calc quando existem resizes ou scrolling.

Mas são raríssimos os casos onde isso é preciso. Na esmagadora maioria das vezes, CSS chega.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Th3Alchemist    1
Th3Alchemist

OK pessoal, muito obrigado.

mjamado, o teu código funcionou bem, tive somente que fazer uns ajustes nas margens.

                <div>
                    <div style="margin: 0 110px 0 0;margin-right: 80px;">
                        <input id="address" type="text" value="<Rua>, <Cod. postal>, <Localidade>" style="width: 100%;" />
                    </div>
                    <div style="float: right; position: relative; right: -20px; top: -26px; width: 90px;">
                        <input type="button" class="botaovms" value="Procurar" onclick="codeAddress()"/>
                    </div>
                </div>

capturadeecraem20120105.png

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
mjamado    47
mjamado

OK pessoal, muito obrigado.

mjamado, o teu código funcionou bem, tive somente que fazer uns ajustes nas margens.

O que usaste é do taviroquai, a mim mete-me fastio por causa do uso de elementos sem significado semântico.

Eu teria usado o atributo contenteditable de um span, ou algo do género, para atingir o mesmo efeito.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
taviroquai    61
taviroquai

Também não gosto da div ali mas... resolve.

Como o clera disse... basta 1 div à volta do input[text]... experimenta assim, sem floats:

<div style="position: relative;">
<div style="margin-right: 80px;">
	<input id="address" type="text" value="<Rua>, <Cod. postal>, <Localidade>" style="width: 100%; margin-right: 110px;" />
</div>
<input style="position: absolute; right: 0; top: -1px; width: 90px;" type="button" class="botaovms" value="Procurar" onclick="codeAddress()"/>
</div>

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Th3Alchemist    1
Th3Alchemist

O que usaste é do taviroquai, a mim mete-me fastio por causa do uso de elementos sem significado semântico.

Eu teria usado o atributo contenteditable de um span, ou algo do género, para atingir o mesmo efeito.

Descupla pelo meu engano, agradeço aos dois, testei ambos os códigos e ambas funcionem bem para o meu problema.

Também não gosto da div ali mas... resolve.

Como o clera disse... basta 1 div à volta do input[text]... experimenta assim, sem floats:

<div style="position: relative;">
<div style="margin-right: 80px;">
	<input id="address" type="text" value="<Rua>, <Cod. postal>, <Localidade>" style="width: 100%; margin-right: 110px;" />
</div>
<input style="position: absolute; right: 0; top: -1px; width: 90px;" type="button" class="botaovms" value="Procurar" onclick="codeAddress()"/>
</div>

Quando puder experimento isso... Obrigado desde já!

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora


×

Aviso Sobre Cookies

Ao usar este site você aceita a nossa Política de Privacidade