The inline <a> tag is malfunctioning

Can you advise me on how to align the "test" events (one red and one green) in the calendar side by side rather than on separate rows? Ideally, I would like them to be displayed inline with each event taking up 25% of the width. The specific elements are as follows:

<a href="/component/dpcalendar/event/1" class="fc-event fc-event-hori fc-event-start fc-event-end dpcal-module_event_dpcal_198" style="float: left;position: absolute; left: 93px; border-color: rgb(18, 163, 18); width: 23px; top: 146px; background-color: rgb(18, 163, 18);" data-original-title="" title="">

This issue is occurring on our Joomla-based website where I have installed the dpcalendar component - .

I have tried using float: left, display: inline, adjusting the width, but so far, nothing has worked. Could you help identify the problem? Thank you very much.

http://jsfiddle.net/2th7x9ng/

htmlcss

Answer №1

The issue at hand is that the elements are utilizing the CSS property position: absolute, causing float to have no impact in this scenario.

To ensure alignment, you can adjust the left and top properties of the second element as illustrated below:

position: absolute;
left: 103px;
border-color: rgb(204, 0, 0);
width: 23px;
top: 146px;
background-color: rgb(204, 0, 0);

Answer №2

While utilizing position: absolute, it is necessary to manually control the positioning and styling. Unlike float, position: absolute requires adjusting the left and top properties to place the green and red bullets/hyperlinks wherever desired on the calendar.

To ensure both links display inline in your website's calendar, apply the following style to your anchor tags:

For green link:

position: absolute;
left: 93px;
border-color: rgb(18, 163, 18);
width: 23px;
top: 146px;
background-color: rgb(18, 163, 18);

For red link:

position: absolute;
left: 102px;
border-color: rgb(204, 0, 0);
width: 23px;
top: 146px;
background-color: rgb(204, 0, 0);

EDIT 2:

<a href="/component/dpcalendar/event/1" class="fc-event fc-event-hori fc-event-start fc-event-end dpcal-module_event_dpcal_198" style="float: left;position: absolute; left: 93px; border-color: rgb(18, 163, 18); width: 23px; top: 146px; background-color: rgb(18, 163, 18);" data-original-title="" title=""><div class="fc-event-inner"><span class="fc-event-title">&nbsp;</span></div></a>
<a href="/component/dpcalendar/event/2" class="fc-event fc-event-hori fc-event-start fc-event-end dpcal-module_event_dpcal_198" style="position: absolute; left: 102px; border-color: rgb(204, 0, 0); width: 23px; top: 146px; background-color: rgb(204, 0, 0);" data-original-title="" title=""><div class="fc-event-inner"><span class="fc-event-title">&nbsp;</span></div></a>

See the working example in this Fiddle here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

instructions on extracting the $children$html contents from an XMLDocumentContent object

Sorry in advance, I'm having trouble figuring out what's going wrong here... Among other things, this snippet of code is causing issues: study.name <- 'NLSY79' library(XML) library(httr) sub.study <- paste0( "https://www.nlsinfo ...

htmlxmlr

What is the best way to eliminate the log of the Internet Explorer web driver?

Currently utilizing watir-webdriver in conjunction with Ruby on Windows 7 to test various pages. Upon initiating Internet Explorer using watir-webdriver, the following logs are generated: Started InternetExplorerDriver server (32-bit) 2.32.3.0 Listening o ...

rubyinternet-explorerhtmlwatir-webdriver

Is it possible to refresh a table that is currently displayed in a model popup?

My code to reload a table or div inside a model popup continuously is not working as expected. Can you help me with this issue? I attempted to utilize ajax for this purpose but unfortunately, the code below is not updating chats (I am working on a chat ta ...

ajaxhtml

What is the best method to send the HTML button ID to a Python file through Django?

I have the following HTML code snippet that generates dynamic buttons: {% for i in loop_times %} <button type="submit" class="'btn btn-lg" name="{{ i }}" id="{{ i }}" onclick="alert(this.id)" formmethod="post"><a href="{% url 'button ...

javascriptpythonhtmldjango

Use the "webkit-keyframes" exclusively within the specified id

Is there a way to exclusively apply the "webkit-keyframes" within the #progress1 id? I have another progress bar (#progress2) on the same page with a different webkit-keyframes, which is why I need this distinction. #progress1 { background: white; / ...

htmlcss

picking out a particular set of data from a JSON document

I have a map of Europe along with a JSON file that displays the unemployment rate for each country in the year 2011. The JSON file also includes x and y elements, allowing me to place a blue circle on top of each country on the map. My goal is to be able ...

javascriptjqueryhtmlcssjson

What is the best way to display an image upon clicking a button?

I have a <button> element with the rel="example.jpg" attribute. The goal is to have the image load in the #area DIV only after the button is clicked, not during the page load. I have implemented the following code to achieve this: $(document).ready( ...

javascriptjqueryhtml

Beginner: Interested in creating a web application with HTML, CSS, AngularJS, NodeJS, and MySQL?

After extensive searching on the internet, I have yet to come across a definitive answer. I am in the early stages of developing a web application and want to ensure that I am using the correct languages before diving too deep into it. Currently, my plan ...

htmlmysqlcssangularjsnode.js

Enhancing Fullpage.js with a custom scroll delay feature

One issue I'm having is with a fading div "box" using ".fp-viewing" as a trigger for the transition effect. The problem arises when the page begins scrolling upon .fp-viewing being activated, causing the box to scroll out of view before its animation ...

javascriptjquerycssfullpage.js

determining the 'top' and 'right' coordinates upon clicking

I encountered an issue with a table having a drop-down menu that was getting cut off when opened on the last line. After some experimentation, I came up with a solution to detach the drop-down menu from its parent element and then reposition it by setting ...

javascriptjqueryhtmlcss

Execute grunt serve:dist with local file paths enabled

I am currently utilizing grunt to construct and deploy a basic angular web application that incorporates bootstrap and font-awesome. The project was initially set up using the yeoman generator-angular and constructed utilizing grunt serve:dist. I have obs ...

htmlcssinternet-explorergruntjsyeoman

I am attempting to adjust the color of the active tab, but I seem to be encountering issues in my code. Can anyone help me

The currently active tab should change along with the text inside the box, but it's not working as expected. I'm struggling to find out why. Here is a fiddle to demonstrate my progress so far: var btn1 = document.getElementById("btn1"); va ...

javascripthtml

Persistent pseudo-element problem across all iterations of Internet Explorer

Encountering an issue in IE 9, 10, 11, and Edge involving pseudo elements with transparent backgrounds. The problem arises when the repeating background image appears darker in the first half compared to the second half, giving the impression of overlap be ...

htmlcssinternet-explorerpseudo-elementmicrosoft-edge

Is it possible to dynamically adjust the size of the CircleProgressComponent element in ng-circle-progress?

For my current Angular 11 project, I am facing the challenge of dynamically changing the size of the ng-circle-progress library's CircleProgressComponent element. After some research, I discovered that the element's size can be adjusted by apply ...

cssangulartypescript

Identify all unticked checkboxes using jQuery

Looking for help with checkboxes: <input type="checkbox" name="answer" id="id_1' value="1" /> <input type="checkbox" name="answer" id="id_2' value="2" /> ... <in ...

jqueryhtmlinputcheckbox

Setting a minimum width for a single column in Bootstrap 4

After implementing a basic grid-based layout using Bootstrap 4, I encountered a challenge with the responsiveness of my columns. My layout consists of two columns: Left and Right. The left column is defined as div.col-12.col-md-5, while the right column i ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Issue arising from the rendering of items in a Navigation Bar

I'm encountering an issue where only the last item of the navbar is being rendered even though the data appears to be correct. I've tried hard coding the data into the components but the same error persists.https://i.sstatic.net/ccEuB.png , https ...

javascripthtmlcssreactjstypescript

Utilizing ng-model and ng-repeat in AngularJS to populate models with a list of objects

I need to call a POST function, and I have to compress the data in a web form into an object beforehand. I utilized ng-repeat to showcase all inputted data and initialized this value for input, but I am unsure how to utilize ng-model to store the data. I c ...

htmlarraysangularjsjsonfrontend

Steps for locating the initial instance of content within a DIV

The HTML code below shows information about different types of surgeries: <div class="provInfoSub hidOverflow floatLeft vertAlignT"> <specialty><a title="Plastic Surgery" href="check.aspx">Plastic Surgery</a></specialty> ...

jqueryhtml

Applying CSS styles to my container through a button click event

Currently, I am attempting to apply a padding-top to my container when a button is clicked. Unfortunately, the padding-top is not being added as expected. $('#login').on('click', function(){ $('#loginform1').css('padd ...

jquerycss