I have the following code that dynamically puts a draggable image on top of another image with a popup
. But, when having a content in the <p>
big one, for example: sensor 1 2 3 4, 1234, it goes to another line and I want it to continue on the same line, if I remove the absolute position, everything that I have already worked on unbalances me and of course that I can't move it.
Code:
.info {
opacity: 1;
position: absolute;
left: calc(100% + 1em);
top: 43%;
font-size: .8em;
padding: 0.1em 5em;
border-radius: 2.2em;
font-family: arial;
background: #DEDEDE;
color: #362e2e;
transition: all ease .3s;
transform: translateX(-62%) translateY(-140%);
}
.img-sensor {
position: absolute;
height: 600px;
width: 800px;
max-height: 600px;
max-width: 900px;
}
.sensor {
position: absolute;
z-index: 1;
}
#plano {
position: relative;
height: 600px;
width: 800px/9;
max-width: 800px;
border: 1px ridge;
border-color: gainsboro;
overflow: hidden;
margin: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<p>Algo de texto aquí para ver el problema</p>
<div id="contenido-plano">
<div id="plano">
<img class="img-sensor" src="http://placehold.it/800x600/eee">
<div style="top:92px; left:100px;" class="sensor ui-corner-all ui-state-highlight ui-draggable ui-draggable-handle" data-id="1">
<div class="info">
<p>Sensor1 2 3 4</p>
<a title="Editar Sensor" id="editar-sensor" onclick="EditarSensor(1)"><i class="glyphicon glyphicon-edit"></i></a>
<a title="Eliminar Sensor" id="elimnar-sensor" onclick="EliminarSensor(1)"><i class="glyphicon glyphicon-erase"></i></a>
</div>
<img src="http://placehold.it/20/0a0" width="20">
</div>
<div style="top:359px; left:252px;" class="sensor ui-corner-all ui-state-highlight ui-draggable ui-draggable-handle" data-id="3">
<div class="info">
<p>Sensor2</p>
<a title="Editar Sensor" id="editar-sensor" onclick="EditarSensor(3)"><i class="glyphicon glyphicon-edit"></i></a>
<a title="Eliminar Sensor" id="elimnar-sensor" onclick="EliminarSensor(3)"><i class="glyphicon glyphicon-erase"></i></a>
</div>
<img src="http://placehold.it/20/0a0" width="20">
</div>
<div style="top:252px; left:571px;" class="sensor ui-corner-all ui-state-highlight ui-draggable ui-draggable-handle" data-id="4">
<div class="info">
<p>Sensor3</p>
<a title="Editar Sensor" id="editar-sensor" onclick="EditarSensor(4)"><i class="glyphicon glyphicon-edit"></i></a>
<a title="Eliminar Sensor" id="elimnar-sensor" onclick="EliminarSensor(4)"><i class="glyphicon glyphicon-erase"></i></a>
</div>
<img src="http://placehold.it/20/0a0" width="20">
</div>
</div>
</div>
If you want to "force" the text to stay on one line, you can use:
This property determines how white space should "behave" in an element, in this case, the nowrap value removes line breaks.
Two tips, try to put a minimum measure in
em
thep
, like this:and to avoid separation by whitespace, it is:
Try and tell us. Example:
Here the same but with
white-space: nowrap
The reason I tell you to combine it with a minimum size is because I see that you use a lot of absolute positioning with pixels, this avoids certain future problems; Edit like the centering thing you mention in the other answer.