How can I Make a
responsive to another
?

Question

I have two divs here, the section on the left with "Sumar" and "Alumno", and the section on the right with the form.

enter image description here

When there is a validation issue with the form content, messages appear making the right div resize to fit the content. The left div does not resize to match:

enter image description here

How do I make the left div resize to match the right div at all times?

[Update]

View:

@model Biblioteca.Models.SapDepoViewModel
 @{
    ViewBag.Title = "SapDepo";
 }
 <body class="background-greenbkg">
<div class="container bold-titty" id="wite-color">               
    <div class="col-md-12">
        <h2 class="cajita-titulo textofont"><i class="fa fa-bolt" style="color:yellow"></i>  Sap | Depósito <i class="fa fa-money" style="color:green"></i> </h2>
    </div>

    <div class="hidden-xs hidden-sm col-md-1 col-md-push-4 margin-top-bot2 colorcajitaizqsap">
        <div class="row height-sidetitle-sap padding-edit">
            <i class="fa fa-dollar"></i>
            <p id="fontiponki">Sumar</p>
            <p id="minifont">Alumno</p>
        </div>
    </div>
        @using (Html.BeginForm("SapDepo", "Alumnos", FormMethod.Post))
        {
            @Html.AntiForgeryToken()

            @Html.ValidationSummary(true, "", new {@class = "text-danger"})
            @Html.HiddenFor(x => x.AlumnosId)

            <div class=" hidden-xs hidden-sm col-md-push-4 col-md-4 cajita">
                <section id="SapDepoAlumnos" >
                    <div class="form-group">
                        <div class="row">                                
                            <div class= "col-md-push-1 col-md-5">
                                @Html.LabelFor(x => x.Sap, htmlAttributes: new {@class = "control-label col-md-2"})
                            </div>
                            <div class="col-md-6">
                                @Html.EditorFor(x => x.Sap, new {htmlAttributes = new {@class = "form-control"}})
                                @Html.ValidationMessageFor(x => x.Sap, "", new {@class = "text-danger"})
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-push-1 col-md-5">
                                @Html.LabelFor(x => x.Deposito,"Depósito", htmlAttributes: new {@class = "control-label col-md-2"})
                            </div>
                            <div class="col-md-6">
                                @Html.EditorFor(x => x.Deposito, new {htmlAttributes = new {@class = "form-control"}})
                                @Html.ValidationMessageFor(x => x.Deposito, "", new {@class = "text-danger"})
                            </div>
                        </div>
                    </div>
                </section>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-offset-2 col-md-8">
                            <input type="submit" value="Agregar" class="btn btn-success" style="border-radius: 4px; width: 100%" />
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                        <div class="col-md-offset-2 col-md-8">
                            <a href="/Alumnos/Index"> <input type="submit" value="Cancelar transacción" class="btn btn-danger" style="border-radius: 4px; width: 100%" /></a>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>

CSS of divs:

 //Right side
 .margin-top-bot2 {
     margin-top: 61px;
     margin-bottom: 10px;
 }

 .colorcajitaizqsap {
     /*background-color: rgba(250, 255, 0,0.2);*/
     background: repeating-linear-gradient(
   45deg,
  rgba(107, 153, 85, 0.65),
  rgba(107, 153, 85, 0.65) 10px,
  rgba(0, 54, 41, 0.65) 10px,
  rgba(0, 54, 41, 0.65) 20px
  );
     border-radius: 10px 0 0 10px;
       }

.height-sidetitle-sap {
     height: 225px;

}

 .padding-edit {
    padding-left: 20px;
   font-size: 60px;
}

//Left side
.cajita {

padding-top: 30px;
color: #ffffff;
text-align: center;
background-color: rgba(0, 0, 0,0.3);
box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 0 10px 10px 0;
margin-top: 60px;
}

It no works because I'm using razor, jsfiddle don't accept it :(, but I post my code, I think it works too — Gerardo Quintana, May 13 '15 at 02:21
you need to paste the html output, not your razor markup, just right click and view source on your browser — Brino, May 13 '15 at 02:22
sorry man, I try but I don't know how can I attach js files, these needs to be on server :/ — Gerardo Quintana, May 13 '15 at 02:45
I tried to parse through your razor but it does not resemble your pictures. I can't help you without your rendered output. — Brino, May 13 '15 at 02:52
Cleared up what the problem was and what was being asked. Also fixed some of the code formatting. — Nate Diamond, May 15 '15 at 19:44

score 0 · Answer 1 · answered May 13 '15 at 03:11

Razor won't impede your layout, nor make it impossible to modify your layout. An example would be like the following.

<!-- Front-End: -->
<div class="Container">
     <div class="Column-Small">
          <!-- Insert Additional Styling & Razor -->
     </div>

     <div class="Column-Large">
          <!-- Insert Additional Styling & Razor -->
     </div>
</div>

So your Razor syntax would be inside, with additional structure. Which would cater to your model, which would be displayed. Then your Style Sheet would have a Responsive Layout like:

.Container {
     width: 90%;
     margin: 0 auto;
     clear: both;
}

.Column-Small {
     width: 10%;
}

.Column-Large {
     width: 80%;
}

[class*="Column-"] {
     height: 10rem;
     border: 1px solid #000;
     float: left;
}

Keep in mind this example is simple, meant to be an example. The goal is to ensure maximum height within the container element, without additional markup we won't be able to help.

Hopefully this helps you, remember that Razor shouldn't alter your layout but fit your data within the layout.

score 0 · Answer 2 · answered May 15 '15 at 19:47

0

You're predefining the height of the left column instead of letting it be auto-sized. Note that the div inherits from .height-sidetitle-sap, which is defined as:

.height-sidetitle-sap {
    height: 225px;
}

Remove this and then fix the height and position of the inner content via padding or margins and it should resize appropriately.

answered May 15 '15 at 19:47

Nate Diamond

5,525
2
31
57

mmm what is the code to inherit it? somthing like height:inherit; ?? – Gerardo Quintana May 19 '15 at 04:10
Check [this](http://stackoverflow.com/questions/9537838/div-height-100-and-expands-to-fit-content) out. Really, what you're looking to do is have the div stretch all the way to the bottom, minus some margin or padding. You want it to fill any space it's given, then the parent just tells it how much space it has and it will fill out correctly. – Nate Diamond May 19 '15 at 16:50

How can I Make a responsive to another ?

2 Answers2

How can I Make a
responsive to another
?