I could not understand about that, I need your help to understand this point.
Is it good to use margin or padding with bootstrap class by using another class (which will call margin or padding in css)?
Please check an example below for better understanding:
<div class="row margin-bottom-30">
<div class="col-xs-10 padding-30">
<p>text here</p>
</div>
</div>
Thanks in advance :)
As you already know col-xs-10 and all the col-xx-xx classes have a default left and right padding of 15px. If you want to increase that, it's ok, it's nothing wrong with that, depends of what your design should look like.
Regarding the row class, to use a margin-bottom it is actually fine, it's quite recommanded for spaces between blocks. What i think it's not recomanded is to use margin left and right inside col-xs-10 because it could crash the layout. The rest of the things are permited.
It's fine to use use..
But it is not according to our standards.
SO, do not change the padding of existing bootstrap class..
it's better to add a parent with a class and give padding in it.
This will be in case of Media Queries
Related
I looked in the documentation, on the forum ... I would like to know this:
When I create a component with a scoped style. Should I use classes or id for my DOM ? I prefer ID because this element is unique.
ex:
<template>
<div id="wrapper"> // or class="wrapper" ?
<button id="myBtn">CLICK</button> // or class="myBtn" ?
<div v-for="i in 5" :key="i" class="myDiv">{{i}}</div> // sure class in this case :D
</div>
</template>
For the methods of the component must prefix by $ _mycomposant_methods or can I directly write method?
Same for computed?
I imagine that when compiling (webpack) each component is scoped but I would like to be sure to avoid edge effects.
Thank you
You do not need either.
Vue will automatically take care of the scope and give the component a unique data-hash which then is taken to write your css. It really works well. Give it a try ;)
And your methods and computed properties are working just like normal. nothing to take care of.
For the first question, I think you should keep using class.
Although with the help of component-scoped CSS, you don't need to worry much about the interference from other components' stylesheets, all the templates will still be merged into one document. Vue.js just adds unique data attributes to the elements, it doesn't guarantee every id's uniqueness you defined.
So in order to keep flexibility and avoid potential troubles, it will be a wise choice to follow specifications of HTML which means keeping wrapper as a class if it appears in your HTML document several times.
For the second and third question, I prefer to keep the method names easy to read and understandable. All the JavaScript code will going to be minified and uglified, so there's no need to add any prefix.
I am using Materialize and the sidenav is creating multiple overlays upon clicking the sidenav.
<div id="sidenav-overlay" style="opacity: 1;" class=""></div>
<div id="sidenav-overlay" style="opacity: 1;" class=""></div>
<div id="sidenav-overlay" style="opacity: 1;" class=""></div>
I found a fix here and replaced the sideNav.js file from here. But it still doesn't do any good.
Has anyone been stuck in a similar situation and found a solution?
The reason there are multiple overlays appearing behind your SideNav is because materialize's $('.button-collapse').sideNav() is being run multiple times on the same element.
A quick fix for this is to remove all previous click() events from your element before re-initializing materialize's sideNav, like so:
$(".button-collapse").off('click').sideNav({ --yourOptions-- });
Note: I am not sure what other functionality the ".sideNav()" call may be adding here, there may be a better/more specific way to remove the previous init.
what language you are programming??
I spent something like with asp.net, the mistake was declaring this:
$(".button-collapse").sideNav();
In MasterPage and ChildPages. Now declaring only MasterPage and the issue was solved.
hopefully help you in something,
Regards
For those who are using the Materialize Framework on Drupal, make sure you do not accidentally side-load another copy of Materialize / Velocity JS through Grunt or other task managers. That would cause the overlay to stack up like crazy.
This is what I tried when I faced similar issue:
#sidenav-overlay{ opacity: 0;}
#sidenav-overlay {background-color: transparent;}
i am learning bootstrap, need help.
I have row, then i have a custom_class which i just need to use when display not extra small (xs). How to do that?
<div class="col-md-7 custom_class">Left</div><div class="col-md-5">Right</div>
Thanks
So.. I have a dynamic width page. Below, the wrapper div centers the divs inside of it. However, each div has a style of:
display:inline-block;
width:400px; /* static */
This makes the inside divs, side by side. But that means that there is some whitespace left over depending on the width of the browser and how many divs can go side by side without breaking to the next line.
To get an idea of what I am going for, open up your Google Chrome New Tab page and drag your browser window to make it smaller. You will see that when you go too far, some of the chrome apps bump to the next line BUT it still stays centered.
In my case, they bump to the next line and become not centered.
This is what my code looks like:
<div class="wrapper">
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
</div>
I want the inside divs to be side by side unless there is not enough room in which case the end one will bump to the next line down, ALL while staying centered in the parent div.
Thanks for any help.
If I understood you correctly adding text-align: center to your .wrapper styles should give the desired effect. See this fiddle for an example. Resize the result panel to watch the reordering of the boxes.
Like Akaishen already mentioned inline-blocks flow like text. That's why you can control their alignment with text-align. However if you want very fine control over your layout you might run into problems using inline-blocks. Since they flow like text whitespace between them is not ignored for instance. And unfortunately you can't really determine the absolute width of a space across browsers and OSs. The gaps between blocks in my example are caused by this.
As you are using the display: inline-block the <div> tags are essentially inline elements and can be styled as such. text-align: center would center each element. At this point, you need a container / wrapper to define the maximum and minimum widths.
There could be a better way to achieve what you are looking for, and this is not exactly like how the Chrome windows work, though it's a start: fiddle
One of my most common operations in textmate is to encapsulate a block of text in a <div>.
How can i create a keyboard shortcut for this? I do not really feel like learning anything complex, so simple solutions would work best - thanks!
Maybe I didn't understand your question, but what about the "Wrap Selection in Open/Close Tag" (Ctl-Shift-W) from the HTML bundle? Having a block of text selected then overtyping the default <p> with <div> does the work. See http://manual.macromates.com/en/bundles#html
But the following snippet :
${0:${TM_SELECTED_TEXT/\A(.)<\/div>\z|./(?1:$1:$0<\/div>)/m}}
does the same thing without even typing the tag ...
HTH
This might slightly off topic, but you might be interested in using Zen coding for Textmate, which allows you produce lots of HTML with a few key strokes.
You write:
div#page>div.logo+ul#navigation>li*5>a
You get:
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
(disclaimer: the example code is from the above mentioned site)
Besides that it adds features for easy navigation of editable parts of HTML, for easy wrapping of content using the same syntax as above. This last past would allow you to wrap any text (content) in whatever HTML you would like.
Happy coding :)