I've encountered a hurdle that's hindering my progress. I'm attempting to shift a small box containing various options (like report, like, dislike, etc.) out from the main DIV while keeping it securely attached from the outside. Let me illustrate this with an image:
I've experimented with several methods to achieve this, but the issue lies in the fact that the box is currently centered within the body, resulting in padding on the left and right sides (responsive padding set through Bootstrap classes), making it challenging for me to calculate the entire scenario.
My attempt using jQuery looks like this:
$('.image-options').css('right', $('.image-options').parent().width() + 50 + 'px');
$(window).resize(function(){
$('.image-options').css('right', $('.image-options').parent().width() + 50 + 'px');
})
Here, .image-options represents the option box, and its parent is the Main DIV. I assumed a constant width of 50px for the option box to simplify the positioning problem.
As my website is based on Bootstrap 3, I heavily rely on their classes. The structure of my HTML code appears as follows (ignore the templating syntax):
{% extends "base.twig" %}
{% block content %}
<div class="content row">
<div class="col-lg-12">
{% include "overall_header.twig" %}
<div class="row">
<section class="col-lg-12">
<div class="upload-space">
<!-- This is the options box -->
<div class="affix image-options">
Report
</div>
<div class="row inner">
<section class="col-lg-12">
<section class="row">
<div class="col-lg-12 center">
<a href="{{ S_IMAGE_URL }}" class="lightview">
<img src="{{ S_IMAGE_URL }}" class="img-thumbnail" alt="{{ S_IMAGE_NAME }}" />
</a>
</div>
<br />
<div class="col-lg-12">
<div class="form-group">
<label for="direct_url">Direct:</label>
<input type="text" class="form-control" onclick="this.select()" value="{{ S_IMAGE_URL }}" readonly>
</div>
<div class="form-group">
<label for="direct_url">Thumbnail:</label>
<input type="text" class="form-control" onclick="this.select()" value="{{ S_IMAGE_THUMB }}" readonly>
</div>
<div class="form-group">
<label for="direct_url">Direct:</label>
<input type="text" class="form-control" onclick="this.select()" value="{{ S_IMAGE_BBCODE }}" readonly>
</div>
<div class="form-group">
<label for="direct_url">Direct:</label>
<input type="text" class="form-control" onclick="this.select()" value="{{ S_IMAGE_HTML }}" readonly>
</div>
</div><!-- col -->
</section> <!-- row -->
</section> <!-- col -->
</div><!-- .row.inner -->
</div>
</section>
</div><!-- row -->
</div><!-- Main column -->
</div><!-- Content -->
{% endblock content %}
And here's the CSS styling I applied to the options box:
.image-options {
background: yellow;
width: 50px;
word-break: break-word;
}
The .upload-space refers to the Main DIV in our context.
How can I ensure that the options box remains attached to the Main DIV at all times, despite the page being responsive and the Main DIV's dimensions varying based on the browser size?
Thank you.