Responsiveness to modal

Asked

Viewed 61 times

0

I have a page where I created a modal with some text boxes inside, nothing very elaborate. When I change the screen resolution to very low resolutions like 800x600 my modal deforms a lot, it gets very narrow (I put it wide) and the items inside it come out of position as well. How can I treat it so that it does not deform so much? I understand that it is a question of resposivity.

I configured the modal itself in this way:

      #Mod-gravar{ /*botão que chama a modal */
        background-color:#C25C40; 
        border-color:white; 
        position:absolute; 
        left:120px; 
        top:05px; 
        height:40px; 
        border-radius:8px;
        color:white;

    }

    #Mod-gravar:focus{
        background-color:#262626
    }

    #Mod-gravar:hover{
        background-color:#262626
    }


    input[id=cgc]{
    position:absolute;
    width:160px;
    height:auto;
    border:2px solid #aaa;
    border-radius:8px;
    margin:8px 0;
    outline:none;
    padding:8px;
    box-sizing:border-box;
    transition:.3s;
    top: 140px;
    left: 280px;
    }

    input[id=cgc]:focus{
    border-color:#C25C40;
    box-shadow:0 0 8px 0 #C25C40;
    }

    input[id=cliente]{
    position:absolute;
    width:240px;
    height:auto;
    border:2px solid #aaa;
    border-radius:8px;
    margin:8px 0;
    outline:none;
    padding:8px;
    box-sizing:border-box;
    transition:.3s;
    top: 140px;
    left: 30px;
    }

    input[id=cliente]:focus{
    border-color:#C25C40;
    box-shadow:0 0 8px 0 #C25C40;
    }


    input[id=razao]{
    position:absolute;
    width:240px;
    height:auto;
    border:2px solid #aaa;
    border-radius:8px;
    margin:8px 0;
    outline:none;
    padding:8px;
    box-sizing:border-box;
    transition:.3s;
    top: 90px;
    left: 30px;
    }

    input[id=razao]:focus{
    border-color:#C25C40;
    box-shadow:0 0 8px 0 #C25C40;
    }

    button[id=modalcadastrar]{
        width:120px;
        height:auto;
        top:605px;
        right: 140px;
        position:absolute;
    -webkit-user-select: none;
  user-select: none;


    }

    button[id=modalfecharcad]{
        width:120px;
        height:auto;
        top:605px;
        position:absolute;

        -webkit-user-select: none;
  user-select: none;


    }

    #modaldialog2{
        border:2px solid #C25C40;
        border-radius:8px;
        background-color:#C25C40;
        width:auto;
        min-height:650px;
        margin:auto;
            z-index:110;



    }

HTML

   <div id="Modal-gravar" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg" id="modaldialog2">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header" style="background-color:#C25C40; color:white;  border-bottom: 0 none; height:45px;">
       <!-- <h5 class="modal-title" style="top:10px;position:absolute;">Criar novo cliente</h5> -->
         <h5 style="top:5px;position:absolute;font: 19px ;"><i class="fas fa-address-card">  Criar novo cliente</i></h5>
    </div>

    <!-- abas -->

    <div class="modal-body" style="background-color:#262626;">
    <div class="tab">
  <button class="tablinks active" onclick="openTab(event,'aba1')"><i class="far fa-id-badge">  Cadastro Básico</i></button>
  <button class="tablinks" onclick="openTab(event,'aba2')">Indice Fiscal</button>
  <button class="tablinks" onclick="openTab(event,'aba3')">Tabela de Preço</button>
  <button class="tablinks" onclick="openTab(event,'aba4')">Fabricantes</button>
  <button class="tablinks" onclick="openTab(event,'aba5')">Fabricantes</button>
  <button class="tablinks" onclick="openTab(event,'aba6')">Fabricantes</button>
  <button class="tablinks" onclick="openTab(event,'aba7')">Fabricantes</button>
  <button class="tablinks" onclick="openTab(event,'aba8')">Fabricantes</button>


</div>

<div id="aba1" class="tabcontent" style="display:block;">
  <input type="text" placeholder="Razão" id="razao">
    <input type="text" placeholder="Cliente" id="cliente">
    <input type="text" placeholder="CPF/CNPJ" id="cgc">
</div>

<div id="aba2" class="tabcontent">
  <h3 style="position: absolute; left:130px;">Aba 2</h3>
  <p style="position: absolute; left:130px; top:50px;">Conteudo aba 2</p> 
</div>

<div id="aba3" class="tabcontent">
  <h3 style="position: absolute; left:130px;">Aba 3</h3>
  <p style="position: absolute; left:130px; top:50px;">preço</p>
</div>

<div id="aba4" class="tabcontent">
  <h3 style="position: absolute; left:130px;">Aba 4</h3>
  <p style="position: absolute; left:130px; top:50px;">teste</p>
</div>

<div id="aba5" class="tabcontent">
  <h3 style="position: absolute; left:130px;">Aba 5</h3>
  <p style="position: absolute; left:130px; top:50px;">teste</p>
</div>  

    <div id="aba6" class="tabcontent">
  <h3 style="position: absolute; left:130px;">Aba 6</h3>
  <p style="position: absolute; left:130px; top:50px;">teste</p>
</div>

        <div id="aba7" class="tabcontent">
  <h3 style="position: absolute; left:130px;">Aba 7</h3>
  <p style="position: absolute; left:130px; top:50px;">teste</p>
</div>

        <div id="aba8" class="tabcontent">
  <h3 style="position: absolute; left:130px;">Aba 8</h3>
  <p style="position: absolute; left:130px; top:50px;">teste</p>
</div>

        </div>



      <div class="modal-footer" style="height:570px; background-color:#262626;border-top: 0 none;">

        <button type="button" name="save" id="modalcadastrar"  class="row btn btn-success" data-dismiss="modal" data-backdrop="static" data-keyboard="false">Criar</button>

        <button type="button" class="btn btn-danger" data-dismiss="modal" id="modalfecharcad" >Voltar</button>

        </div>
    </div>

  </div>
</div>

Javascript for the tabs:

function openTab(evt, aba) {

    var i, tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    document.getElementById(aba).style.display = "block";
    evt.currentTarget.className += " active";
}

This is how I want to leave it, and how it stays in most resolutions:

inserir a descrição da imagem aqui

This is how it looks in low resolutions:

inserir a descrição da imagem aqui

html css twitter-bootstrap bootstrap-4

  • It is not the solution to your problem, but the value auto in min-width seems to me incorrect, because if you want a minimum width for the element, it cannot be auto. It should be a value in px, %, 'em' or 'rem', I believe.

  • Another thing is that without a [mcve] there is no way to find an answer to the problem.

  • This auto at width prevented the modal from changing its width every time the screen resolution changed, except for the resolution I set.

  • Friend put the full HTML CSS there, edit the question and include the rest of the code so we can try to simulate your problem... just with this piece of code can’t help you much...

  • @Sam Sorry if I didn’t post more things to make it easier, what else should I put? The modal html? My problem is specifically in modal, so I think css is only in this key but I can post all css if necessary.

  • I put the html and css of the modal, sorry again for the kkk job

  • Okay, but what are the items inside that you say are going out of position? You put an empty modal.

  • The text boxes (cgc, client and reason). This happens when I decrease the screen resolution, or zoom in, because the modal itself does not keep the size.

  • This is normal https://imgur.com/qhjMiMI

  • If the complete modal HTML has no help, because it is not known how you are arranging the elements within it.

  • I put prints to try to show better.

  • @Sam The only part I didn’t put in the html of the modal was that of this menu tabs but even without it I have this problem. Otherwise I put everything related to modal.

  • Missed to put the form.

  • Are you using Bootstrap? If yes which version?

  • How so form?

  • @hugocsl version 4.1.3

  • Don’t have a form inside the modal? The code you posted has nothing inside the modal.

  • By form you mean the text boxes I put inside the modal? I’m still beginner, forgive the confusion

  • I edited the complete HTML with the tabs.

Show 14 more comments

1 answer

1


Your modal guy doesn’t have the da div classy modal-body! It is necessary for you to be able to place your content. After that you have to use Bootstrap’s own Grid to control the content inside. This is described in the documentation as you can read here https://getbootstrap.com/docs/4.0/components/modal/#using-the-grid

inserir a descrição da imagem aqui

Here’s an example of your modal without breaking the content grid.

OBS: The way you aligned the buttons with these classes and properties is not ideal, the BS has its own classes for this, so it is possible that vc tb has problems with them, the indicated is to remove this CSS and use the default grid with the native BS classes. Take Some Time To Read The Documentation And Learn How To Work Correcting With BS

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />

	<style>

		#Mod-gravar{ /*botão que chama a modal */
				background-color:#C25C40; 
				border-color:white; 
				position:absolute; 
				left:120px; 
				top:05px; 
				height:40px; 
				border-radius:8px;
				color:white;
		
			}
		
			#Mod-gravar:focus{
				background-color:#262626
			}
		
			#Mod-gravar:hover{
				background-color:#262626
			}
		
		
			input[id=cgc]{
			position:absolute;
			width:160px;
			height:auto;
			border:2px solid #aaa;
			border-radius:8px;
			margin:8px 0;
			outline:none;
			padding:8px;
			box-sizing:border-box;
			transition:.3s;
			top: 140px;
			left: 280px;
			}
		
			input[id=cgc]:focus{
			border-color:#C25C40;
			box-shadow:0 0 8px 0 #C25C40;
			}
		
			input[id=cliente]{
			position:absolute;
			width:240px;
			height:auto;
			border:2px solid #aaa;
			border-radius:8px;
			margin:8px 0;
			outline:none;
			padding:8px;
			box-sizing:border-box;
			transition:.3s;
			top: 140px;
			left: 30px;
			}
		
			input[id=cliente]:focus{
			border-color:#C25C40;
			box-shadow:0 0 8px 0 #C25C40;
			}
		
		
			input[id=razao]{
			position:absolute;
			width:240px;
			height:auto;
			border:2px solid #aaa;
			border-radius:8px;
			margin:8px 0;
			outline:none;
			padding:8px;
			box-sizing:border-box;
			transition:.3s;
			top: 90px;
			left: 30px;
			}
		
			input[id=razao]:focus{
			border-color:#C25C40;
			box-shadow:0 0 8px 0 #C25C40;
			}
		
			button[id=modalcadastrar]{
				width:120px;
				height:auto;
				top:605px;
				right: 140px;
				position:absolute;
			-webkit-user-select: none;
		  user-select: none;
		
		
			}
		
			button[id=modalfecharcad]{
				width:120px;
				height:auto;
				top:605px;
				position:absolute;
		
				-webkit-user-select: none;
		  user-select: none;
		
		
			}
		
			#modaldialog2{
				border:2px solid #C25C40;
				border-radius:8px;
				background-color:#C25C40;
				width:auto;
				min-height:650px;
				margin:auto;
					z-index:110;
		
		
		
			}	

			[class^="col"] {
				border: 1px solid #000;
			}
		</style>
		</head>
		<body>
			
		
		
		<div id="Modal-gravar" class="modal fade" role="dialog">
		  <div class="modal-dialog modal-lg" id="modaldialog2">
		
			<!-- Modal content-->
			<div class="modal-content">
			  <div class="modal-header" style="background-color:#C25C40; color:white;  border-bottom: 0 none; height:45px;">
			   <!-- <h5 class="modal-title" style="top:10px;position:absolute;">Criar novo cliente</h5> -->
				 <h5 style="top:5px;position:absolute;font: 19px ;"><i class="fas fa-address-card">  Criar novo cliente</i></h5>
			</div>
		
			<div class="modal-body">
				<div class="container-fluid">
				  <div class="row">
					<div class="col-md-4">.col-md-4</div>
					<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
				  </div>
				  <div class="row">
					<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
					<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
				  </div>
				  <div class="row">
					<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
				  </div>
				  <div class="row">
					<div class="col-sm-9">
					  Level 1: .col-sm-9
					  <div class="row">
						<div class="col-8 col-sm-6">
						  Level 2: .col-8 .col-sm-6
						</div>
						<div class="col-4 col-sm-6">
						  Level 2: .col-4 .col-sm-6
						</div>
					  </div>
					</div>
				  </div>
				</div>
			  </div>


		<div class="modal-footer" style="height:570px; background-color:#262626;border-top: 0 none;">
		
				<button type="button" name="save" id="modalcadastrar"  class="row btn btn-success" data-dismiss="modal" data-backdrop="static" data-keyboard="false">Criar</button>
		
				<button type="button" class="btn btn-danger" data-dismiss="modal" id="modalfecharcad" >Voltar</button>
		
				</div>
			</div>
		
		  </div>
		</div>
	
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
	
			<script type="text/javascript">
				$(window).on('load',function(){
					$('#Modal-gravar').modal('show');
				});
			</script>
</body>
</html>

  • The modal-body div I had not put in the same error question, I edited the 100% html containing the tabs menu with the whole contents. As for boostrap had not attacked me to him.

  • The example you made is exactly what I am trying here, the content does not get disorganized and leave from within the modal when the resolution is very low (in this case it is normal for the modal to narrow as I put in the print and as happened in its correct?).

  • @Gabrielmidão the modal has a maximum width, but it is fluid, as well as the grid within it, so you have to put the content on the grid, for it to follow the responsibility of the modal that is inside

  • 1

    Thank you Hugo, the problem seems to be that issue even. I had not attacked myself to bootstrap.

  • @Gabrielmidão this ai young! Be sure to give a studied documentation, will help you

  • Just to be sure, as I edited the html in the question, the modal-body is correct?

  • @Gabrielmidão guy is almost, only his form is totally wrong, it does not follow any documentation or Grid. Take a look at this link, in the form that was mounted with the Bootstrap classes, start from it as a model that will help you. https://getbootstrap.com/docs/4.0/components/forms/#form-Row

Show 2 more comments

Browser other questions tagged html css twitter-bootstrap bootstrap-4

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