The flex-basis property seems to be malfunctioning as the image suddenly vanishes when

While my question may seem similar to others, the issue at hand is actually quite different.

Here's how it appears in Chrome https://i.sstatic.net/tngvr.jpg

Safari https://i.sstatic.net/eE74k.png

In Safari, you'll notice that the map disappears. I've tried several methods, including setting a minimum height in percentage, but none of them are working for me.

Note: I'm looking to ensure that the image and text columns have equal heights that adjust based on screen size, so please avoid suggesting fixed widths and heights.

I'm hopeful that some of you might be able to offer advice. Thank you!

$('#tabs').tabs({
    activate: function (event, ui) {}
});
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}

#Contact, #contact-panel{ height: 92%;}

.fullwidth_contact{
  display: flex;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  height: 92%;
  margin: 0;
  padding:0;
}

.rowdisplay_contact {
  display: flex;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  height: 90%;
  margin: 0;
  padding:0;
}


.repeat-xcontact {
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.width70{flex-basis: 70%;}
.width30{flex-basis: 30%;}

.country_box{ 
font-size: 25px;
line-height: 1.2em;
padding: 12% 10%;
background-color: #5ba4ee;
}

.address_box{
padding: 12% 10%;
background-color: #ccc;
}

.map { background-image: url("http://geology.com/world/world-map.gif");}

ul.tabs{
margin:0;
padding: 16% 0 0 0;
    list-style-type: none;
}

ul.tabs li{
padding: 5px 0;
}

ul.tabs li a{
color: #fff;
font-weight: bold;
}

ul.tabs li a:hover, .ui-state-active{
font-weight: bold;
color: #1d70c4;
outline:none;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
font-weight: bold;
color: #1d70c4;
text-decoration: none;
}

ul.tabs li a:focus {
    outline:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="tabs" class="fullwidth_contact">
  <div class="repeat-xcontact map width70"></div>
  
  <div class="repeat-xcontact width30">
<!-- <div class="rowdisplay_contact width100"> -->
  <div class="repeat-xcontact country_box">
<div class="txt8">CONTACT</div><br/>
<ul class="tabs" data-persist="true">
<li><a href="#view1">Content 1</a></li>
<li><a href="#view2">Content 2</a></li>
<li><a href="#view3">Content 3</a></li>
</ul>
  </div>
  <div class="repeat-xcontact address_box">
<div id="view1">
<p class="country_title">Content 1</p>
<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
<p>T &nbsp;&nbsp; 1234 5678</p>
<p>F &nbsp;&nbsp; 1234 5678</p>
<p>E &nbsp;&nbsp; <script language="JavaScript"><!--
var name = "info";
var domain = "test.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '</a>');
// --><!--</script></p>
</div>
<div id="view2">
<p class="country_title">Content 2</p>
<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
<p>T &nbsp;&nbsp; 1234 5678</p>
<p>F &nbsp;&nbsp; 1234 5678</p>
<p>E &<a href="#view3">next</a></p>
</div>
<div id="view3">
<p class="country_title">Content 3</p>
<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
<p>T &nbsp;&nbsp; 1234 5678</p>
<p>F &nbsp;&nbsp; 1234 5678</p>
<p>E &nbsp;&nbsp; <script language="JavaScript"><!--
var name = "info";
var domain = "test.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '</a>');
// --><!--</script></p>
</div>
  </div>
<!-- </div> -->
  </div>
</div>

htmlcsssafariflexbox

Answer №1

After testing your code snippet on Safari (v11.0.2), Chrome (v63.0.3239.132), and FireFox (v57.0.4), I can confirm that it works perfectly on all of these browsers.

https://i.sstatic.net/c2q23.png

To further validate, I created a CodePen demo to check for any issues: https://codepen.io/mike-scheurwater/pen/zpWxOO

If you encounter any problems, could you please specify the browser version(s) you are using?

$('#tabs').tabs({
    activate: function (event, ui) {}
});
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}

#Contact, #contact-panel{ height: 92%;}

.fullwidth_contact{
  display: flex;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  height: 92%;
  margin: 0;
  padding:0;
}

.rowdisplay_contact {
  display: flex;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  height: 90%;
  margin: 0;
  padding:0;
}


.repeat-xcontact {
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.width70{flex-basis: 70%;}
.width30{flex-basis: 30%;}

.country_box{ 
font-size: 25px;
line-height: 1.2em;
padding: 12% 10%;
background-color: #5ba4ee;
}

.address_box{
padding: 12% 10%;
background-color: #ccc;
}

.map { background-image: url("http://geology.com/world/world-map.gif");}

ul.tabs{
margin:0;
padding: 16% 0 0 0;
    list-style-type: none;
}

ul.tabs li{
padding: 5px 0;
}

ul.tabs li a{
color: #fff;
font-weight: bold;
}

ul.tabs li a:hover, .ui-state-active{
font-weight: bold;
color: #1d70c4;
outline:none;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
font-weight: bold;
color: #1d70c4;
text-decoration: none;
}

ul.tabs li a:focus {
    outline:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="tabs" class="fullwidth_contact">
  <div class="repeat-xcontact map width70"></div>
  
  <div class="repeat-xcontact width30">
<!-- <div class="rowdisplay_contact width100"> -->
  <div class="repeat-xcontact country_box">
<div class="txt8">CONTACT</div><br/>
<ul class="tabs" data-persist="true">
<li><a href="#view1">Content 1</a></li>
<li><a href="#view2">Content 2</a></li>
<li><a href="#view3">Content 3</a></li>
</ul>
  </div>
  <div class="repeat-xcontact address_box">
<div id="view1">
<p class="country_title">Content 1</p>
<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
<p>T &nbsp;&nbsp; 1234 5678</p>
<p>F &nbsp;&nbsp; 1234 5678</p>
<p>E &nbsp;&nbsp; <script language="JavaScript"><!--
var name = "info";
var domain = "test.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '</a>');
// --><!--</script></p>
</div>
<div id="view2">
<p class="country_title">Content 2</p>
<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
<p>T &nbsp;&nbsp; 1234 5678</p>
<p>F &nbsp;&nbsp; 1234 5678</p>
<p>E &nbsp;&nbsp; <script language="JavaScript"><!--
var name = "info";
var domain = "test.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '</a>');
// --><!--</script></p>
</div>
<div id="view3">
<p class="country_title">Content 3</p>
<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
<p>T &nbsp;&nbsp; 1234 5678</p>
<p>F &nbsp;&nbsp; 1234 5678</p>
<p>E &nbsp;&nbsp; <script language="JavaScript"><!--
var name = "info";
var domain = "test.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '</a>');
// --><!--</script></p>
</div>
  </div>
<!-- </div> -->
  </div>
</div>

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

How can I showcase Bootstrap cards horizontally within a razor foreach iteration?

I seem to be experiencing a mental block on how to arrange bootstrap cards in a horizontal layout using a for each loop. By default, they appear vertically. Below is my razor code: @foreach (var item in Model) { var imgUrl = Url.Content("~/Conte ...

htmlcssasp.net-mvctwitter-bootstrap

Struggling to create a drop-down box with CSS and not achieving the expected results

Currently, I am delving into the world of HTML and CSS to hone my skills in front-end web development. While attempting to code a drop-down box within my navigation menu, I have encountered an issue where the drop-down opens at the left corner while the na ...

htmlcss

What is the method to submit to a protected service from an unsecured page without relying on a complete domain name?

I am interested in creating a form on a non-secure page without the need for a fully qualified domain name. http://www.example.com/page This form should post to a secure service on the same domain. https://www.example.com/service I currently have a wor ...

htmlhttps

Ways to emphasize an HTML element when clicked with the mouse

Can JavaScript be used to create code that highlights the borders of the HTML element where the mouse pointer is placed or clicked, similar to Firebug, but without needing a browser extension and solely relying on JavaScript? If this is possible, how can ...

javascripthtmldommouseevent

CSS from the parent page is not being applied to AJAX-injected content

I recently added AJAX functionality to a new website to dynamically load and insert Wordpress page content using AJAX. However, I encountered an issue where some CSS styles that were supposed to be loaded in the page head were not being applied. This resu ...

jquerycssajax

Comparing Jquery's smoothscroll feature with dynamic height implementation

Recently I launched my own website and incorporated a smoothscroll script. While everything seems to be working smoothly, I encountered an issue when trying to adjust the height of the header upon clicking on a menu item. My dilemma is as follows: It appe ...

javascriptjqueryhtmlscrollsmoothing

Extracting data from a JQGrid in HTML5 Builder: a beginner's guide

Apologies for asking this question as I couldn't find any relevant posts addressing it specifically in relation to HTML5 builder. I am trying to retrieve the value of the "ID" column, which happens to be the last column among the four, based on the r ...

phpjavascripthtmljqgridhtml5builder

Looking to activate a button only when the checkbox is selected and in an enabled state

I'm struggling to make the button enable when the checkbox is checked and enabled. Additionally, it should be dependent on the textarea scroll above it. Once the checkbox is checked, the page needs to scroll up and down to activate the button. Here& ...

jqueryhtmlbuttoncheckboxscroll

Proceed to the section with modal

My goal is to create a modal with 4 sections, each loading its content dynamically using the .load() function to the container on the right side. The challenge I'm facing is that I have a footer menu that triggers the modal to open, and I need it to ...

javascriptjqueryhtmlcssajax

How can I modify the HTML code for rooms in the HTML 5 client of the bigbluebutton application?

Is it possible to customize the HTML code of rooms within the BigBlueButton source code? Additionally, how can I modify the CSS styles of elements in room sessions? For instance, I am interested in hiding the logo of BigBlueButton by setting 'display: ...

htmlcssbigbluebutton

Assistance needed with CSS selectors for implementing with selenium

<div id="footerSearchInputDefault" class="defaultText" style="visibility: hidden;">Search myTwonky</div> In relation to selenium, what do the following terms refer to in the above code snippet? attribute element value text label I often fin ...

cssselenium

There are no elements displayed beneath the div

If you're short on time, let me explain my point with an image: Here is the HTML code I am working with: <div align="center"> <div class="img-container"> <div class="myconatiner"> <h2>Headline< ...

csshtml

Center align the list items on mobile using flex in bootstrap 4

At the top of my page, I have a div called header_full_width. This div spans 100% of the width of the page. Within this div, there is a container, a row, a col-md-12 div, and an unordered list with list items and links. My issue is that on mobile devices, ...

htmlcsstwitter-bootstrapbootstrap-4anchor

Resetting the value of a radio button input option to null using Angular2 ngModel

In my Angular2 application, I am attempting to implement radio button inputs using ngModel and value. The goal is to have three options: true, false, and null. However, I am struggling to assign a value of null to one of the inputs. Ideally, when nothing ...

htmlformsangularradio-buttonngmodel

The website displays perfectly in Atom, however, it is not functional in any web browser

My website is currently in the development phase, and I'm experiencing issues with certain div elements not positioning correctly once the site goes live. Specifically, the "Follow Us" tab at the bottom of the site, among other divs, has been affecte ...

javascripthtmlcss

What is the method for aligning an <img> to the right within a Bootstrap 4 card-body?

I am having difficulty aligning an image to the right within a Bootstrap 4 card-body. I attempted to use the float-right class, but it doesn't seem to be working. Are there any specific considerations for aligning images in a card-body? <div class ...

cssalignmentbootstrap-4right-align

I'm puzzled, can anyone provide clarification on the concept of xml?

Recently, Sheshank S. provided me with a solution to my question, but I failed to grasp its meaning. Can someone please explain it to me? Despite looking through various tutorials on websites and videos, none of them have been able to clarify what this cod ...

javascripthtmlxhtml

Issues arising with the functionality of CSS media queries when used in conjunction with the

I created a webpage that is functioning well and responsive on its own. However, when I integrate the same files with the Spring framework, the responsiveness of the webpage seems to be lost. To ensure the responsiveness of the Spring webpage, I tested it ...

javahtmlcssspringjsp

Implementing onMouseEnter and onMouseLeave functionalities for music player

Currently facing a challenge while developing a music player app. I am trying to implement a feature where: Upon hovering over a song, a "play" button should appear in place of the song number. The currently playing song should display a "pause" ...

javahtmlreactjsjsx

What is the most efficient method for identifying and modifying an element's in-line style while performing a swipe gesture?

Recently, I've been developing a left swipe gesture handler for chat bubbles. Implementing touchMove and touchStart seems like the logical next step, but for now, I'm focusing on making it work seamlessly for PC/web users. I managed to make it f ...

javascriptcssreactjs