I am using Semantic-UI for my Rails project, actually i'm using https://github.com/doabit/semantic-ui-sass , everything is fine except when i use "stackable" for a responsive grid.
I am using the next official example:
<h3 class="ui center aligned header">Stackable Grid</h3>
<div class="ui two column stackable grid">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="three column row">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<div class="ten wide column">
<div class="ui segment">Content</div>
</div>
<div class="six wide column">
<div class="ui segment">Content</div>
</div>
</div>
It works perfectly in a HTML file alone, but in Rails it does not trigger the media queries. I also tested using the semantic.min.css and semantic.min.js in vendor files without any gem and i am getting the same result.
Besides i have tested it in either Rails 4.2.6 and 5.0.0.
I should kill myself, it was enterily my bad. I forgot add:
<meta name=viewport content="width=device-width, initial-scale=1">
Thank you for everyone who read this.
Related
I am very new to vue, this probably is very basic question. I want a page with 3-col layout, where two columns should be in default.vue and the one column should be in a page, say index.vue. I have created everything in default.vue and it works fine but I can not maintain that when I move the content to index.vue file. Here is overview of what I have:
<html>
<body>
<div class="row">
<div class="col-2">
<div class="row">
<div class="col">
Navigation
</div>
</div>
</div>
<div class="col-8"> <!-- I need this div in index.vue -->
<div class="row">
<div class="col"><WelcomeText></WelcomeText></div>
</div>
<div class="row">
<div class="col">Card 1</div>
<div class="col">Card 2</div>
<div class="col">Card 3</div>
</div>
</div>
<div class="col-2">
<CompanyCard></CompanyCard>
</div>
</div>
</body>
</html>
Here, if I move the whole div including col-8 to index.vue then CompanyCard moves to left near the Navigation and the main div goes below that. On the other had, if I just keep the line <div class="col-8"> in default.vue and move the content (2 rows inside this) to index.vue. The CompanyCard remains at right, as it should but the middle column is blank and the content is below that. How do I maintain that 3-col format across default.vue and index.vue ?
I am using Nuxt with Vuetify.
Thank you!
If you're using Nuxt then you should use <Nuxt /> component inside defualt.vue. this will include the page component
you can check nuxt layout docs
example for default.vue:
<template>
<div class="row">
<div class="col-2">
<div class="row">
<div class="col"> Navigation </div>
</div>
</div>
<div class="col-8">
<!-- I need this div in index.vue -->
<Nuxt />
<div class="row">
<div class="col">Card 1</div>
<div class="col">Card 2</div>
<div class="col">Card 3</div>
</div>
</div>
<div class="col-2">
<CompanyCard></CompanyCard>
</div>
</div>
</template>
now inide your index.vue add:
<template>
<div class="row">
<div class="col"><WelcomeText></WelcomeText></div>
</div>
</template>
i am not css developer but i am trying to lean bootstrap usage. so i was reading article from this url http://www.c-sharpcorner.com/article/overview-of-bootstrap-buttons-and-grid-offset/
i am curious to know how bootstrap offset works?
see some code example
1)
<div class="container">
<div class="row">
<div class="col-md-3col-md-offset-3 ">
<div class="customDiv">column 1</div>
</div>
<div class="col-md-3">
<div class="customDiv">column 2</div>
</div>
</div>
how col-md-offset-3 push two column at center. see the screen shot.
2) see this one
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="customDiv">column 1</div>
</div>
<div class="col-md-3 col-md-offset-6 ">
<div class="customDiv">column 2</div>
</div>
</div>
</div>
how this offset col-md-offset-6 can push two column to corner. one to left and another to right. see the screen shot
3) how image comes at center see the code and screen shot
<div class="container">
<div class="row"> <img src="one.png" class="col-md-4 col-md-offset-4 img-responsive" /> </div>
</div>
please explain my each points and tell me how offset works in bootstrap. thanks
I'm having some problems nesting rows because behaviour is different in Firefox, Chrome and Explorer.
I have two different snippets:
<div class="row">
<div class="col-md-2">
<div class="sidebar affix">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
Some content here
</div>
</div>
</div>
</div>
</div>
<div class="col-md-offset-2 col-md-8">
<div class="content">
Some other content
</div>
</div>
</div>
The result in Firefox is like
Meanwhile in Chrome and Explorer 9 look like
The code seems to be well formatted. The solution I tried is change "col-md-12" to "col-md-3" but now, I have the expected results in Chrome and Explorer but not Firefox.
Is there any workaround or a way to make bootstrap use a different classes depending of the browser?
The Bootstrap documentation seems contrary on this, but I find in my projects, if I want to nest rows inside other rows I also have to include an inner .container-fluid.
For example:
<div class="row">
<div class="col-md-2">
<div class="sidebar affix">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
Some content here
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-offset-2 col-md-8">
<div class="content">
Some other content
</div>
</div>
</div>
When I do this I don't see any rendering difference between Firefox and Chrome.
I'm using Bootstrap to build a Dashboard, but I'm rather new to Bootstrap and I'm having issues getting the final grid layout in the image below. The problem is that when I add the 4th column (Table), which will vertically house more data than the other 3 columns on the left (Widgets), is pushing down the bottom row content (Chart) like in this image. It looks easy, and I guess it has something to do with the 'colspan' or 'rowspan' features, but I can't figure it out.
Why is my chart getting pushed down like this, and how can I fix it?
You have to nest to achieve that.
For example:
<div class="container"
<div class="row">
<div class="col-md-9 not-right-table-content">
<!--nest content here, it's like a new grid-->
<div class="row">
<div class="col-md-4">
widget 1
</div>
<div class="col-md-4">
widget 2
</div>
<div class="col-md-4">
widget 3
</div>
<div class="col-md-12">
chart
</div>
<div class="col-md-12">
other content
</div>
</div>
</div>
<div class="col-md-3">
right table html here
</div>
</div>
</div>
#Nuno - Use below "HTML Code Snippet" or see my JS Fiddle (you might need to scroll boundaries to extend Result pane.)
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 not-right-table-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">widget 1</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 2</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 3</div>
<div class="col-lg-12 col-md-12 col-sm-12">chart</div>
<div class="col-lg-12 col-md-12 col-sm-12">other content</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">right table html here</div>
</div>
You can use below resources to know more about bootstrap:
Bootstrap - Approach to better, faster, stronger web development
Blasting off with Bootstrap
I am really struggling with getting 3 columns inside a page layout.
I am only using the semantic CSS, no CSS of my own for now. I am just trying to wrap my head around the grid stuff.
This is my complete body content:
<div class="ui page grid">
<header class="sixteen wide column">
<div class="ui segment">Header text.</div>
</header>
<div class="ui divided grid">
<div class="eight wide column">
<div class="ui segment">Left text</div>
</div>
<div class="eight wide column">
<div class="ui segment">Right text</div>
</div>
</div>
<div class="ui three column grid">
<div class="column">
<div class="ui segment">1</div>
</div>
<div class="column">
<div class="ui segment">2</div>
</div>
<div class="column">
<div class="ui segment">3</div>
</div>
</div>
<footer class="sixteen wide column">
<div class="ui segment">Footer text.</div>
</footer>
</div>
I understand how to get a full width column — that's verbose but it works.
I also am able to get 2 half-width columns using .sixteen.wide.column elements.
But since 16 is not dividable by 3, I am trying to use this to obtain 3 columns:
<div class="ui three column grid">
<div class="column">
<div class="ui segment">1</div>
</div>
<div class="column">
<div class="ui segment">2</div>
</div>
<div class="column">
<div class="ui segment">3</div>
</div>
</div>
That code above is lifted from this documentation page: http://semantic-ui.com/collections/grid.html
I get this, alas:
It seems that the width issue comes from this CSS:
.ui.grid > .column, .ui.grid > .row > .column {
width: 6.25%;
}
No I need an additional class anywhere, or some additional markup?
Thank you so much!
Here you go:
<div class="ui three column grid">
<div class="column">
Content
</div>
<div class="column">
Content
</div>
<div class="column">
Content
</div>
</div>
I had a similar problem!
Its done this way:
<div class="ui divided grid stackable">
<div class="three column row">
<div class="column wide">
<p> Your stuff here </p>
</div>
<div class="column wide">
<p> Your stuff here </p>
</div>
<div class="column wide">
<p> Your stuff here </p>
</div>
</div>
</div>