Seeking assistance with positioning elements in Safari 602.1 on iOS 10 using Bootstrap 4.1. The text isn't positioned correctly, even after auto-prefixing Bootstrap.
The issue only occurs in Safari; everywhere else, it works fine and I'm at a loss for solutions.
Any help is appreciated
Unfortunately, I do not have access to an ios device for testing purposes. However, a potential solution could be adjusting the relative positioning and making the .verticalHorizontal element absolute within the code snippet provided:
.box {
color: #ffffff;
padding: 0.5rem;
width: 50%;
}
.box img {
max-width: 100%;
max-height: 100%;
}
.box a {
color: #ffffff;
}
.box a:hover {
text-decoration: none;
}
.box input {
width: 100%;
}
.bgDarkBlue {
background-color: #3F51B5;
}
.shadowBox {
box-shadow: 7px 5px 25px black;
}
.verticalHorizontal {
top: 50%;
left: 50%;
position: absolute;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="box shadowBox bgDarkBlue">
<a href="#">
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img src="http://tusla.info/images/safari-column/evaluation.svg">
</div>
<div class="col-8 pl-sm-0 position-relative">
<h1 class="verticalHorizontal">Text</h1>
</div>
</div>
</div>
</a>
</div>
<div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>When implementing datatables with my current table, I encountered an issue where the layout appears differently in Chrome and IE compared to Firefox. In Chrome and IE, it loads correctly with a larger image: https://i.sstatic.net/g34TG.png However, when ...
Currently, I am attempting to customize the appearance of the KeyboardDatePicker component including board color, size, font, and padding. However, none of the methods I have tried seem to be effective. Here is what I have attempted so far: 1 . Utilizing ...
Can anyone assist me in positioning my arrow next to the header text, which I toggle on click? I attempted placing the arrow <div> into the H1 tag, but then the toggle function stops working. Any help would be greatly appreciated! Please includ ...
Currently, I am in the process of building a website that will showcase a location on a map (not Google Maps). To achieve this, I have utilized an iframe to contain the map and my goal is for the map to adjust its width based on the width of the browser wi ...
function updateDate(day, month, year) { month += ""; if (month.length <= 1) month = "0" + month; document.location.href = "<?php $_SERVER['PHP_SELF'];?>?page=events&day=" + day + "&month=" + m ...
I am looking to only generate a forms.ChoiceField(choices=CHOICES) field in order to create a basic select HTML element. Instead of creating a new form class, I want a way to render just one form field in Django templates without the need for a form to ...
Yesterday, while reviewing some code, I came across a line that seemed very peculiar to me. In a JavaScript function, there is a condition checking for a string passed as a parameter in the following manner: "%%unsubscribe%%". See the snippet below for re ...
Modern client side template libraries utilize tags of type text/html. Every guide or article I come across demonstrates an example of such a script embedded in the html page. Do you know of any method to create an external text/html script that can be lo ...
My JSON data structure looks like this: { "fID": "00202020243123", "name": "John Doe", "List": ["Father", "Brother", "Cousin"] } When I render this JSON element in my model and view it in the HTML, everything works fine. However, when I try t ...
Currently, I have created an HTML/PHP form with a 'textarea' element. As I work on implementing error handling, I want to ensure that if a mistake is made in the form, the content entered by the user is retained. Specifically, when a user makes ...
What is the best way to display dynamic images with varying resolutions in a circle like Google? I have tried using the Bootstrap class "img-circle", but it only works for images with a resolution of 304*236. If the image resolution is different, it appear ...
Here is a snippet of code that I found on Stack Overflow and modified: <?php header('Content-Type: text/html; charset=ISO-8859-1'); $origadd = $_SESSION["OriginAdd"] // $_SESSION["OriginAdd"] contains the value "rueFrédéricMistral"; echo $o ...
Having a bit of an issue with the height of the absolute div. About: .wrapper - I want the wrapper to automatically adjust its height but be limited by a max-height. (No scrolling for the wrapper) .title - Just a title .content - The problem aris ...
After searching through numerous questions, none seem to address this specific scenario. app.get('/', function(req, res) { res.set('Content-Type', 'text/html'); res.send(`<html> <body> Hello, World! </body&g ...
Click button to open modal: <button type="button" class="btn" onclick="CountClass()" runat="server" data-toggle="modal" data-target="#inlineForm1">OPEN</button> The modal code: <div class="modal fade text-left" id="inlineForm1" tabindex=" ...
Example ImageCreating a dynamic form where rows and select box options are added dynamically using 'x' and 'i' increment values in two JavaScript functions. The code works fine when the option selected is 0.5, but throws an error Uncaug ...
Can anyone offer some assistance? I am currently working on this in JavaScript. $('#popup').sfPopup({ text: 'Would You like to close this popup?', buttons: ['Yes', 'No'], defaultFocus: 1, ...
While working with CSS Grid, I noticed that the grid also includes the before and after elements as grid items. Is there a way to address this issue? .wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-gap: 10px; background- ...
::-webkit-scrollbar { width: 0.5vw; } ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb { background-color: rgb(99, 99, 99); border-radius: 10px; } I wrote this code to style a scrollbar in CSS. The scrollba ...
My image is currently animating along a path, but I want to make the path itself visible. Here's the CSS code: div { width:10px; height:10px; background:red; position:relative; -webkit-animation-name:Player1; -webkit-animatio ...