Container is scrollable only for half of the container. After that scrolling starts to affect navigation panel as well.
CSS:
.horizontal-scrollable {
overflow-x: auto;
white-space: nowrap;
}
HTML:
<div class="container horizontal-scrollable" style="border: 1px solid lime;">
<div class="row flex-nowrap" style="border: 5px solid gold">
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
</div>
<div class="row flex-nowrap" style="border: 5px solid gold">
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
</div>
<div class="row flex-nowrap" style="border: 5px solid gold">
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
</div>
</div>
[Works, thus container is crollable while navigation is still][1]
[1]: https://i.stack.imgur.com/vYKUY.png
[Stopped working after some breakpoint, whole page is moving][2]
[2]: https://i.stack.imgur.com/IgnTZ.png
You can try to make all the row div elements as inline, using display: inline-block; property.
For your case, it would be like
.horizontal-scrollable > .row > .col{
display: inline-block;
}
Also, try changing the code from Horizontal-scrollable to the the row elements inside that div.
.horizontal-scrollable > .row {
overflow-x: auto;
white-space: nowrap;
}
I found the this to be working for me. You can reference this here.
Related
I have a mat grid list with user defined number of row and col. I need to display all the border for each mat-grid-title cell.
However how do I display the outermost black border for mat-grid-list properly?
It's right and bottom border didnt show properly
<mat-grid-list cols="2" rowHeight="200px" style="border: 4px solid black">
<mat-grid-tile style="border: 2px solid red">
<div class='internalMatGrid' >
<mat-grid-list cols="1" rowHeight="2:1">
<mat-grid-tile>1</mat-grid-tile>
</mat-grid-list>
</div>
</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red">2</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red">3</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red">4</mat-grid-tile>
</mat-grid-list>
Here is my stackblitz
https://stackblitz.com/edit/angular-7gjjjn
Thank you
Just add box-sizing: border-box; CSS property in mat-grid-title element, will resolve your issue. Thanks
<mat-grid-list cols="2" rowHeight="200px" style="border: 4px solid black">
<mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">
<div class='internalMatGrid' >
<mat-grid-list cols="1" rowHeight="2:1">
<mat-grid-tile>1</mat-grid-tile>
</mat-grid-list>
</div>
</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">2</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">3</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">4</mat-grid-tile>
</mat-grid-list>
Its a hack to fix that i don't know whether its true or not but i figured it out what you need,
I wrap grid-list inside some div and give that div a border with some padding hack.
HTML
<div class="wrap">
<mat-grid-list cols="2" rowHeight="200px">
<mat-grid-tile style="border: 2px solid red">
<div class='internalMatGrid' >
<mat-grid-list cols="1" rowHeight="2:1">
<mat-grid-tile>1</mat-grid-tile>
</mat-grid-list>
</div>
</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red">2</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red">3</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red">4</mat-grid-tile>
</mat-grid-list>
</div>
CSS
.wrap {
border: 4px solid;
padding: 0px 4px 4px 0;
}
I tried positioning the footer in holy grail layout using bootstrap grod, but I am unable to do so. I tried everything
I tried positioning the footer in holy grail layout using bootstrap grod, but I am unable to do so. I tried everything
I tried positioning the footer in holy grail layout using bootstrap grod, but I am unable to do so. I tried everything
Could someone help with this?
`
html,
body {
height: 100%;
width: 100%;
}
.container-fluid {
border: 5px solid plum;
}
.main-row {
border: 5px solid orangered;
}
.left-sidebar {
border: 3px solid teal;
}
.nav-bar {
border: 3px solid crimson;
}
.main-right-sidebar {
border: 3px solid khaki;
padding: 0px;
}
.main-bar {
border: 3px solid greenyellow;
}
.right-sidebar {
border: 3px solid turquoise;
}
.footer {
border: 3px solid deeppink;
}
.cont {
border: 3px solid brown;
padding: 0px;
}
</style>
</head>
<body>
<div class="container-fluid h-100">
<div class="row h-100 main-row">
<div class="col-2 h-100 left-sidebar">
</div>
<div class="col-8 h-75 main-right-sidebar">
<div class="col-12 h-25 nav-bar">
</div>
<div class="col-12 h-75 main-bar">
</div>
</div>
<div class="col-2 h-75 right-sidebar">
</div>
<div class="col-10 h-25 footer">
</div>
</div>
</div>
</body>
</html>`
Try to offset your footer.
<div class="col-md-10 offset-md-1 h-25 footer">
</div>
I have designed picture 1 in PhotoShop which is what I was planning in the HTML.
I added the float to all elements but for some reason I don't understand it starts breaking the divs (picture 2)... am I missing something obvious here?
[![enter image description here][1]][1]
<div style="width: 974px; margin: 0 auto; background-color: white; padding: 0px;border: 0px solid black;">
<div style="margin: 10px 0px 10px 0px; top: 0px; left: 0px; float: left;border: 1px solid black;">
<a href="/Main/">
<img src="http://s10.postimg.org/7qbv2a6jd/tb_logo_site3.png" width="180" height="86" />
</a>
</div>
<div style="float:right;margin-top:10px;border: 1px solid black;">
<img src="http://s10.postimg.org/h8bm2bs7t/patreon_site3.png" width="280" height="42" />
</div>
<div style="clear:both;"></div>
<div style="margin-top:35px;margin-left:60px;float: left;border: 1px solid black;">
<img src="http://s10.postimg.org/q9uqtofix/poster_1_site3.png" width="300" height="496" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/h9ljvqu1l/paper_soho_title_site3.png" width="400" height="114" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/mfwp6s8t5/fist_page_icon_site3.png" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/4m175hpqx/first_page_site3.png" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/7mi1m1121/last_page_icon_site3.png" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/6vpbg8yop/last_page_site3.png" />
</div>
</div>
The alignment is off because of the size of Read From First Page and Jump To Last Page images. Giving width to the images will place it to the side of left container.
Also use display:inline-block with vertical-align:middle to align the container vertically into middle.
Here is the link that explains the use of display:inline-block
http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/
Have modified your html code
<div style="width: 974px; margin: 0 auto; background-color: white; padding: 0px;border: 0px solid black;">
<div style="margin: 10px 0px 10px 0px; top: 0px; left: 0px; float: left;border: 1px solid black;">
<a href="/Main/">
<img src="http://s10.postimg.org/7qbv2a6jd/tb_logo_site3.png" width="180" height="86">
</a>
</div>
<div style="float:right;margin-top:10px;border: 1px solid black;">
<img src="http://s10.postimg.org/h8bm2bs7t/patreon_site3.png" width="280" height="42">
</div>
<div style="clear:both;"></div>
<div style="margin-top:35px;margin-left:60px;float: left;border: 1px solid black;">
<img src="http://s10.postimg.org/q9uqtofix/poster_1_site3.png" width="300" height="496">
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/h9ljvqu1l/paper_soho_title_site3.png" width="400" height="114">
</div>
<div style="margin-top:0px;margin-left:30px;border: 1px solid black;display: inline-block;vertical-align: middle;">
<img src="http://s10.postimg.org/mfwp6s8t5/fist_page_icon_site3.png">
</div>
<div style="margin-top:0px;margin-left:30px;border: 1px solid black;height: 100%;display: inline-block;">
<img src="http://s10.postimg.org/4m175hpqx/first_page_site3.png" style="
width: 230px;">
</div>
<div style="display: inline-block;margin-left:30px;border: 1px solid black;vertical-align: middle;">
<img src="http://s10.postimg.org/7mi1m1121/last_page_icon_site3.png">
</div>
<div style="display: inline-block;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/6vpbg8yop/last_page_site3.png" style="
width: 230px;">
</div>
</div>
You have way too many divs, and you gotta adjust the margins/paddings.
Take a look at This link..
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 9 years ago.
I currently have this div:
<div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px;">
TEST
</div>
I have tried using <div style="text-align:center;"> </div> like this:
<div style='text-align: center;'>
<div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px;">
TEST
</div>
</div>
^ Doesn't work
I've also tried using <div style="text-align:center; display:block;"> </div> like this:
<div style='text-align: center; display:block;'>
<div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px;">
TEST
</div>
</div>
^ Doesn't work
I've also tried using <center> </center> (even though it is not recommended...
<center>
<div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px;">
TEST
</div>
</center>
^ It works!!!
The only problem is that <center> is terrible to use as it is outdated! So how can I do this without using <center>
is this what you want to achieve?
http://jsfiddle.net/cancerian73/LUcUZ/
<div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px; margin:0 auto;">
TEST
</div>
I hope someone can help me. I am trying to get to this:
This is what I have so far:
And below is my current html. How can I show the border on just the inner portion of the divs (like in the first screenshot)? Also, how do I make the height and width of each div a square (not rectangular)? Is it better to use an html table or is this possible using divs? The html code is dynamically being generated, so I cannot just add the right/left border on the individual divs.
<div style="width: 100%; text-align: center;">
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">S</span>
<br/>
0-0
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">M</span>
<br/>
5-7
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">T</span>
<br/>
5-7
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">W</span>
<br/>
5-7
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">R</span>
<br/>
5-7
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">F</span>
<br/>
7-5
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">S</span>
<br/>
0-0
</div>
<style type="text/css">
.wrapper {
width: 400px;
text-align: center;
}
span {
display:block;
}
.box {
float: left;
height:40px;
width: 40px;
background-color: #CCCCCC;
border-left: 1px solid black;
}
.box.act {
background-color:white;
}
.box:first-child {
border:none;
}
.box > span:first-child {
font-weight:bold;
}
</style>
<div class="wrapper">
<div class="box">
<span>S</span>
<span>0-0</span>
</div>
<div class="box">
<span>M</span>
<span>5-7</span>
</div>
<div class="box">
<span>T</span>
<span>5-7</span>
</div>
<div class="box">
<span>W</span>
<span>5-7</span>
</div>
<div class="box">
<span>R</span>
<span>5-7</span>
</div>
<div class="box act">
<span>F</span>
<span>7-5</span>
</div>
<div class="box">
<span>S</span>
<span>0-0</span>
</div>
don't add border on the last div.
use padding to establish widths and heigts