I currently building a custom dropdown component in Angular 4.x, this is its template:
<div class="vet-input-container vet-input-container--select" [ngClass]="inputClass()" [ngSwitch]="type">
<div class="vet-input-area" (click)="toggleOpen($event)">
<button tabindex="-1" type="button" mat-raised-button color="primary" class="vet-input-label vet-btn vet-btn--fit" *ngIf="labeled">
<i [ngClass]="labelIconClass"></i>
</button>
<input type="text" class="vet-input">
<i class="fa fa-caret-down vet-input-dropdown-icon"></i>
</div>
<div class="vet-input-options">
<div class="option" *ngFor="let item of collection">
{{displayFn(item)}}
</div>
</div>
<div class="vet-input-errors">
<ng-content></ng-content>
</div>
</div>
My issue is when i open the "options div", this element is overlaped by others elements sibling than mi custom component. I know about the z-index, but put this on my component, force me to check other sibling elements everytime, and this makes a not reusable component.
I inspected semantic.css and bootstrap dropdown components and these have a z-index style defined in elements within the component and this makes me feel confused.
On the other hand, check angular 2 material select and this is put in a overlay elements, in this way it makes sense that the custom select overlay all elements.
Please, need an explication about how the drowdowns of semantic.css and bootstrap overlay all sibling elements, no matter the level.
UPDATE: I tried replacing my template with semantic-ui and ng-primefaces dropdowns component, but both are overlaped by sibling components.
This the layout that contains my custom inputs and selects components. Sibling input is overlaying the select options.
<div class="flex flex-col-layout ai-stretch">
<app-dnj-input placeholder="Nombre de su veterinaria" formControlName="branchName">
</app-dnj-input>
<app-dnj-input placeholder="Nombres" formControlName="veterinarianName">
</app-dnj-input>
<app-dnj-input placeholder="Apellidos" formControlName="veterinarianLastName">
</app-dnj-input>
<app-dnj-input placeholder="Correo electrónico" formControlName="veterinarianEmail">
</app-dnj-input>
<app-dnj-input placeholder="Repita su correo" formControlName="veterinarianConfirmEmail">
</app-dnj-input>
<app-dnj-input placeholder="Contraseña" formControlName="veterinarianPassword">
</app-dnj-input>
<app-dnj-input placeholder="Repita su contraseña" formControlName="veterinarianConfirmPassword">
</app-dnj-input>
<app-dnj-select placeholder="rol" formControlName="veterinarianRole"[collection]="roleList"
[displayFn]="displayRoleFn">
</app-dnj-select>
<app-dnj-input placeholder="rol" formControlName="veterinarianRole" type="select" [collection]="roleList"
[displayFn]="displayRoleFn">
</app-dnj-input>
</div>
Give the vet-input-container position: relative and then the menu options should be given position: absolute and z-index: 100 (the amount doesn't really matter, as long as its higher than the rest of your content).
Related
I'm using ejs templates for my webpage, and I'm having layout troubles.
I have a button inside a <div> that's set to display:none as a dropdown, and should show up when the container is hovered over. Instead, the buttons that should be in the dropdown are rendered outside of it and have seemingly no relation to it.
Source ejs file:
<button class="mdc-button mdc-button--raised dropdown" id="clear">
Clear
<div class="mdc-card dropdown-content">
<p>Test</p>
<button>TestButton</button>
</div>
</button>
And the resulting page according to chrome's element viewer:
<button class="mdc-button mdc-button--raised dropdown" id="clear">
Clear
<div class="mdc-card dropdown-content">
<p>Test</p>
</div>
</button>
<button>TestButton</button>
The <p> tag still displays correctly
I don't believe you can put a button element within a button element.
Try it out on MDN here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
This is the example input I put into their live editor. When you inspect the button, you'll get the same output as you've shared in your post.
<button class="favorite styled"
type="button">
<button>Hello</button>
Add to favorites
</button>
Depending on where you need the button, you could try styling the outside or inside element to look like a button as a work around!
I'm new in HTML and CSS. In fact, it's my first site I build in my learning. Why doesn't :hover effect work on the class I've pointed it to?
I'd be really thankful for every help. But please explain, don't just show me "how to".
I'm trying to get the search_type selector getting visible only after hoovering the "search" button
Thanks in advance. (Here's the edited to be simpler code)
https://codepen.io/_Hiderr/pen/WNNdJdo
Like so: https://codepen.io/bjorniobennett/pen/OJJzZrX?editors=1100
The basic behaviour of :hover is that it can affect itself and the elements inside of it, or the next adjacent sibling . So I wrapped the search button and the select element in it's own container, and placed the :hover on the container itself. By placing the :hover on the container, you can now manipulate it's children.
<div class="search-container">
<select class="search selector" name="search_type">
<option value="">Videos</option>
<option value="search_users">Channels</option>
</select>
<input class="search button" type="submit" value="Search" />
</div>
Seems that your css selector has no match in the markup:
search.button:hover ~ .search.selector
would match any element like this:
<button class="search button">Search</button> <span class="search selector">Selected</span>
See: https://codepen.io/andreaslangsays/pen/RwwxyEN
I would like to recreate the following Dropdown from Semantic UI, in which a <label> is inserted for the dropdown menu using UI React:
(https://semantic-ui.com/collections/form.html#dropdown)
This is the markdown I'd like my React app to create:
<div class="ui form">
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
I'm struggling to accomplish this with the React UI implementation of Semantic UI.
My current attempt is this:
<Dropdown placeholder='What grade is your child in?' fluid selection
options={ grades }
labeled={ true }
name={ `survey_response[grade_${this.state.id}]` } />
It's very important that this is labeled clearly. I've found in user research that the placeholder is confusing as a question prompt alone.
There is documentation for adding a label, however, it requires nesting child components under Dropdown component, which interferes with my use of the "options" prop. Error is as follows:
Warning: Failed prop type: Prop children in Dropdown conflicts
with props: options, selection. They cannot be defined together,
choose one or the other
Thank you, Stackoverflow!
If you are using it inside a Form you can do:
<Form>
<Form.Dropdown
label='Gender'
options={//your array of options}
selection
/>
</Form>
I have the following html:
<li class="list-group-item li-tab-1">
<div class="list-group-item-desc" data-target="#tab-1" data-toggle="tab">
<strong>1</strong>
<div class="small m-t-xs">
<p>Description</p>
</div>
<div class="onoffswitch">
<input type="checkbox" checked="checked" class="onoffswitch-checkbox" id="tab-1-enabled" /> <label class="onoffswitch-label" for="tab-1-enabled"> <span
class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</li>
This is a Bootstrap tab. .onoffswitch is a CSS3 switch.
I'm trying to make the entire <li> clickable to show #tab-1 as the tab content. I can do this by defining a <div> with the data-target and data-toggle attributes. This works - when I click the div the tab shows.
However, embedded inside the <li> is a CSS3 switch. I want that to work independently of the clickable div.
This is similar to Links inside of larger clickable areas (CSS Only), except the nested clickable elements are CSS3 switches instead of anchors.
Using the CSS3 switch outside the anchor works fine.
I tried making the actual hidden checkbox visible, removing the CSS3 styling, and clicking that. That does work, so is this related to CSS3?
I wondered if this is related to propogation - the trouble is that if I set an event listener for control.select or change I get no events - just the div click event.
Turned out it was propogation that was the problem (thanks #TW80000).
$(".list-group-item-desc").click(function(ev) {
var isSwitchClick = $('.onoffswitch').has($(ev.target)).length > 0;
if(isSwitchClick) {
ev.stopPropagation();
}
});
That checks whether the click was inside the switch, and if so stops propogation.
In reality I have since moved the Bootstrap tab attrributes into the <li> but I think either approach should work to avoid swallowing the event.
I have this site:
http://www.les-toiles.co/shop/amandine-dress/
I put a picture to understand better what I want.I want to position these sights integral to be in line with the "in stock".
This is code HTML:
<div class="single_variation_wrap" style="">
<div class="single_variation">
<p class="stock in-stock">Only 2 left in stock</p>
</div>
<div class="variations_button add-cart">
<div class="cart-number">
<span></span>
<div class="quantity">
<input type="number" step="1" name="quantity" value="1" title="Quantity" class="input-text qty text" size="4" min="1" max="2">
</div>
</div>
<button type="submit" class="button single_add_to_cart_button alt btn-block">
<i class="icon-cart2"></i>
Add to cart
</button>
</div>
<input type="hidden" name="add-to-cart" value="1726">
<input type="hidden" name="product_id" value="1726">
<input type="hidden" name="variation_id" value="1922">
</div>
How can I resolve this with CSS?
I tried to add this CSS code, but unfortunately not working
.cart-number {float:left;display:inline-block;}
this is not just an easy quick thing that you can get. There are much more things that need to changed. Let me see how far can I explain. Refer the attached images. For this, you should use the 'Chrome Dev Toolbar' or Firebug of Firefox, so that it helps.
First, the div block of your Wishlist button is completely outside the FORM element. So you can't make it inline, unless you move it inside the FORM element. See the 1st Image.
Now I have moved the DIV block of your Wishlist button inside the FORM element and have modified CSS for many classes and DIVs, definitely as INLINE, for demonstration. You need to really work hard to put this as modular as possible. I am sure you'll figure that out. In the next image, You'll see the effect as you wanted and see the CIRCLED section for the added or edited CSS code
Add display:inline-block; to both .button and .cart-number. It tells the elements to position themselves on the same line, and hopefully with this method you should't need to use float.