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.
Related
On my Vue.js application i have tried CKEditor, tiptap, Froala etc. and every one of them prints out all html tags and all inline css styles.
Some images for better understanding what is a problem:
image for better understanding
image with described problem
blog form
I have searched web and found verly little info about this so if anyone know why is this happening please help me out :)
Kind Regards,
Sinisa
you should use v-html and put your text variable inside the element like this:
<p v-html="yourTextVariable"></p>
by the way if you use v-html u probably need to make text appear on next line instead of overflowing (overflowing text is common issue that happen when u use v-html) :
p{
color: #eeeeee;
text-align: justify;
white-space: initial;
overflow-wrap: break-word;
}
When I add the search block to the topnav in Bootstrap Theme, the login button is "broken"
ZK2.0.13 with Bootstrap Theme. When the block is added, the user login appear in a new line (example)
I expect see topnav in a single line.
I found an answer for you. What I did was set up the page as you had it and then viewed it in Chrome. The app has some really nice dev tools for experimenting with css. Choose View->Developer->Developer Tools (Cmd-Option-I on a mac). From there right-click on the search box and choose inspect. You can then see on the right panel all the css that is affecting your element and see how the html gets laid out. I noticed that the search box was wrapped in a div with an input-group style so that was the one I wanted to mess with. I found if I added the below code it does what you want:
.input-group {
position: relative;
display: table;
border-collapse: separate;
float: right !important;
width: 200px;
padding-top: 6px;
}
The last three css commmands are the change that makes the difference. To fix the Bootstrap theme I went to themes/BootstrapTheme/Resources/public/css/style.css and added the above code to style.css. Don't forget to delete the cache folder in /var/cache (either prod or dev) before you test it out.
One concern I have with this solution is that .input-group might get used elsewhere and this may interfere. A quick inspection didn't show it being used anywhere else except the search box. If it is somewhere else, you will have to create your own theme (not hard) and manually write some code.
Thanks Paustian. It's working.
I have edited the file: Resources\ZikulaSearchModule\views\Block\search.html.twig in order to change the css class to "myInput-group". Then I have edited Resources/public/css/style.css and add your changes to the file.
Thanks for all guys.
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
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.
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.