Responsiveness to modal

Question

Responsiveness to modal

Asked 5 years, 5 months ago

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:

This is how it looks in low resolutions:

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.

– Sam

2019/06/14 at 17:45
Another thing is that without a [mcve] there is no way to find an answer to the problem.

– Sam

2019/06/14 at 17:46
This auto at width prevented the modal from changing its width every time the screen resolution changed, except for the resolution I set.

– Gabriel Midão

2019/06/14 at 17:47
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...

– hugocsl

2019/06/14 at 17:49
@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.

– Gabriel Midão

2019/06/14 at 17:49
I put the html and css of the modal, sorry again for the kkk job

– Gabriel Midão

2019/06/14 at 17:52
Okay, but what are the items inside that you say are going out of position? You put an empty modal.

– Sam

2019/06/14 at 17:54
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.

– Gabriel Midão

2019/06/14 at 17:56
This is normal https://imgur.com/qhjMiMI

– hugocsl

2019/06/14 at 17:57
If the complete modal HTML has no help, because it is not known how you are arranging the elements within it.

– Sam

2019/06/14 at 18:00
I put prints to try to show better.

– Gabriel Midão

2019/06/14 at 18:03
@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.

– Gabriel Midão

2019/06/14 at 18:04
Missed to put the form.

– Sam

2019/06/14 at 18:05
Are you using Bootstrap? If yes which version?

– hugocsl

2019/06/14 at 18:05
How so form?

– Gabriel Midão

2019/06/14 at 18:05
@hugocsl version 4.1.3

– Gabriel Midão

2019/06/14 at 18:09
Don’t have a form inside the modal? The code you posted has nothing inside the modal.

– Sam

2019/06/14 at 18:11
By form you mean the text boxes I put inside the modal? I’m still beginner, forgive the confusion

– Gabriel Midão

2019/06/14 at 18:13
I edited the complete HTML with the tabs.

– Gabriel Midão

2019/06/14 at 18:16

Show 14 more comments

1 answer

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

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

by hugocsl • **65,517** points · Answer 1 · 2019-06-14T18:14:34+00:00

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

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>