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.
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 have code mirror working in a dialog but the line numbers and gutter spacing seems to be over the first 5 characters of the text.
as soon as you start typing the number jump to where they should be but the gutter part still stays and overlaps the content as you type
This only happens on dialogs, when i add the code mirror to normal page (out side of a dialog) it works 100%.
And reason why this is happening. I have added ‘refresh: true’ to the option and still does not help.
Thanks
Was searching everywhere and could not find any answer.
Ended up using this and works perfectly.
https://github.com/run-ze/vue-ace
The following CSS fix CodeMirror on Quasar Dialog
<style >
.CodeMirror-lines {
padding-left: 25px
}
</style>
Because I'm using a logo in my header, I don't need the title-text. But I would like to have a browser-title.
So I need to set a title and have to hide it in the header - but how?
Possible also to hide the title text with a proper CSS display: none setting. It can be put into the conf/userstyle.css file, so it wont be overwritten by updates. The text resides still in the page but becomes invisible. It may improve the search-engine hits also, maybe.
Possible CSS code:
div.headings h1 span { display: none !important; }
I assume that your wiki looks like dokuwiki.org (meaning that you are using one of recent versions and default template). If not the approach still should be the same, search for $conf['title'] in your template.
There is a block in lib/tpl/dokuwiki/tpl_header.php:
// display logo and wiki title in a link to the home page
tpl_link(
wl(),
'<img src="'.$logo.'" '.$logoSize[3].' alt="" /> <span>'.$conf['title'].'</span>',
'accesskey="h" title="[H]"'
);
Remove <span>'.$conf['title'].'</span> from it.
Each update of Dokuwiki engine will overwrite this change. You'll need to repeat it manually after each update or copy paste doku template into a new one and update this new template manually.
Possible also to hide the title text with a proper CSS display: none setting. It can be put into the conf/userstyle.css file, so it wont be overwritten by updates. The text resides still in the page but becomes invisible. It may improve the search-engine hits also, maybe.
Possible CSS code:
div.headings h1 span { display: none !important; }
This is the good answer. It works for me.
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
Hi I am using twitter bootstrap for my website. I have put dropdown in collpsable which is in modal window. My problem is the dropdow I have put in collaspable inner, it cutoff the menu. Here is that Image
It should show like this :
I have tried by changing the z-index attribute but unable to show it. Can anybody know what is the problem?
I beleive the css it is using is the .dropdown-menu class whose position is set to absolute. If you change the position to relative it will give you the behavior you desire.
So you could isolate this change in your own .css file so you don't touch the main bootstrap.css file so its easier to update without breaking your styles.
So perhaps something in a custom.css:
.dropdown-menu {
position: relative;
}