Button grouped into a field is going out of bounds and superimposing the field next to it

Asked

Viewed 311 times

1

Greetings to all!

I am using a theme called Remark that contains many ready elements. I am using a search box that contains a text field and a field form button.

The problem is that the button does not seem to obey and follow the field. It advances to the next field and does not respect the specification of "col-Md-3" which seems to be valid only for the field and so the button seems to be outside.

inserir a descrição da imagem aqui

<div class="form-group row">
    <div class="col-md-3">
        <label asp-for="CodigoPostal" class="control-label">Código Postal</label>
        <div class="input-group">
            <input id="txt-pessoa-endereco-codigo-postal" type="text" class="form-control" asp-for="CodigoPostal" placeholder="Digite aqui...">
            <span class="input-group-btn">
                <button id="btn-pessoa-endereco-pesquisar-codigo-postal" type="button" class="btn btn-success" title="Pesquisar Código Postal"><i class="icon wb-search" aria-hidden="true"></i></button>
            </span>
        </div>
        <span asp-validation-for="CodigoPostal" class="text-danger"></span>
    </div>
    <div class="col-md-9">
        <label asp-for="Logradouro" class="control-label">Logradouro</label>
        <input type="text" asp-for="Logradouro" id="txt-pessoa-endereco-logradouro" class="form-control text-uppercase" />
        <span asp-validation-for="Logradouro" class="text-danger"></span>
    </div>
</div>

Someone knows how to correct the positioning of the button to respect the correct positioning, without affecting the field next to it?

Obsessed :)

css html5 css3

1 answer

0


all right? Then you didn’t put your css, so I decided based on this your code.

#logadouro, #codpos{ 
display:inline-flex;  
position:relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Background animado in text</title>
    <link rel="stylesheet" href="css/background%20text%20animado.css">
</head>
<body> 
 <div class="container">
  <div class="row form-group "> 
 
    <div id="codpos"class="col-md-7">
        <label asp-for="CodigoPostal" class="control-label">Código Postal</label>
        <div class="input-group">
            <input id="txt-pessoa-endereco-codigo-postal" type="text" class="form-control" asp-for="CodigoPostal" placeholder="Digite aqui...">
            <span class="input-group-btn">
                
              <button type="button" id="pessoa-endereco-pesquisar-codigo-postal"  class="btn btn-success">Pesquisar Código Postal</button>
            </span>
        </div>
        <span asp-validation-for="CodigoPostal" class="text-danger"></span>
    </div>
    <div id="logadouro" class="col-md-5">
        <label asp-for="Logradouro" class="control-label">Logradouro</label>
        <input type="text" asp-for="Logradouro" id="txt-pessoa-endereco-logradouro" class="form-control text-uppercase" />
        <span asp-validation-for="Logradouro" class="text-danger"></span>
    </div>
</div>
</div>
</body>
</html>

I hope I’ve helped, which doubt just talk.

  • Thanks @Rodrigo Almeida Bezerra! :)

Browser other questions tagged css html5 css3

You are not signed in. Login or sign up in order to post.