I'm planning to display a table with a large width, so I havent' founded a CSS o HTML code to display this table and can move in a horizontally way
The only part which should be with horizontal scrolling is in the center (the white color). Here is my defaul razor view.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/themes/base/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">#Html.ActionLink("MS. GARCIA MATH 7TH", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<nav>...</nav>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
...
</footer>
#Scripts.Render("~/bundles/otf")
#RenderSection("scripts", required: false)
</body>
</html>
Set overflow to scroll
#body{
overflow-x: scroll;
}
Try overflow scroll
table
{
overflow: scroll;
}
Related
using w3css, cannot make "Wish you a happy day" in the center of the sand-colored section yet.
<html>
<head>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body,h1,h2,h3,h4,h5 {font-family: "Trirong", serif}
</style>
</head>
<body class="w3-light-grey">
<!-- w3-content defines a container for fixed size centered content,
and is wrapped around the whole page content, except for the footer in this example -->
<div class="w3-content" style="max-width:1100px">
<!-- Header -->
<header class="w3-container w3-center w3-padding-32">
<p><button class="w3-button w3-padding-large w3-white w3-border">Welcome</button></p>
</header>
<!-- Grid -->
<div class="w3-row w3-card-4 w3-margin w3-sand">
<!-- Blog entries -->
<div class="w3-col l8 s12">
<img src="../static/images/101.jpg" alt="Nature" style="width:100%">
</div>
<div class="w3-col l4">
<div class="w3-container w3-sand">
<div class="w3-container w3-sand w3-center" style="width:80%; margin:auto;">
<p>
<h7>WELCOME</h7>
<h3><b>Wish you a happy day</b></h3>
<h6>Keep calm and carry on !</h6>
</p>
</div>
</div>
</div>
<!-- END GRID -->
</div>
<br>
<!-- END w3-content -->
</div>
</body>
</html>
[![enter image description here][1]][1]
Any suggestions ?
ok i used w3-cell and we-cell-row, not w3-container, it's working now
see this sample
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_layout_align_all
So I'm just sandboxing how responsive flex and shrink works in Bootstrap. Below is my code. Nothing seems to work. I've tried using different breakpoints such as lg/md/sm but to no luck. Would appreciate any guidance.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
</head>
<body>
<div class="container-fluid">
<div class="row bd-highlight">
<div class="col border border-2 flex-md-shrink-1">Flex item 1</div>
<div class="col border border-2 flex-md-shrink-0">Flex item 2</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Since .col is flex: 1 0 0% columns will grow, but not shrink so your test isn't doing anything to override .col. You could change flex-grow to override the .col behavior...
<div class="container-fluid">
<div class="row">
<div class="col border border-2 flex-md-shrink-1 flex-md-grow-1">Flex item 1</div>
<div class="col border border-2 flex-md-shrink-0 flex-md-grow-0">Flex item 2</div>
</div>
</div>
https://codeply.com/p/0pUmeIxKEX
Try to use only d-flex and not combine it with bootstrap's grid system (.col and .row)
Here is the modified example:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
<style>
.item-container {
width: 100%;
}
.item {
flex-basis: 100%;
flex-shrink: 200px;
}
.item-shrink {
flex-shrink: 3;
}
</style>
</head>
<body>
<div class="item-container d-flex bd-highlight">
<div class="item item-shrink border border-2">Flex item 1</div>
<div class="item border border-2">Flex item 2</div>
</div>
<!-- Optional JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I am trying to achieve below using Tailwind CSS Grid:
My HTML code is as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="tw_style.css" type="text/css">
<title>This is a Testing Site</title>
</head>
<body>
<section class="container h-screen mx-auto bg-red-100 grid grid-rows-10 gap-4">
<!-- Banner Image (left) and Menu Button (right) in same Grid Row-->
<section class="row-span-1">
<banner class="" style="background-image: url(Banner.jpg)">
<h1 class="pt-2 text-center align-top text-3xl font-black text-red-700">This is a Testing Site</h1>
</banner>
<button>
</button>
</section>
</section>
</body>
</html>
[Q1]: Why the background image does not show up until I put a block or flex class <banner class="block" style="background-image: url(Banner.jpg)"> ?
[Q2]: Why text in <h1> tag is not on the top of background image even though align-top is in place ?
Thanks a lot.
Q1: there is no html element named banner. When you use a div it works.
Q2: it is, however since the banner does not have a height defined it can't be on top
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="tw_style.css" type="text/css">
<title>This is a Testing Site</title>
</head>
<body>
<section class="container h-screen mx-auto bg-red-100 grid grid-rows-10 gap-4">
<!-- Banner Image (left) and Menu Button (right) in same Grid Row-->
<section class="row-span-1 grid grid-cols-10">
<div class="bg-no-repeat bg-cover col-span-9" style="background-image: url('https://media.giphy.com/media/26BRQTezZrKak4BeE/giphy.gif')">
<h1 class="pt-2 text-center align-top text-3xl font-black text-red-700">This is a Testing Site</h1>
</div>
<button class="col-span-1">
Menu
</button>
</section>
<div class="row-span-8 text-center text-6xl">Main content</div>
<div class="row-span-1 bg-yellow text-center">Footer</div>
</section>
</body>
Example pen: https://codepen.io/onewaveadrian/pen/MWpvwvx
I'm trying to use bulma columns but they are overflowing the body in mobile views. In the next picture you can see the white gap to the right of the screen. I inspected and the body tag is flush with the 'tomato' section's right border. However when the instance of columns appears it overflows the body tag and creates horizontal scrolling.
Thanks in advance for your help!
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<link rel="stylesheet" href="assets/stylesheets/main.css">
<title>Buffalo Wings</title>
</head>
<body>
<div class="bw-hero" style='display: flex; align-items: center; justify-content: center'>
<h1 class='title is-bold' style="color: white">slider tbd</h1>
</div>
<div class="container">
<div class="columns">
<div class="column">
<img src="assets/images/svg/the_chicken_wings_experts.svg" alt="The chicken wings experts">
</div>
<div class="column">
<h2 class="title has-text-centered">SELECCIONA TU PAÍS Y CIUDAD</h2>
<div class="field is-grouped is-grouped-centered">
<div class="control">
<div class="select">
<select>
<option>País</option>
<option>With options</option>
</select>
</div>
</div>
<div class="control">
<div class="select">
<select>
<option>Ciudad</option>
<option>With options</option>
</select>
</div>
</div>
</div>
<div class="field has-text-centered">
<input class="is-checkradio" id="saveLocationPreferences" type="checkbox" name="saveLocationPreferences" checked="checked">
<label for="saveLocationPreferences">Recordar mi selección</label>
</div>
</div>
</div>
</div>
</body>
</html>
For avoid horizontal scrolling on mobile device change viewport meta tag in your <head> with this:
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0, user-scalable=no">
instead of :
<meta name="viewport" content="width=device-width, initial-scale=1">
For me the solution is hiding horizontal overflow in the body, as such
body {
overflow-x: hidden;
}
#sam-nzd offered an alternative solution, but it disables users capabilty to zoom. I'd love to know myself which is the better option.
Here is my html, I am using the SCSS version:
<!doctype html>
<html class="no-js" lang="en" dir="rtl">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title here</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="row">
<div class="small-3 small-centered columns">3 centered</div>
</div>
<div class="row">
<div class="small-6 large-centered columns">6 centered</div>
</div>
<div class="row">
<div class="small-9 small-centered large-uncentered columns">9 centered</div>
</div>
<div class="row">
<div class="small-11 small-centered columns">11 centered</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/dist/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/js/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Here is what I get:
UPDATE (clarification):
When I inspect the elements, they don't have a row/column class definition, and they are not centered at all.
What am I doing wrong?
Note: I am using the rtl settings. I checked if it broke things, but it still didn't work.
Do you have an #include foundation-float-classes or #include foundation-flex-grid on your app.scss? Maybe you are using only #include foundation-xy-grid-classes, where there are no .row and .columns anymore, only .grid-x and .cell