I'm working with Bootstrap's Typeahead and adding the input like so:
<div class="row">
<div class="span12">
<form class="centered">
<input id="main_search" type="text" class="search-query my-search" data-provide="typeahead">
</form>
</div>
</div>
I have the following CSS code which essentially just expands my search box to be "long" and in the middle of the span:
.centered {
text-align:center;
}
/* Make the main search box wider */
.my-search {
width: 80%;
}
My question is, when I use the Typeahead, the auto-completed results are only as long as they "have to be" to display the entire word/phrase whereas I want them to be as long as the actually input box. Basically like what you see on Google.com with their Instant Search functionality.
This closed issue suggests I should be able to manipulate the CSS to achieve what I want to do, but I'm not great at complex CSS and I'm struggling to get the inheritance just right to get any CSS to actually apply to the correct element. On top of that, I'm unsure how to make sure the dropdown-menu inherits the input's length (so that it'll work despite browser resizing).
Thanks for any help that you can provide!
Current code:
JSFiddle
Without you posting your code or a link to the working example, this is just a guess, but try this CSS
.my-search, .typeahead.dropdown-menu > li {
width: 80% !important;
}
Related
Just curious if there is a way to get a tighter layout with bootstrap.
Why is there so much space between the text elements?
Is it all just to accomodate pads, phones, etc?
Is there any way to choose a tighter style for the entire page to default to?
I also think the edit boxes themsselves are too large. There is too much wasted space between the text and the edge of the box.
Why aren't they a bit tighter?
These edits have been added after attempting to use code in answer from NetworkNerd
I have added the following to my stylesheet.
input[type=text]{
padding-top:0px; padding-bottom:0px;
margin-bottom:0px; /* Reduced from whatever it currently is */
margin-top:0px; /* Reduced from whatever it currently is */
height:24px;
}
Those additions make my form look like the following:
You can see that things got a bit tighter, but that is only because of the height:24px style.
The other changes do not seem to have any affect on the look.
By the way, the stylesheet which includes this change is the last one included.
Labels Are Not Aligned
Also, notice that now that I've changed that the labels are not aligned with their associated text input.
Still Too Much Margin Between Text Boxes
And there still seems to be too much margin space between the text boxes.
HTML Code Snippet For Title
Here's a snippet of the HTML which shows the HTML with the applied Bootstrap styles.
This was all just copied from samples on the bootstrap site.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="titleText" class="col-sm-2 control-label">Title</label>
<div class="col-sm-6">
<input id="titleText" class="form-control" type="text" ng-model="book.title" />
</div>
</div>
Bootstrap doesn't recommend editing bootstrap.css itself. It is recommended per best practices to modify the bootstrap style in another, dominant CSS file.
Try doing something like this:
Custom CSS
input[type=text]{
padding:0px;
margin-bottom:2px; /* Reduced from whatever it currently is */
margin-top:2px; /* Reduced from whatever it currently is */
}
It's hard to tell from the picture if it's a margin on the top or bottom. You can remove the margin-[top|bottom] based on what the result of your testing is.
It's also possible that the input element isn't the one with a margin, it could be the label element instead (Bootstrap, at least in my experiences, does some strange things with the label element...)
Another edit: I like to give people options. Therefore, if this is in a table element, consider adding the table-condensed class to the table tag to reduce some of the whitespace between items, as shown below:
<table class="table table-condensed">
In Bootstrap 4 you can use the form-control-sm class. See https://getbootstrap.com/docs/4.1/components/forms/#sizing
This is taken directly from the Bootstrap documentation,
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
Prior to Bootstrap 4 you could use input-sm. See https://getbootstrap.com/docs/3.3/css/#forms-control-sizes
You can go into the bootstrap.css and find the padding and margin values and change them around or do that in another stylesheet
In my app I have situations where I need to use what I and some frameworks call a "post-link". Basically a link that might be used to delete (or post) data with it and as such must actually be a a form.
I'm using bootstrap as my base css and have assigned the link class to the submit button to give it a link appearance. When using in a table with another, ordinary, <a> tag next to it I can't seem to get the two links to align alongside each other, no matter how wide I make the viewport or table cell.
Here is a fiddle to demonstrate: http://jsfiddle.net/miocene/dbTqC/670/ I'm referring to the pencil and cross icons as my normal link and post-link.
Any ideas how I can get them to align side-by-side?
You either need to define a width for the td or use this. I gave the div in the td a class .lol
DEMO
<td>
<div class="btn-toolbar inline lol">BLAH BLAH</div>
</td>
.lol *{
display:inline-block;
float:left;
width:50%;
}
.lol .btn{
padding:2px;
}
I am developing a wysiwyg page using javascript (no libraries) and because it has a fairly specialised application it has to be custom built rather than off-the-peg.
I have, surprisingly, got a long way and it is pretty much complete but I am having some difficulty getting the display right.
I have a div which contains text and images with the images floated right so the text flows around them.
In some places I need the images centred, so I have inserted a div to contain them.
The code bellow illustrates this and it works well.
The problem arises if I have more than one div containing the centred images because the ID of those centreing divs is the same.
If I change the centreing divs to a class the images don't centre but assume the right float of the parent div.
Is there any way to overcome this?
Is there any real issue having multiple divs with the same id?
I'm not worried about supporting any browsers other than FF.
Any advice would be very greatly appreciated, thanks for reading.
Dim Tim :o)
#details {
width: 698px;
background-color: #FFC;
}
#details img {
float: right;
}
.centreimage img {
float: none;
}
.centreimage {
float: none;
text-align: center;
}
<div id="details">
<p>Some text here</p>
<img src="10750bath.jpg" height="166" width="250">
<p>Which flows around the image on the right</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>The next image should be centred</p>
<div><img src="10750bath.jpg" width="250" height="166" class="centreimage"></div>
<p>more text</p>
<p>more text</p>
</div>
Thank you all for your help.
Even when I changed the CSS and HTML to be a class the images still failed to centre.
The answer was in the clue from Pekka and specificity was the cause.
The specificity rules give an ID a higher priority than a class.
The "details" div had an ID but the "centreimage" was a class.
I changed the CSS for "details" to a class (& the markup of course) and it now works.
Can't believe that I spent at least 10 hours trying to sort that out so thanks to everyone for their help.
(Now you know why I am "Dim Tim") :o)
Yes, it's invalid to have multiple divs with the same id.
Using a class should work fine:
div.details {
width: 698px;
background-color: #FFC;
}
If those rules really get overridden, you probably have another rule in place that has higher specificity. In that case, you would have to show us more of your HTML.
You shouldn't have more than one element with the same id. This is invalid and will give undefined results.
If you change your div id to a class, you need to change the CSS appropriately to target the class rather than the id. The purpose of CSS classes is exactly that - targetting multiple, related elements and applying the same styles.
As long as you are targetting the elements correctly, there will be no difference to the result.
As you should know every id should be unique. In your example output seems to be a small error. Try to set the class attribute to the div and not the image. If you don't have dome good reasons you should better everytime the class attribute.
Now is the text-align set for the children of your image e.g. that would be the alt value if the image could not be loaded.
I have a jqGrid which works fine when displayed on a page on its own.
If I try to display the same grid inside jQueryUI tab, it still works fine – except that font size is wrong. What is happening is this:
When everything is working on a standalone page, the font size is picked up as follows:
Inherited from div#gbox_datatable.ui-jqgrid.ui-widget.ui-widget-content.ui-corner-all, in file ui.jqgrid.css line 2
.ui-jqgrid{
font-size:11px;
}
When the grid is placed inside a jQueryUI tab, howerver, it is overridden by a higher priority CSS command as follows:
Inherited from div#gbox_datatable.ui-jqgrid.ui-widget.ui-widget-content.ui-corner-all, in file jquery-ui-1.8.9.custom.css line 60
.ui-widget .ui-widget{
font-size:1em;
}
In other words, the fact that I have a ui-widget inside another ui-widget is overriding the desired font specifier.
How can I avoid this overriding?
I found same question at here without any answers.
Any help will be appreciated...
ui.jqgrid.css has the following definition
.ui-jqgrid {position: relative; font-size:11px;}
So if you add class "ui-jqgrid" to the div which holds the tabs the problem will be solved:
<div id="tabs" class="ui-jqgrid">
<ul>
<li>Results</li>
<li>Software</li>
</ul>
<div id="results" class="tabcontain"></div>
<div id="log" class="tabcontain">
<table id="grid"><tr><td></td></tr></table>
<div id="pager"></div>
</div>
</div>
In the example above div with two tabs will be used: one with some general information and another with the the id="grid".
One more simple way will be just set
html, body { font-size: 75%; }
which set will reduce default font size of the page (1em) to the same which jqGrid uses (11px).
See one more way in the resent question.
I've got a DIV I want to hide, but I cannot give it a specific ID... actually I cannot change the text of the DIV, since it is retrieved from a database, but I can add some html before it AND I know the exact text content of the DIV.
It's something like:
<div class="this_div">content_of_this_div</div>
So, I thought that maybe looking for the specific content, then taking the div and incapsulating it in a hidden div could work... or something similar... any idea?
thanks
If you can insert other HTML around it then you can use another div to hide it
Using CSS and HTML
.hidden { display: none; }
...
<div class="hidden"><div class="this_div">content_of_this_div</div></div>
Using HTML and Inline CSS
<div style="display: none;"><div class="this_div">content_of_this_div</div></div>
Wrap it in your own div would seem most sensible.
<div id="mydiv">
<div class="this_div">content_of_this_div</div>
</div>
then hide your div:
document.getElementById("mydiv").style.display="none";
Or, use jQuery. If that is only instance of class, you could do
$(".this_div").hide();
If you just want to be able to select it without giving it a specific id, you can do a number of things. Make an empty div with an id before, then use the direct sibling selector:
#divid+div {}
or use many other css selectors to accomplish same
But I do reccomend the aforementioned external div technique over this