Problem aligning with responsiveness

Asked

Viewed 31 times

0

I would like to align the x button in the upper right corner of the image vide image and example:

.teste {
  overflow: hidden;
  display: inline-block;
  margin-bottom: 5px;
  vertical-align: middle;
  text-align: center;
  display: block;
  padding: 4px;
  line-height: 1.428571429;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 3px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.btn-teste {
  position: relative;
  overflow: hidden;
}

.btn-teste input[type=button] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}

.options {
  position: absolute;
  top: 8px;
  right: 82px;
  z-index: 999;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<br/><br/>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-2 center-block text-center">
  <div class="options">
    <button type="button" class="btn btn-default" title="Remover"> 
			<i class="fa fa-times"></i>
		</button>
  </div>
  <span class="btn btn-default btn-teste">
		<img class="teste" width="100px" height="150px" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" />
		<div> 
			Teste <input type="button" class="file">
		</div>
	</span>
</div>

How I’d like it to stay:

inserir a descrição da imagem aqui

The problem here is responsiveness, when I increase or decrease the width of the screen:

inserir a descrição da imagem aqui

css twitter-bootstrap

  • Have you tried using CSS media queries for different screen sizes across different margins?

  • The class for the button with the x is correct? It seems that the css that posted is related to Teste ... You shouldn’t post class code btn btn-default?

  • btn, btn-default are standard bootstrap classes, not relative to my code @Magichat

  • @Andrégava I’m awful with css, I took this example and adapted: https://bootsnipp.com/snippets/RldKA, it seems that in the case of this example was not used this type of resource (media queries), if you can escape from writing several types of classes for each type of screen, I’d rather have

1 answer

1


Place the button inside the image box, thus the position:absolut will be in relation to this box and not the external box that changes size, and so you always have the same position.

see below:

.teste {
  overflow: hidden;
  display: inline-block;
  margin-bottom: 5px;
  vertical-align: middle;
  text-align: center;
  display: block;
  padding: 4px;
  line-height: 1.428571429;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 3px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.btn-teste {
  position: relative;
  overflow: hidden;
}

.btn-teste input[type=button] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}

.options {
  position: absolute;
  top: 0px;
  right: 12px;
  z-index: 999;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<br/><br/>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-2 center-block text-center">
  <span class="btn btn-default btn-teste">
    <div class="options">
      <button type="button" class="btn btn-default" title="Remover"> 
        <i class="fa fa-times"></i>
      </button>
    </div>
		<img class="teste" width="100px" height="150px" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" />
		<div> 
			Teste <input type="button" class="file">
		</div>
	</span>
</div>

Browser other questions tagged css twitter-bootstrap

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