I am using uikit 2.8.0. I am trying to create a two column grid structure. But the two columns don't appear adjacent to each other. The second column slides down the first one.
<body>
<div class="uk-container uk-container-center uk-margin-large-bottom">
<nav var code.......>
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-1 uk-text-center">
<h1>Tell us more about yourself</h1>
</div>
</div>
<div class="uk-grid" data-uk-grid-match="{target:'.equal-height'}">
<div class="uk-width-large-6-10" style="margin: 0 20% 0 20%;">
<div class="uk-width-7-10 uk-width-small-1-1 uk-width-medium-7-10 uk-width-large-7-10" style="border: 1px solid #B4B3B3;height:100px;">
</div>
<div class="uk-width-3-10 uk-width-small-1-1 uk-width-medium-3-10 uk-width-large-3-10" style="border: 1px solid #B4B3B3;height:100px;">
</div>
</div>
</div>
</div>
I tried many options. But come what may, the second grid would not stay side by side to the first one.
How can I fix this? Any tool that I can use to debug the layout? I am using chrome developer tools without any success.
You needed to add class ".uk-grid" to the div with styled margin (uk-width-large-6-10), as you want to make a grid inside that element.
Plus this, the "Target" element should target to something existing, best to "uk-panel" placed inside the element with "uk-width".
<div class="uk-container uk-container-center uk-margin-large-bottom">
<nav var code.......>
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-1 uk-text-center">
<h1>Tell us more about yourself</h1>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-large-6-10 uk-grid" style="margin: 0 20% 0 20%;" data-uk-grid-match="{target:'.uk-panel'}">
<div class="uk-width-7-10 uk-width-small-1-1 uk-width-medium-7-10 uk-width-large-7-10" style="background-color:green; height:100px;">
<div class="uk-panel"> </div>
</div>
<div class="uk-width-3-10 uk-width-small-1-1 uk-width-medium-3-10 uk-width-large-3-10" style="background-color:red; height:100px;">
<div class="uk-panel"> </div>
</div>
</div>
</div>
Related
this is my page structure
HTML
<div class="container" style="padding-top:20px">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12" style="height:80px">
1st
</div>
<div class="col-md-12" style="height:50px">
3rd
</div>
<div class="col-md-12" style="height:50px">
5th
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12" style="height:50px">
2nd
</div>
<div class="col-md-12" style="height:40px">
4th
</div>
<div class="col-md-12" style="height:90px">
6th
</div>
</div>
</div>
</div>
</div>
I made a jsFiddle for it
https://jsfiddle.net/ytke8mn3/
I marked the columns with 1st,2nd,3rd,4th,5th,6th
The issue I'm facing is after resizing my page to a certain width in bootstrap below 992px.
I would like the columns to show in this order > 1st,2nd,3rd,4th,5th,6th
rather than 1st 3rd 5th 2nd 4th 6th
How to achieve this. Thanks
I found something that worked for me, it aligned the elements very well for me. I'm happy with it so far. it required a little bit of dom element restructuring(less written code) but that's okay.
<div class="container" style="padding-top:20px">
<div class="row">
<div class="col-md-8" style="height:80px">1st</div>
<div class="col-md-4" style="height:40px">2nd</div>
<div class="col-md-8" style="height:40px">3rd</div>
<div class="col-md-4" style="height:80px">4th</div>
<div class="col-md-8" style="height:80px">5th</div>
<div class="col-md-4" style="height:30px">6th</div>
</div>
</div>
https://github.com/desandro/masonry
I don't know how it is implemented but it's working. below is a jsfiddle
https://jsfiddle.net/p5u976mt/
The outer containers col-md-8 and col-md-4 make it impossible to reorder it the way you want to with https://getbootstrap.com/docs/4.0/layout/grid/#order-classes
You could hide the two outer containers and show a third one only for narrow device-widths with the 6 elements in the right order (would be very easy but a bad practice, because you repeat yourself).
I am not sure what exactly your actual requirement is. You can try the following bootstrap structure to get this ordering correctly.
Fiddle goes here
.row {
background: #f8f9fa;
}
.row > div {
border: solid 1px #6c757d;
}
<div class="container container-fluid">
<div class="row">
<div class="col-lg-6">
<app-profile [conId]="conId"></app-profile>
</div>
<div class="col-lg-6">
<app-sales [conId]="conId"></app-sales>
</div>
</div>
</div>
I have no idea why this is happening.
Could it possibly be because I'm wrapping Angular component tags in the Bootstrap rows and columns? I'm almost certain I've done something like this before and it worked.
I've attached a picture of what's happening and highlighted where it's over lapping.
Edit:
Seems to look good if I remove the component tags and add some background color. So it may actually have something to do with the components themselves?
<div class="row">
<div style="background-color: red; height: 20px;" class="col-lg-6">
</div>
<div style="background-color: yellow; height: 20px;" class="col-lg-6">
</div>
</div>
Columns
So basically I'm still a begginer when it comes to doing interfaces on the web and trying to allign everything properly. I've decided to use the bootstrap library. I'm trying to make a modal dialog divided into multiple section but i'm really struggling to make some section stack on top of each other and have another section take up the entire space.
What I currently have :
https://i.gyazo.com/adeeb3cca0abb6dea4a5d002d3568afa.png
What I'm trying to achieve :
https://i.gyazo.com/e8513c243424cb71926ac838e8b1166e.png
This is the code I currently have with some sample text to try to delimiter each section :
<div class='container-fluid'>
<div class="row">
<div class="col-md-3" style='border:1px solid black;max-height:5vh;'>
STATUS
</div>
<div class="col-md-9" style='border:1px solid black;min-height:50vh;'>
L
</div>
<div class="col-md-3">
SOME TEXT ASDASDASDJLASDJKLASDJAD
ASDASDLASKD
aASDASDK:ASDKASDK
ASDASJDASDASDKASJDASDJ
</div>
<div class="col-md-9">
L
</div>
</div>
</div>
To match the image you've provided, you want two columns - one three wide with four rows, and one nine wide with one row.
The height of the rows in the left column will be determined by their contents. I've written an example with extra content in one row in the left column:
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="row">
3
</div>
<div class="row">
3<br>
wide<br>
but<br>
taller
</div>
<div class="row">
3
</div>
<div class="row">
3
</div>
</div>
<div class="col-sm-9">
9
</div>
</div>
</div>
JSFiddle for a live example.
You keep two main columns (3/9) and inside the first column you can add more container. You can also add styles or classes to them.
<div class="container-fluid">
<div class="row" >
<div class="col-md-3" style='border:1px solid black;min-height:50vh;'>
<div style="min-height:10vh">10vh</div>
<div style="min-height:20vh">10vh</div>
<div style="min-height:10vh">10vh</div>
<div style="min-height:10vh">10vh</div>
</div>
<div class="col-md-9" style='border:1px solid black;min-height:50vh;'>L</div>
</div>
</div>
I am struggling adding spacing (or margin) between columns using the grid system in bootstrap. My html and css is below. I could not get any of the solutions posted online to work. The goal is spacing between col-8 and col-4. Any suggestions? Thanks!
HTML:
<div class="container">
<div class="row">
<div class="col-md-8">
hello
</div>
<div class="col-md-4">
<div class="row" align="center">
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/github_circle_black-128.png" class="icon-resize" alt="github">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_black-128.png" class="icon-resize" alt="linkedin">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_black-128.png" class="icon-resize" alt="twitter">
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
max-width: 960px;
height: 100%;
}
here is what you're looking for:
gridGutterWidth
It's usual to download the raw (.scss or .less) versions of bootstrap, so you can control the css output at build time. If you don't use any of them, you may find the http://getbootstrap.com/customize/ comfortable.
You could apply inline by
<div class="col-md-4" style="padding-left:1em">
Preface: I cannot change the HTML.
To better explain my question, I have provided an illustration below. Essentially, I have two rows of divs - the first row has content, and the second row would have a button beneath the content.
I want to make the page responsive, so that the div with a button always is below its corresponding div with content, but the extra container divs are proving a challenge. Any ideas?
What I have (above) and what I want (below).
Here's the HTML code:
<div class="choice-section">
<div id="choice_1" class="choice odd" style="margin-top: 242px;">
<div class="content">asdf</div>
</div>
<div id="choice_2" class="choice even" style="margin-top: 322px;">
<div class="content">asdf</div>
</div>
</div>
<div>
<div class="vote-choice odd">
<a class="vote btn" href="javascript:void(null)" choice="1">Vote</a>
</div>
<div class="vote-choice even">
<a class="vote btn" href="javascript:void(null)" choice="2">Vote</a>
</div>
</div>
I would strongly reccomend looking at Bootstrap's grid and column system with which this can easily be achieved. This framework will make responsive design a breeze for you.
You can see an example of something pretty similar to what you are trying to achieve in a Plunker I very quickly put together
CSS:
.blue {
background-color:blue;
height:200px;
}
.red {
background-color:red;
height:200px;
}
.purple {
background-color:purple;
height:200px;
}
.green {
background-color:green;
height:200px;
} here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="red">
</div>
</div>
<div class="col-sm-3">
<div class="blue">
</div>
</div>
<div class="col-sm-3">
<div class="purple">
</div>
</div>
<div class="col-sm-3">
<div class="green">
</div>
</div>
</div>