I have seen that this question had been asked before and I tried the different answers provided, however, none seemed to work on my code.
I am working on fixing a series of inputs that are displaying in two columns in Chrome and Firefox, but not in IE11.
This is how it looks on Chrome
This is how it looks on IE11
Here is the code being used
<div class="d-flex flex-wrap justify-content-between">
<div *ngFor="let field of fieldsToDisplay;let i = index"
ng-class="'address-single-div-class w-100': field.FieldType.toString() == FieldType_Type.Textarea.toString(), 'address-single-div-class': field">
<input-field
*** series of inputs ***
</input-field>
</div>
</div>
Try to add the col-* classes for the input fields, please check the following sample:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<p>Use .flex-fill on flex items to force them into equal widths:</p>
<div class="d-flex flex-wrap justify-content-between mb-3">
<input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 1" />
<input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 2" />
<input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 3" />
<input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 4" />
</div>
</div>
</body>
</html>
The result in IE11 browser:
Ok so I fixed my problem by adding width:50% to the second div that has the input fields. You can see the image I attached in my question for reference.
Apparently, flex-wrap doesn't do its job properly in IE11 due to some bugs. So instead of wrapping the elements, IE11 expands the container. By adding the width I predefined the container's size, that way it actually wraps the input fiels AND give them the full input size, so I do not need to use flex-fill. Plus, it doesn't affect the display in Chrome or Firefox.
Related
In tailwindcss, it seems like the start col-start-{n} class is ignored if you set span col-span-{n} class on a screen breakpoint. For example: col-start-2 col-span-2 md:col-span-3 when you reach the md breakpoint the col-start-2 is ignored.
Is this the expected behavior in tailwind? I can't find it documented anywhere.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p>The 😲 should always start at column 2, but when it reaches the "md" screen width, it starts at column 1</p>
<div class="grid grid-cols-6 gap-2">
<div class="col-start-2 col-span-2 bg-red-50 md:col-span-3">😲</div>
</div>
<!-- SCREEN SIZE DEBUG HELPER, IGNORE -->
<div class="p-1 fixed mt-50 text-24 text-red-0 bg-purple-400 text-white rounded-lg">
<span>Screen Size:</span>
<span class="hidden 2xl:inline">2XL</span>
<span class="lg:hidden hidden md:inline">MD</span>
<span class="md:hidden hidden sm:inline">SM</span>
<span class="sm:hidden inline">XS</span>
</div>
</body>
</html>
The problem as you mentioned, the col-span will override the col-start
Here is a comment I found by the creator of Tailwind CSS
Solution:
Add md:col-start-2 class, and it should work perfectly.
The problem I'm having only occurs in Mobile. Note that I'm using simple dropdown as well.
I look all the threads related to that, but cannot figure out why the menu does not work.
See the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Semantic-UI Issue</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css" />
</head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
Home
<div class="ui simple dropdown item">
Menu <i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="https://reactgirl.github.io/portifolio/about.html">About me</a>
<div class="divider"></div>
<a class="item" href="https://github.com/ReactGirl/portifolio/blob/master/about.html">This Code</a>
<a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues/6465">Semantic UI issue</a>
</div>
</div>
</div>
</div>
<div style='padding: 100px 0 0 30px'>
<div>Example page to show a semantic UI issue with the dropdown on mobiles: The dropdown does not open!</div>
<div class="ui padded segment">From the docs: "A simple dropdown can open without Javascript."</div>
<div><strong>The menu dropdown issue was reproduced on the following Mobiles:</strong></div>
<li>iPhone X. Browsers: Safari, Chrome.</li>
<li>iPhone 6. Browsers: Safari, Chrome.</li>
<div class="ui divider"></div>
References:
<div>
Semantic UI GitHub issue
</div>
</div>
</body>
</html>
You need to initialize the dropdown.
$('.ui.dropdown').dropdown();
This is actually a confirmed issue in Semantic-UI.
https://github.com/Semantic-Org/Semantic-UI/issues/6465
My solution was setting Z-index higher on the icon (.dropdown.icon).
The icon was unclickable due to being behind the text input.
I am loading up and using bootstrap like this, but the styles are not actually being applied to my row and col divs. In my network monitor I can see the css is being successfully loaded, yet for some reason it just isnt doing anything. Really stumped here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-4">
<label for="name">Name</label>
<input id="name" />
</div>
</div>
<div class="row">
<div class="col-4">
<label for="number">Number</label>
<input id="number" />
</div>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
</table>
</body>
</html>
EDIT:
I changed my link to use Bootstrap 4 and it still isnt working
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="row">
<div class="col-md-4">
<label for="number">Number</label>
<input id="number" />
</div>
<div class="col-md-4">
<label for="number">Number</label>
<input id="number" />
</div>
<div class="col-4">
<label for="number">Number</label>
<input id="number" />
</div>
</div>
Maybe I'm wrong but with my experience in bootstrap you have the specify the screen size when you're using the column features. Just use medium when you're building something that should fit across all platforms.
I think you are using the wrong CSS class names. You are loading a bootstrap 3.x version, and it uses different classes for different device resolutions:
If you want a block that occupies 4 columns, you need to use col-xs-4 for extra-small devices (<768px width), col-sm-4 for small, col-md-4 for medium size and col-lg-4 for large devices (>1200px).
You may check the documentation at: https://getbootstrap.com/docs/3.3/css/#grid-options
Given the following HTML, how would I make the Label, Input, and 2 Buttons exist on the same "line", and have the input take 100% space between the Label and 2 Buttons, with changing browsers widths? In other words, I want the input anchored on both sides, so that that will change width as you make the browser smaller and larger widths.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>example</title>
<style>
/* ?? */
</style>
</head>
<body>
<div id="container">
<form class="form">
<p>
<label>xyz:</label>
<span class="item">
<input type="text" class="txt" name="description" id="description" />
<button>A</button>
<button>B</button>
</span>
</p>
<br clear="all" />
</form>
</div>
</body>
</html>
See JSFiddle here: http://jsfiddle.net/3vGtJ/
You could also try using display:table and display:table-cell
http://jsfiddle.net/3vGtJ/1/
Is it possible to have a textbox and a button horizontally using JQuery Mobile?
using data-inline="true" works for buttons but not when mixed with button and textbox.
data inline example
data-type="horizontal" also didn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>
<script type="text/javascript">
$(document).ready(function(){
$("#clearMeClearMe").click(function(){
//$(this).hide();
$("#clearMe22").val("");
});
});
</script>
<body>
<div data-role="page">
<div data-role="header">
<h1>Textbox Clear Demo</h1>
</div><!-- /header -->
<div id="content">
<input type="text" id="clearMe22" data-inline="true" name="clearMe22"/>
<a href="#" data-role="button" data-icon="delete"
data-iconpos="notext" id="clearMeClearMe">Clear</a>
</div>
</div><!-- /page -->
</body>
</html>
Seems to work best for me when I float the button right and restrict the width of the text input:
<span>
<input style="width:90%;display:inline-block" type="text" id="clearMe22" data-inline="true" name="clearMe22" />
<a style="float:right" href="#" class="ui-input-clear" data-role="button" data-icon="delete"
data-iconpos="notext" id="clearMeClearMe">Clear</a>
</span>
http://jsfiddle.net/xeyyr/1/
But someone else might be able to provide a more elegant CSS solution.
I'm trying to find a similar solution for a custom button, but in your case I believe you can use the built-in methods for data clear ('data-clear-btn'). You can find this documented here:
http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/textinputs/
and would look like:
<input data-clear-btn="true" name="text-3" id="text-3" value="" type="text">