How to Get a Button's Height to Match Another Element's Height

How to get a button's height to match another element's height?

You will need to make the EditText wrap_content on its height and have the Button just fill_parent. You will need to have them both wrapped in a Layout parent. That way they are associated with the same Layout parent.

Try that and see how that works, if it helps let me know. If it doesn't maybe i can give you some code that will help you out.

Creating an equal height buttons

You can add another layer to the button, and assign a height to it, then center everything inside of it using align-items: center;

.cont {
  margin: 20px 10px;
}

.btn-primary {
  font-size: 18px;
  text-decoration: none;
  font-weight: 500;
  border-radius: 0;
  border: none;
  padding: 15px 50px;
  color: #fff;
  min-width: 200px;
  background: #626f00;
  
  /* using flex box */
  display: inline-flex;
  align-items: center;
  
  /* assigning height */
  height: 40px;
}

.btn-primary span::after {
  content: '>';
  margin-left: 15px;
}

<div class="cont">
  <a href="https://www.w3schools.com/" target="_blank" class="btn-primary"><span>visit the site</span></a>
</div>

<div class="cont">
  <a href="https://www.w3schools.com/" target="_blank" class="btn-primary"><span>visit the full site now go<br>visit the full site</span></a>
</div>

Why does a button element's height not match that of a sibling input element with same height properties?

It has to do with the way the browser implements the box model for those elements.

div and input both use the content-box where-as button uses border-box

See here for more info: http://www.quirksmode.org/css/box.html

You can add box-sizing: content-box;, -moz-box-sizing: content-box;, -ms-box-sizing: content-box;

to the CSS to force it to use the content-box method of calculating dimensions.

Edit--More Info: Why does Firefox use the IE box model for input elements?

How to set height of element to match height of another element? in android

There are several ways to achieve the desired behavior.

The first one, that requires zero Java/Kotlin code is to use ConstraintLayout as the parent Layout. Just put top/bottom constraints of view2 to match the top/bottom of view1. Keep in mind, this would work only in one case: If your views are horizontally aligned. And to change the visibility of two views simultaneously in that case you would probably have to use Groups

Use this code snipped for a reference:

<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/view_1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="[your_constraint]"
        app:layout_constraintEnd_toEndOf="[your_constraint]"
        app:layout_constraintTop_toTopOf="[your_constraint]"
        app:layout_constraintBottom_toBottomOf="[your_constraint]"/>

    <View
        android:id="@+id/view_2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="[your_constraint]"
        app:layout_constraintEnd_toEndOf="[your_constraint]"
        app:layout_constraintTop_toTopOf="@id/view_1"
        app:layout_constraintBottom_toBottomOf="@id/view_1"/>

</androidx.constraintlayout.widget.ConstraintLayout>

The second one is to use View.OnLayoutChangeListener from the code. Set it to the first view and programmatically change the height of the second view based on the height of the first one.

Like that in Kotlin:

view1.addOnLayoutChangeListener { _, _, top, _, bottom, _, _, _, _ ->
    view2.layoutParams.height = bottom - top
    view2.requestLayout()
}

How to make button same height?

1. You can achive with add display: inline-flex; to the container of the buttons (in this case is register-btn.

.register-btn {    margin-top: 125px;    background-color: #23342c;    float: right;    display: inline-flex;}
.register {    padding: 1rem;    background-color: #2d4137;    color: #fff;}
.arrow-right {    padding: 1rem;    background-color: #23342c;    color: #fff;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/><div class="register-btn"><span class="register"><a href="http://#" target="_blank">Register Now</a></span><a href="http://#" target="_blank"><i class="fa fa-long-arrow-right arrow-right"></i></a></div>

How can I set the height of an element to the computed height of another one?

I think this does more or less what you want.

I've changed the html, by including an extra div. I've commented the changes to the css.

The basic principle is this: make the height of the section depend only on the height of the form, by removing the ul from the flow, using position:absolute. Then set max-height for the ul to 100%, which will be 100% of the section... which in turn is derived from the height of the contained form.

section {
  display: flex;
  gap: 16px;
  position:relative; /* position relative means contained items are relative to this */
}

form {
  background-color: cadetblue;
  
}

ul {
  position:absolute; /* position absolute means the size of this block doesn't affect the height of the container */

  max-height:100%; /* 100% of the containing section, which has position:relative */
  margin: 0px;
  background-color: chocolate;
  overflow: auto;
}

<section>
      <form>
        <h1>Form</h1>
        <button>Submit</button>
      </form>
      <div>
      <ul>
        <li>Adobe</li>
        <li>Amazon</li>
        <li>Apple</li>
        <li>Facebook</li>
        <li>Google</li>
        <li>Microsoft</li>
        <li>Netflix</li>
      </ul>
      </div>
    </section>

Set height of div = to height of another div through .css

I am assuming that you have used height attribute at both so i am comparing it with a height
left do it with JavaScript.

var right=document.getElementById('rightdiv').style.height;
var left=document.getElementById('leftdiv').style.height;
if(left>right)
{
    document.getElementById('rightdiv').style.height=left;
}
else
{
    document.getElementById('leftdiv').style.height=right;
}

Another idea can be found here
HTML/CSS: Making two floating divs the same height.

How to equal height of select and button element with padding

select, button {
    border:1px solid gray;
    margin:0;

    padding:0 .6em; //updated
    height:2.3em; //new
    box-sizing:border-box; //new
}

---

Related Topics