I am trying to place a div on top of the other. I read through different answers to the questions on this site. But none of them worked for me. I want the search results ('Anton') to appear on top of the table ('Customer').
Below is my code fragment related to the search text box and the results div. (FYI: I am using Laravel LiveWire)
<div class="relative pb-2">
<input
type="text"
name="model-search"
wire:model="query"
wire:keydown.escape="clear"
wire:keydown.tab="clear"
placeholder="enter search text here..."
class="form-control form-control-sm search-box"
>
#if(!empty($query))
<div class="absolute shadow-sm rounded-sm mt-2" style="z-index: 1000 !important;">
#if(!empty($models))
#foreach ($models as $model)
{{$model['name']}}
#endforeach
#else
<div class="list-group-item py-1">No results</div>
#endif
</div>
#endif
</div>
Update 1
Attached screenshot of the code segment of the blade file where the livewire component is used.
Result
CSS
.search-results {
z-index: 1000 !important;
}
Related
I have this card
<div class="card">
<div class="card-body">
<div class="ct">
Health & safety
</div>
<div class="facetHolder mt-3">
<div class="row">
<div class="col-md-9">
<input type="checkbox" /><span class="ml-3 dtext">Properties with additional health & safety measures</span>
</div>
<div class="col-md-3">
<span class="badge badge-primary float-right">10</span>
</div>
</div>
</div>
</div>
</div>
and this is the fiddle https://jsfiddle.net/dzfo41rk/5/
This is how it looks
The text on the right moves too much to the left and occupies the empty space not occupied by the checkbox.
I tried setting the whitespace
.dtext{
font-size:14px !important;
white-space:normal !important;
word-wrap: normal !important;
}
but that is not helping. How can i ensure the text do not overflow to the left to occupy space around the checkbox?
Use label instead of span
Wrap both label and the input with another element.
Use .form-check
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label ml-3 dtext" for="exampleCheck1">
Properties with additional health & safety measures
</label>
</div>
https://jsfiddle.net/odr04tsj/
For more info, read Checkboxes and radios
https://getbootstrap.com/docs/4.6/components/forms/#checkboxes-and-radios
I think you're looking for the property white-space: nowrap; on any text containers. This will prevent the line breaks & force the text to one line.
You need to put your text and checkbox in different columns of row. As now, checkbox with inline-block style looks like a part of text.
Other problem is big paddings of columns. Create them smaller with p-classes or change them with your stylesheets.
And the third thing, as epascarello said, you need labels for the checkboxes.
<div class="col-md-3 px-1">
<input type="checkbox" id="stackCheck"/>
</div>
<div class="col-md-9 px-1">
<label for="stackCheck" class="dtext">
Properties with additional health & safety measures
</label>
</div>
Look at the fiddle: https://jsfiddle.net/7Lfbmj6t/1/
And please, don't use !important without necessary.
I'm making login page and wanted to put icon before select with prepend so it would indicate that you can change language here, when I added it, select width become wrong, it's a little too big on right side (like on screenshot below)
<div class="input-group">
<div class="input-group-prepend offset-2 offset-md-3">
<div class="input-group-text">
<i class="fas fa-globe-europe"></i>
</div>
</div>
<select class="form-control col-8 col-md-6" name="lang" onchange="this.form.submit();">
<optgroup label="Official Languages">
<option value="en" selected="">English (United States)</option>
<option value="pl">Polski (Polska)</option>
</optgroup>
<optgroup label="Community Translations (not checked by us)">
<option value="es">Español (España)</option>
</optgroup>
</select>
<div class="container">
<div class="row">
<div class="col-12 text-center">
<span onclick="window.open(dir+'popup/unofficial-translations','popupUNOFFTRANSL','height=500,width=1000,left=100,top=100,resizable=no,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no, status=no');" style="font-size: 1.8vh" class="text-muted"><abbr>Click here to learn more about unofficial translations</abbr></span>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<span style="font-size: 1.8vh" class="text-muted">Change of language will remove written login and password.</span>
</div>
</div>
</div>
</div>
Since you didn't show your code beside your rendered dropdown, I am going to guess your rest HTML structure.
The one problem I see from your code is you don't have .row when using .col-*. You need to wrap your columns with at least a row. Of course, outside of them you should have a .container.
Secondly you have a .container nested within your <select>, and then you do col-12 inside of it. Why? You can safely remove .row and .col-12 if you just want to create a row that takes up 100% width. Bootstrap <div> for example aready does that.
I assume you have a .container as the most-outter class. You shouldn't have another .container nested within another. You only need one container class per section.
After I clean up your code, your example runs fine:
demo: https://jsfiddle.net/davidliang2008/jk7es2c8/22/
Again, we had no idea how your HTML structure looks like, and since you don't show your code, this kind of answer is what you will get. Or even your OP will be marked as off topic, unclear, etc.
I have a sidebar in my angular app and I am trying to make one div insight the sidebar scoll through the items and the content in the following div keep the same position (no scrolling). I have been looking at so many similar posts and tried everything but it just wont work. The problem is that either can you scroll through everything in the sidebar or not at all or that the bottom stayed (without moving) but then i the scrollbar was there for EACH item (and not for all items).
I used ng-repeat to put items on scope of the sidebar - is it perhaps different with angular that with reg. html?
Thanks!!
Ps. Im using gulp and the sidbar is a directive which I didnt include here. If anything is of importance, please let me know and I include it.
<li>
<a ng-click="openNav()"><i id="cart-icon" class="medium material-icons icon-design">shopping_cart</i></a>
<div id="mySidenav" class="sidenav closebtn" click-anywhere-but-here="closeNav()" ng-click="closeNav()">
<div class="sidebarBox">
<h2 class="sideBarHeader">Cart </h2>
<div class="sidebarContainer" ng-repeat="item in cart">
<img src="{{item.imageUrl}}" style="width:90px;height:100px;">
<div class="sidebarContent">
<p class="sidebarTitle">{{item.title}} </p>
<p class="sidebarSubtitle">Quality: {{item.quantity}}</p>
<p class="sidebarSubtitle">Price: ${{item.price}}</p>
</div>
<p class="sidebarLine"></p>
</div>
</div>
<br>
<div class="sidebarNoScroll">
<p style="color:black;font-size:22px;">Total</p>
<p class="sidebarTotal">${{ total() }}</p>
<button class="sidebarButtonContinueShopping" id='continue-shopping-button' ng-click="closeNav()">Continue Shopping</button>
<button class="sidebarButtonViewCart" ui-sref='cart' ng-click="closeNav()">View Cart</button>
</div>
</div>
</li>
css.
.sidebarContainer {
overflow:scroll;
height:224px;
}
.sidebarNoScroll {
overflow: hidden;
}
Wrap the container.
<div class="sidebarContainer">
<div ng-repeat="item in cart">
</div>
</div>
I have a popover code that is working fine. However when the popover is inside a div, then it stops working.
<section class="content-section">
<h2>What Are They?</h2>
//this popover is working
<p>Also known as <span class="glossary-term-pop" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="(aka Research community) pronounced 'M-Rock'. One of the terms used for a research community." title="" data-original-title="MROC (Market Research Online Community)">MROCs</span> (Market Research Online Community) the commun only, Webs.</p>
</section>
<hr />
<section class="content-section">
<h2>Pros and Cons</h2>
<section class="tabs" style=' margin-top:15em;'>
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1">Pros</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2">Cons</label>
<div class="content less-stuff">
<div class="content-1">
<h3>Pros</h3>
//this popover is NOT working
<p>Communities are usually larger than any set of <span class="glossary-term-pop" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content="(aka Focus Group Interview or Group D with fewer participants - possibly 4-6." title="" data-original-title="Focus Group">focus groups</span>. This can allow minority opin-minded participants to take place - rich data that would never emerge in a focus group setting.</p>
</div>
<div class="content-2">
<h3>Cons</h3>
<p>Qualitative-nflection is lost.</p>
</div>
</div>
</section>
</section>
Here is the JSFIDDLE: https://jsfiddle.net/erkaner/46awL808/2/
You will see two words with blue background, first one is showing popover, but second one is not.
Does anyone have any idea how to resolve this issue?
It's side effects of your css selector.
Updated fiddle
Just use the right selector on your markup, I just replace section.tabs .content div with section.tabs .content > div, then it worked.
I am new to Twitter Bootstrap and am starting to fumble my way through its use. While certain aspects of the framework are starting to make sense I am still struggling with form styling. I am trying to setup several different sections of a form which will have elements that are styled utilizing .form-inline. In one such instance I am also attempting to use .input-append with little luck.
<div class="row">
<div class="well span12">
<div class="row">
<div class="span12 form-inline input-append">
<label for="assetSearch">Asset Search</label>
<input type="search" id="assetSearch" placeholder="">
<span class="add-on"><i class="icon-search"></i></span>
</div>
</div>
<div class="row">
<div class="span12 form-inline">
<label for="service">Service</label>
<input type="text" id="service" autocomplete="off" />
</div>
</div>
</div>
</div>
The above markup renders like this:
As you can see "Asset Search" is not inline with the form input. If i remove the .input-append class from the containing div things line up. However, the search icon is no longer embedded in the text box, but instead to the right of text box.
How can I use .form-inline in cunjunction with .input-append?
You should not put inside a input-append (or prepend) anything else than inputs, buttons or .add-ons (this might not be exhaustive).
Try wrapping the whole thing into a div.input-append and let the .form-inline handle the floating : Demo on jsfiddle
<div class="span12 form-inline">
<label for="assetSearch">Asset Search</label>
<div class="input-append">
<input type="search" id="assetSearch" placeholder="" />
<span class="add-on"><i class="icon-search"></i></span>
</div>
</div>
Here's a fiddle of working alignment: http://jsfiddle.net/Jeff_Meadows/xGRtL/
The two fixes are to set vertical-align of <label> elements inside elements of class .input-append, and to reset the font-size of your element to 14px (it's set to 0 somewhere else in bootstrap). Rather than create a rule based on .input-append, I created a new class that you can add to your containing element. That way, you won't get unexpected results elsewhere.
.input-prepend label, .input-append label {
vertical-align: middle;
}
.fix-text-spacing {
font-size: 14px;
}