Hi i am using twitter bootstrap. I have used typeahead in my model window. My Problem is when I type in textbox the dropdown is coming perfect but its coming at very bottom of textbox. I have observed that there is attribute top set when drop down is coming. But I don't know how to change that at run time.
Here is the Image:
I am not good in CSS. Can anybody tell me that what should do to resolve this problem ?
You need to override some of the default styling of the typeahead class in bootstrap. Specifically, I am able to get it to appear properly by setting the position to relative and the z-index to 10000. The position property requires that you use the !important declaration.
.typeahead {
position:relative !important;
z-index:10000;
}
See my working fiddle at http://jsfiddle.net/technotarek/Msttw/.
Note that my typeahead values are the color of the rainbow in case you're having trouble triggering it.
Also, depending on your exact form layout, you may have to adjust the positioning of the typeahead element for your own situation by using the top/bottom or left/right CSS properties.
Related
I was trying yo use Ng-bootstrap 'ngbPopover' feature but it wasn't working. The popover would not appear after clicking the button. After hours of debugging I finally found the cause of my problems.
It was the css transform property in the parent component.
After research I have come to the understanding that the transform property does indeed affect the css position property of child elements (see: stacking context), and it seems that for the case of the ng-bootsrap pop-over it makes the component not work as it should.
To overcome this I added position: relative in the css of pop-over button container and it worked.
I have tried every way I know how (and failed) to properly set the width on a kendoAutoComplete. My latest attempt (below) is JS based, but I've also tried numerous CSS solutions.
The issue I'm seeing is that no matter the width I choose, the actual input area remains a consistent width, and then there is a weird gray area to the right:
Here's the hover state (the gray box disappears):
But don't be fooled by the appearance of a large text box. Here's what happens when you begin to type:
I've tried:
var autoComplete = $("#gridFilter").data("kendoAutoComplete");
autoComplete.list.width(400);
And
autoComplete .wrapper.css("width", "300px");
And...various CSS solutions.
Why must it be so hard to set the width of a silly auto complete? What am I missing here?
I want the width of my auto complete to be 100% to fill its container.
Bonus points if you can help me understand why Telerik consistently makes me want to hurt myself.
EDIT
OK, I've (partially) figured it out. I temporarily removed bootstrap CSS from the page and the input works as expected.
If I find the offending CSS, I'll post an answer here.
As mentioned in the edit above, default Bootstrap CSS was conflicting with the styling. Specifically, the max-width property. The CSS below fixed it:
<input id="gridFilter" style="max-width: 10000px; width:100%;" />
I am having an issue with the layout of my website in Firefox it works in Chrome. It is also hard to show you my code because I am using some plug ins to add elements so it is not just in normal HTML. The images inside the table cell are being displayed full size in Firefox which is messing up my layout.
I was playing around with the inspector and I saw that if I untick display:table cell the layout goes back to how I want it.
Could I please have a pointer of how to override this in the CSS?
The default value of the display property depends on the specific element, but for layout elements it is most likely block. Therefore you can use display:block to reset the value to its cascading default.
I am using Bootstrap to create my user interface.
I have a navbar that is relatively tall; the default height of the navbar is 50px and my navbar is 100px. When I render a split button, the menu drop-down doesn't respect the navbar height (the link below illustrates the problem). How do I fix this so that the dropdown renders beneath the button (and not beneath the navbar)?
Also, if anyone has a suggestion on how to get rid of the gap in the middle of the button group, that'd be awesome too!
Clarification
I'm using SASS so I didn't realize that the link that I pasted didn't illustrate the problem. I compiled my CSS and put it in the JSFiddle link. Unfortunately, the CSS file there is huge.
If you're using BootStrap with LESS or SASS, I adjusted the $navbar-height variable to 100px (instead of 50px).
In any case, I'm hoping for some guidance on what the Bootstrap Way™ of adjusting things like the navbar height so this stuff works.
(Old link that doesn't illustrate the problem)
http://www.bootply.com/yOrqxaoM2t
(New link)
http://jsfiddle.net/marvery/VpL9N/1/
ok it looks like the issue is not with the navba height its with the margin you have set margin-bottom:33px on .navbar-btn- that needs to be removed.
.navbar-btn {
margin-bottom:0px;/* should be zero bootstrap default btn margin- remove yours */
}
that is moving the dropdown to be 33px lower than the default
fiddle link
In the past days I switched my menu to mobile friendly version. Is nearly done so far, only one issue remains: In the desktop version I've positioned the submenus absolutely so that they cover what is below when made visible. However, in the mobile version I would like to have them in regular textflow, so that what is below slides down when I make them visible. I'm using mediaqueries and have tried to set the position attribute to "static" but this didn't work:
#Navigation li ul {
position: static;
display: none;
}
My test page: http://ulrichbangert.de/indexr3.php (Resize the viewport to a small width until the menu has one column.) I've used this tutorial: http://www.menucool.com/ddmenu/create-mobile-friendly-responsive-menu.aspx where it works just as I want it to. However I cannot use this one-by-one as I wanted to keep the layout of my existing menu. Best regards - Ulrich
In the meantime I was able to solve this problem on my own: Apparently some CSS attributes cannot be changed when they are in a nested list and not on top level. In this case the attribute position. Afterwards I had the same problem with the attribute width which I could not change to 100% and the attribute padding-left which I could not change either. And some years ago when I implemented the initial version of this menu with the attribute height, which I could not change to auto on hover after setting it to 0 initially. Only setting to a fixed height worked.
How can this be? Is it intended or is it a bug in the browsers implementation? (I tested with firefox).
Anyway my menu works fine now, just as I figured it.