In the Foundation framework, there is a variable called $column-gutter, which controls the space between columns in the grid. Is it possible to have a different value for $column-gutter dependent on the media-query state? I'd love to have wider column-gutters for my desktop-users and a smaller value for mobile.
Since you can't target variable values inside media-querys in SASS, I cannot think of any easy way, but maybe you have a different solution.
As kind of a workaround, I tried targeting my divs via media-query and overwriting the padding-attributes, like so:
#media #{$small} { // This is for desktop
.l-header, .l-menu, .l-submenu, .l-main, .l-footer {
padding-left: 3em;
padding-right: 3em;
}
}
But it's not really a nice solution since then I cannot maximize a nested grid-element inside another grid-element (because the padding of the parent div). Hope you understand my problem.
Related
In the Odoo 15, I realize that the width of the label for the field is too wide. When I inspect the element in the browser, the CSS that causing this behaviour is this one:
#media (min-width: 992px)
.o_web_client:not(.o_chatter_position_sided) .o_action_manager .o_content .o_inner_group .o_td_label,
.o_web_client:not(.o_chatter_position_sided) .o_action_manager .modal-content .o_inner_group .o_td_label {
min-width: 260px !important;
}
I already try to change some CSS that I think related to this behaviour from the source code, but still not working. How to change this default width?
Are you using web responsive module ? If yes, look at
web/web_responsive/static/src/legacy/scss/web_responsive.scss
file as well to make same changes as you did.
Otherwise, changing min-width should work fine
Note: Do not edit at source. Make a new module, inherit those and change.
I'm new to bootstrap. The control-label class seems to be undocumented at the bootstrap 3 website and i have noticed it just accidentally in the examples.
Could anyone explain it's purpose or guide me where I can get more info on it?
control-label is useful when we create forms. At the time of creation, you may come across in such situation like your text field is just after the completion of label.
So you have to write CSS to make it more attractive.
In bootstrap, they have provided class called control-label whose work is to automatically set the label. So that label and text field looks better and we don't have to write CSS for that.
CSS of .control-label:
.control-label{margin-bottom:0;
vertical-align:middle;
margin-bottom:0;
text-align:right;
color:#a94442;
}
NOTE : Here I have not include padding because padding may vary according to screen size.
If you want to know more about it, just look at that Demo.You will at least get some idea about it.
See http://getbootstrap.com/css/#forms-horizontal
It's for labeling a .form-group. For .form-horizontal it does
.form-horizontal .control-label {
margin-bottom: 0;
padding-top: 7px;
text-align: right;
}
... mainly for right-aligned labels.
I'm using angular-ui bootstrap carousel and would like to change the right and left navigation links with images. It seems that within the tpl they are hardcoded with ‹ and ›
Does anyone have any recommendations on changing these to images without changing the actual angular-ui bootstrap files? I want to keep this in a library and don't want to change it after each version release.
The only solution I had was a hack to make the control of these angle brackets super small in CSS so they couldn't be seen and placed the images.
.carousel-control {
font-size: 1px
}
.carousel-control.left, carousel-control.right {
background: url(/path/to/[image-here].png) no-repeat !important;
}
Is there a better solution?
The goal for the http://angular-ui.github.io/bootstrap/ project is to have customizable templates so if you don't like the default markup you can swap it for your own. If you want to change carousel's look and feel I would recommend overriding the default template (https://github.com/angular-ui/bootstrap/tree/master/template/carousel).
You can easily override individual templates without messing without touching project's deliverables as described here: https://stackoverflow.com/a/17677437/1418796
Im using yiibooster with yiibootsrap in the yii framework. I dont want the site to be responsive so i set responsive to false. The problem is the default container width is too small, 940px. I want to change this to 1045px.
You could change the width set in protected/extensions/bootstrap/assets/css/bootstrap.css here:
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
Alternatively, this is what I'm currently doing, you can override the CSS in your layout. In my protected/views/layouts/main.php I've added this style to the container div like this:
<div class="container" id="page" style="width:99%;">
Hope one of those options is useful to you...
The CSS is in \protected\extensions\bootstrap\assets\bootstrap\css\bootstrap.no-responsive.css
If you look at the css carefully, you will find several places where the 940px is hard coded in the css. This is how you get the 940px.
You can edit this, but I would highly discourage doing so for 2 reasons. First it is highly discourage to hack the standard code. It is better to override it with your theme css. Second, there are other css elements that are tied to the 940px. Changing the 940px in the container css may break other css. To overcome this problem, open up the responsive css, i.e. \protected\extensions\bootstrap\assets\bootstrap\css\bootstrap.css
Search for the word #media
Keep on searching until you find
#media (min-width: 1200px) {
what ever enclosed within the braces are the css elements that tied up to the container size. Copy them and place them at the end of your non-responsive file (or better in your theme css).
Thanks
Edit: My concerns are for mobile websites.
Let me get right to the point. No matter what I do, outline:none; does NOT remove any default highlighting/glows from input form elements using an Ipod Touch/Iphone.
Everywhere I look, people say to use:
input:focus {
outline:none;
}
or
input {
outline:none;
}
.... and that this will remove the glow.... well it doesn't.
Another major problem is that there IS NO DEFAULT GLOW. I create a blank page with no styling and just a form input, view the page via IOS mobile, and there is no glow/outline on the input elements... it is just blank.
The only thing that works is using -webkit-appearance:none; - and that simply allows me to set a box-shadow on the input element. If I am not using the -webkit-appearance:none; - then the box shadow will not show properly.
When viewing this on a desktop browser however, the box shadows work fine even without webkit.
So my question is: why does outline:none; serve no purpose on input elements? I have seen some people say they only work on anchor tags, yet others say they work on input elements. Who is right here? Because so far, no matter what I do, outline:none; is worthless on input elements.
Here is a JSfiddle:
http://jsfiddle.net/QQGnj/4/show/
Viewing this page on iOS mobile, there is no "glow" or default styling to begin with. Where is everyone seeing the default glow behavior which requires outline:none; to work (which it doesn't)? This is driving me mad!
If you use outline:none; please add a focus style. See http://outlinenone.com/.
This feature is very helpful when a mouse isn't used. Outline provides an important accessibility feature, so please, if you must remove it, add back a style for your links focus and active states. Please help users understand where links exist.
Try with this:
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
Use -webkit-appearance: none;
#yourElement:focus {
-webkit-appearance: none;
}
#yourElement:hover {
-webkit-appearance: none;
}
And it will do the trick.
a, :visited{
outline: 0;
outline: none;
}
:hover, :active, :focus{
outline: 0;
outline: none;
}
removed the focused glow for me on Chrome/osx, iphone/mobile safari, firefox/osx
http://jsfiddle.net/toniehock/QQGnj/6/show
In my case in Magento2 it was a border and box-shadow, instead of these things above.
Mobile Safari apparently just doesn't have a default outline style, so you don't have to worry about it. For a guaranteed consistent look in all browsers, desktop and mobile, I would recommend setting outline: none anyways, though.