有没有其他人遇到过 Twitter Typeahead 搜索栏样式问题? [英] Has anyone else run into problems styling Twitter Typeahead's searchbar?

问题描述

我很难为 Twitter Typeahead 的搜索栏设计样式.添加 Typeahead javascript 似乎向我的搜索栏添加了三个新类，.twitter-typeahead、.tt-hint 和 .tt-input>，每个人都以不同的、奇怪的方式行事.

I'm having an incredibly difficult time styling Twitter Typeahead's search bar. Adding the Typeahead javascript seems to add three new classes to my search bar, .twitter-typeahead, .tt-hint, and .tt-input, which each behave in different, bizarre ways.

首先，在添加 Typeahead 后，搜索栏的背景设置为透明，即使我使用不同的类将其设置为白色，因此我不得不添加一个白色背景包装器，其中包含所有三个新类.给 .typeahead width: 100%;高度:100%；border-radius: 20px;使其适合包装器的边框半径和高度，但它比包装器短约50px..tt-input 完美地适合高度和宽度，但显然是使背景透明的原因，因为 .tt-input 和 之间的差异约为 50px.twitter-typeahead 是背景的颜色，而不是白色的包装.最后，.tt-hint 只服从颜色.它是白色的，但是当我尝试设置边框半径、高度或宽度时它没有响应.

First, the background of the search bar was set to transparent after I added Typeahead, even though I had set it to white with a different class, so I had to add a white background wrapper, which contains all three new classes. Giving .typeahead width: 100%; height:100%; border-radius: 20px;fits it to the border-radius and height of the wrapper, but it's about 50px shorter than the wrapper. .tt-input fits the height and width perfectly, but it's apparently what is making the background transparent, because the about 50px of discrepancy between .tt-input and .twitter-typeahead is the color of the background, not the white wrapper. Finally, .tt-hint obeys only the color. It's white, but it doesn't respond when I try to set the border-radius, height, or width.

如果显式设置这些类的属性似乎不能为它们设置样式，那么我必须得出结论，我无法找到其他正在使用的类.否则，或者 Typeahead 的代码中存在错误.

If explicitly setting the attributes of these classes doesn't appear to work to style them, I have to conclude that there are other classes in play that I can't find. That, or there's a bug in Typeahead's code.

有没有人遇到过这样的事情??有谁知道为什么这三个类可能没有响应 css?我的智商已经不行了.

Has anyone run into anything like this?? Does anyone know why the three classes might not be responding to the css? I'm at my wit's end.

推荐答案

你的 css 被覆盖的原因是因为 Typeahead.js 使用 javascript 添加 css 并更改样式.由于所有这些都是在您的 css 加载到页面之后发生的，因此它优先并且会弄乱您已经做过的事情.

The reason why your css is getting overridden is because Typeahead.js uses javascript to add the css and change the styling. Since all that happens after your css is loaded to the page, it takes precedence and messed up what you already did.

我注意到您正在使用 Bootstrap.检查这个已打开的问题 https://github.com/twitter/typeahead.js/issues/378 不久前，它可以帮助您在使用引导程序框架时提前输入样式.Jharding(维护预先输入的人)确实在该链接中提到了一些有趣的东西:

I noticed your are using Bootstrap. Check this issue that was opened https://github.com/twitter/typeahead.js/issues/378 a while back that helps you go into styling typeahead while using a bootstrap framework. Jharding (the one maintaining typeahead) does mention something interesting in that link though:

有人问:@jharding 如果您对编写官方 Bootstraplibrary"如何重构它以便 CSS 实际上是可控的由用户不诉诸使用 !important 关键字，并让他们决定是否需要 Bootstrap 样式."

Someone asks: "@jharding If you have no interest in writing "an official Bootstrap library" how about re-factoring it so the CSS is actually controllable by users without resorting to using the !important keyword, and let them decide if they want Bootstrap styles or not."

@jharding:将在 v0.11 中成为可能.

@jharding: Will be possible in v0.11.

所以看起来你必须等待更新版本的 Typeaway 才能更自由地设计它.

So it looks like you'll have to wait for a newer version of Typeaway to more freely style it.

这篇关于有没有其他人遇到过 Twitter Typeahead 搜索栏样式问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！