Glypicon positioning in bs3 form

HTML & CSS
1

Positioning glyph icon doesn’t work as I would like, aligned to the of the of the input field. As window shrinks the glyph position also changes in a strange way. I use bs3, and jquery, thank you, frank

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<style>
.text-label {
	color: dodgerblue;
	font-weight: bold;
}
.warning {
	color:red;
}
.ok {
	color:green;
}
 .glyphicon{
  position: relative;
  left:97%;
  
}
.fiefielderror{
  position: relative;
  left:0;
}
</style>
</head>
<body>
  
<div class="container">
  <h2>Vertical (basic) form</h2>
  <form class="login">
    <div class="form-group">
      <label for="yourname">Your Name:</label>
      <input type="text" class="form-control inputcheck" id="yourname" placeholder="Enter name" name="name">
      <span class="glyphicon" ></span>
      <span class="fielderror" ></span> 
      
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control inputcheck" id="email" placeholder="Enter email" name="email">
       <span class="glyphicon" ></span>
      <span class="fielderror" ></span> 
      </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" name="remember">
        Remember me</label>
    </div>
    <button class="btn btn-success">Submit</button>
  </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> 
<script>

 //  Bind the event handler to the "submit" JavaScript event
$('.inputcheck').on("blur input",function(){
    console.log('changed');
    // Get the Login Name value and trim it
    var name = $('.inputcheck').val().trim();
    // Check if empty of not
 
	if (name.length > 0) {
		
		$(".fielderror").html($('youname').attr('id'));
		$(".fielderror").html("Ok");
		$(".fielderror").addClass('ok').removeClass('warning');
		$(".glyphicon").addClass('ok').addClass('glyphicon-ok').removeClass('glyphicon-remove').addClass('warning');
	} else {
		$(".fielderror").html("Empty");
		$(".fielderror").addClass('warning').removeClass('ok');
		$(".glyphicon").addClass('warning').addClass('glyphicon-remove').removeClass('glyphicon-ok').removeClass('ok');
	}
});

</script>
</body>
</html>
2

Hi,

The relative positioning is referred to the object itself so 97% moves the icon the distance 97% of its own width.

What is important to be aware of is that the relative positioning is actually only moving the visual rendering of the object, the physical object is still occupying the original place.

The label, input and span are inline elements so when the line they sit on is shorter the line will break as a text-line does.

In what strange way does the glyph position change in a narrow window?

1 Like
3

Hi Erik_J
thank you for answer. The glyph icon isn’t reach the end of the input field when window is wide, when is small, it goes a bit beyond input field, not really getting why. If you run the code, you’ll see the problem, thank you
ps: I did not get really the positioning matter. If I am right the element are in a certain position but the display of them is a different thing.
by the way , my idea is that in a small display is favourable to put remove/ok sign under input field, same way the ‘necessary’ star before label content.thank you

4

A simple fix would be to do this:

/*
 .glyphicon{
  position: relative;
  left:97%;
  
}
.fielderror{
  position: relative;
  left:0;
}
*/

.glyphicon{
	float:left;
	clear:both;
}

.fielderror{
  display:table;
  margin-left:auto;
}

Although these days I would be inclined to wrap the two spans in a div and use flexbox to spread them out rather than using floats.

Never use position:relative to structurally move things around as that’s not what its meant for (unless you know exactly why you are using it). Position;relative only moves things visually not structurally. The element always preserves its original place in the flow even if it looks like its somewhere else. That means it will overlap or obscure other elements that happen to be in the way. Position:relative is generally used for more subtle overlapping effects that don’t disturb the original flow of the document. Most beginners totally misuse position:relative and don’t understand the intricacies. :slight_smile:

1 Like
5

A post was split to a new topic: Form checking does not work as expected

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.