CODEWITHSUNDEEP
htmlcssmedia-queries
Aurora
Aurora

Reputation: 23

Buttons not aligning with div

So I am trying to make this admin page responsive and there are some problems when I resize the page. I want the div with the Inventory to be aligned with the 3 buttons.

enter image description here

This is my container which needs to properly adapt when resizing the viewport. 

    .reports{
    	border: 1px solid red;
    	overflow-y: scroll;
    	/*overflow-x: hidden; */
    	height: 100%;
    }
    
    .row{
    	height: 4.5em;
    	width: 100%;
    	margin-left: 0;
    }
    
    .actions{
    	float: right;
    	width: 30%;
    }
    .entry-group{
    	border: 1px solid red;
    	float: left;
    	width: 70%;
    }
    
    .title{
    	border: 1px solid red;
    	float: right;
    	width: 72.5%;
    	height: 3.7em;
    	word-wrap: break-word;
    	margin-left: 2em;
    }
 <div class="reports">
    	<div class="list-group-item row">
    		<div class="entry-group">
    			<button class="btn btn-primary date" >2016-09-19</button>
    										
    	   		<div class="title">
    			 	<h4 class="list-group-item-heading">2080136 - Inventory</h4>
    				<p class="list-group-item-text">2 Napier Court West Southend On Sea SS1 1JU</p>
    			</div>
    		</div>
    								
    		<div class="actions">
    			<button class="btn btn-primary download">Download</button>
    			<button class="btn btn-primary edit">Edit</button>
    		</div>
    	</div>
 </div>

Upvotes: 0

Views: 108

Answers (3)

Larkeith
Larkeith

Reputation: 434

Add:

.title h4 {
    margin-top: 0px;
}
.date {
    float: left;
}

and remove margin-left: 2em; from .title.

Here is an updated version of your fiddle: https://jsfiddle.net/r11p5n4d/

Upvotes: 0

Johannes
Johannes

Reputation: 67748

Add this:

.list-group-item-heading {
  margin-top: 0;
}

https://jsfiddle.net/kefhvc7y/

Upvotes: 0

Reflamer
Reflamer

Reputation: 309

I think there is a few issues with the code here. Firstly, I believe it odd to have DIVs between your 'tr' and td', and not having a 'table' element.

I think you are trying to mix different ways of doing things: bootstrap and HTML tables.

My suggestion is use something like layoutit.com to build a layout with divs only in bootstrap. You can easily still integrate it into your back end technology, and get the divs responsive by editing the class names, e.g. col-sm-1.

I understand that you want to use tables for reports, having said that, it should be carried through completely, without divs inbetween.

Upvotes: 1

Related Questions