Dealing with the overflow issue on Android 4.1 using position: relative and position: absolute

I have a question regarding creating a dynamically filling rounded button. I have successfully created an inner div inside the button with absolute positioning at the bottom. It works perfectly on Chrome webview, but I'm facing issues on Android 4.1.

Here is how it should look: right and this is how it looks on Android 4.1: wrong This is the code I am using:

<div class="col" style="padding:0px; margin: 0px; text-align:center; height:100%">
  <a  style="overflow:hidden; padding: 0px; height:125px; width:125px; border-radius: 50%; border-width:2px; background-color:rgba(255,255,255,0.0001); z-index: 2" class="button likebuttons" ng-click="voteClick(1, vote.id, thread.id) " ng-class="{'button-dislike':var==1}">
    <img style="margin:27px ; vertical-align:middle; position:relative; z-index: 1 ; width:60%; height:60%" src="img/thumbs-down.png" align="middle"></img>
    <div style="-webkit-transition: all 0.9s ease-in; height:{{(thread.get('ratio'))*100}}%; position:absolute; bottom:0; width: 100%;background-color:#db0000"></div>
  </a> </div>

The "button" class is position:relative and the other classes just add a different border color.

I have tried various solutions but haven't been successful. Any help would be appreciated!

Thank you!

androidcssangularjsionic-framework

Answer №1

For proper block formatting, you will need to adjust the context of <a> to relative position as well.

<div class="col" style="padding:0px; margin: 0px; text-align:center; height:100%">
  <a style="display:inline-block;position:relative;overflow:hidden; padding: 0px; height:125px; width:125px; border-radius: 50%; border-width:2px;border:solid; background-color:rgba(255,255,255,0.0001); z-index: 2" class="button likebuttons" ng-click="voteClick(1, vote.id, thread.id) "
  ng-class="{'button-dislike':var==1}">
    <img style="margin:27px ; vertical-align:middle; position:relative; z-index: 1 ; width:60%; height:60%" src="img/thumbs-down.png" align="middle"></img>
    <div style="transition: all 0.9s ease-in; height:62.5%; position:absolute; bottom:0; width: 100%;background-color:#db0000"></div>
  </a>
</div>

New addition:

a {
display:inline-block;
position:relative;
}

You can omit the unnecessary webkit prefixes and stick to using the latest non-prefixed rules for transitions.

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

Communication between a directive controller and a service via an HTTP call

I'm currently developing an Angular directive that loads a Highchart.js area graph by passing some variables to it. Here's how I am using the directive: <andamento-fondo-area-chart color="#3FAE2A" url="../data.json"></andamento-fondo-a ...

javascriptangularjshighcharts

What is the best way to increase the spacing between inline-block elements?

Just to clarify, I am not looking to delete space between inline-block elements - rather, I want to insert it. My goal is to create a grid of menu items that can accommodate 2, 3, or 4 items per row, and I hope to achieve this using media queries. Is the ...

htmlcss

Ordering the source files for the Grunt index task using globbing

Currently, I am utilizing VS2015 along with a grunt task in order to gather all the java-script files within my project and then insert them into my template index.html before executing the build. The issue that arises is the dependency order of these file ...

angularjsgruntjsnpmvisual-studio-2015

Maintain the fixed placement of an absolute element by adjusting the browser window size

Seeking assistance here - I currently have a box that occupies the entire window. This box is designed to be responsive with a noticeable red border. Within this box, my goal is to insert tables with specific X and Y coordinates. However, my issue arises ...

htmlcss

Revise directive following the dynamic addition of elements

My Objective: I aim to utilize directives for creating custom elements and dynamically inserting them into the view at various points in time. The Challenge: Upon dynamically adding custom elements to the view, they appear as raw HTML without the directi ...

javascriptjqueryhtmlangularjsangularjs-directive

The identical reply is dispatched regardless of the user currently logged in

I'm currently exploring the method of sending a response via express in Nodejs to a specific android device. In this scenario, multiple users are attempting to log in to my Android application and simultaneously sending requests to an express API. The ...

androidnode.jsmongodbexpress

How can I transfer an Android array to a mysql database?

I have a system where users can select their interests from a separate table. For example, consider my users table: | uID | uName | | 1 | Brad | | 2 | Jake | Now, let's look at the interest table: | iID | iInterest | | 1 | Cars | | 2 ...

phpandroidmysqlarrays

Display or conceal various content within div elements using multiple buttons

I have a set of 5 image buttons, each meant to trigger different content within a div. When the page loads, there should be default content displayed in the div that gets replaced by the content of the button clicked. The previously displayed content shoul ...

javascriptjqueryhtmlcssshow

Layering an object on top of a clone using CSS

I am working on a webpage with a jQuery menu located at the following link: Menu To accommodate more items and have greater control, I duplicated the menu twice. However, when hovering over them, the duplication is visible in the background. Is there a ...

jqueryhtmlcss

What is the correct method for accessing an array within an object that is nested inside an array within a JSON file in Angular?

In my Angular controller code, everything is functioning properly except for the $scope.Product. I am unable to access the array of product details. Here is the relevant code snippet: .controller('aboutCtrl', function ($scope, aboutService) { ...

javascriptarraysangularjsjsonangularjs-ng-repeat

Modify the scrollbar's width, color, and corner radius to customize its appearance

Here is the table code where the styles are applied. By setting the tablecontainer height to 600px, we can make the table scrollable. However, I would like to customize the scrollbar with a different color, width, and corner radius. <TableContainer s ...

cssreactjshtml-tablematerial-ui

Modifying td background color according to values in a PHP array

Trying to update the background color of a td element with the code below. However, it seems that the code needs some adjustment as the color is not being applied. Any assistance or alternative solutions would be greatly appreciated. Snippet of PHP code: ...

javascriptphpjqueryhtmlcss

Troubleshooting the issue: AngularJS not functioning properly with radio button selection to show specific div containing input field

Looking for some help with radio buttons: I need the selection of radio buttons to display their respective input boxes. I have included a snippet of my HTML and controller code below. In my controller, I am using ng-change to call a function that uses jQu ...

javascriptjqueryangularjshtml

How do I utilize Protractor to target a specific div element with a distinctive class and verify its visibility on the page?

Below is the view.html for a unique class: <div class="appExperience small-tile"> </div> This is the code snippet that I attempted to use: var displayedTile = element(by.css('.appExperience small-tile')); expect(displayedTile.i ...

javascriptjqueryangularjsselenium-webdriverprotractor

Select option at the top of the Bootstrap dropdown

I recently implemented Bootstrap on my website. I encountered an issue with a form in the footer section where the select options are extending out of the page boundaries. <footer> <form role="form" method="GET"> <div s ...

csstwitter-bootstrap

What is the method for fetching a WebElement with a specific CSS attribute using JavascriptExecutor?

Currently, I am faced with a situation in which I need to locate a WebElement based on its CSS property, specifically the background-color. I successfully crafted the JQuery script below to pinpoint the element using the firefox console: $('.search-b ...

javajquerycssselenium-webdrivernullpointerexception

Utilize Flexbox's column direction to ensure that all flex items within the same column have uniform height

Having trouble creating a responsive web page. Here are the specifics: Sharing my HTML and CSS code below: - <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA ...

htmlcssflexboxresponsive-designmedia-queries

Embed a video within an image while ensuring it remains responsive on all devices

I have a picture that resembles something like this one My goal is to embed a video into it while maintaining its aspect ratio when the screen size is reduced. The responsive design should only affect the width since the image will be displayed in portrai ...

htmlcssimagevideoresponsive-design

`Jump-start Your Development with jQuery Lightbox Centering`

Recently, I implemented a lightbox effect for images on my website. However, I encountered an issue where the lightbox was not centering properly in the window upon initial click. Instead, the lightbox would appear at the bottom of the page on the first cl ...

javascriptjqueryhtmlcssjquery-ui

bespoke adapter for fragment-based lists

I am currently working on creating a custom list adapter, but I am encountering an issue where it says I cannot use ListFragment.setListAdapter(cafeItemArrayAdapter); The error message states: non-static method cannot be referred from a static context. ...

javaandroid