I have a plugin (intro-js) for creating an introductory tour containing a opaque overlay with spotlights on my page divs.
Using the following css rules I try to bring up the element within class introjs-showElement above all other elements.
How can it show the element in css like my desktop browsers? Currently I only see a white box in my css.
.introjs-showElement,
tr.introjs-showElement>td,
tr.introjs-showElement>th {
z-index: 99999998 !important;
}
.introjs-showElement>* {
-webkit-transform: translateZ(1px) !important;
}
HTML Sample of Div Text and Toggle Buttons not showing up (all exist in a fixed header scrollable angular angular datatable plugin)
<td class="td-nopadding ng-enter-fast ng-leave">
<div class="Table-textbox introjs-showElement introjs-relativePosition" ng-attr-id="{{$index==0 ? 'intro-1': ''}}" id="intro-1">
<div class="text-input">
<input class="form-control input-number ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-maxlength" name="ParLevel[0]" ng-model="data.ParLevel" value="1" min="0" max="9999" ng-keypress="filterValue($event)" maxlength="4" ng-blur="changeData();">
</div>
<div class="inc-dec-buttons">
<button type="button" class="btn-number" data-type="plus" data-field="ParLevel[0]">
<span class="glyphicon-plus"></span>
</button>
<br>
<button type="button" class="btn-number" data-type="minus" data-field="ParLevel[0]">
<span class="glyphicon-minus"></span>
</button>
</div>
</div>
</td>
This is a known issue with the library:
https://github.com/usablica/intro.js/issues/532
https://github.com/usablica/intro.js/issues/507
https://github.com/usablica/intro.js/issues/401
https://github.com/usablica/intro.js/issues/123
...to name a few.
The issue is the stacking context and the way that introJs makes elements appear on top:
The library requires all parent nodes of the target element to be in the same stacking context of the body (for example). position: fixed creates a new stacking context (as does transform).
So this issue won't be fixed until introJs adjusts its methodology of making target elements appear on top.
Related
I was wondering if I could add some left margin inside textarea, I want there to be some space because I am using an image icon as my button and thats inside the textarea, when I type the words eventually cover the image.
<div id="inputBox">
<textarea class="txtarea" rows="50" name="Text" Id="Text"> </textarea>
<button mat-button id="send">
<mat-icon>send</mat-icon>
</button>
</div>
always search google first
Web development resource
.txtarea{
margin-left: 20px;
}
I'm trying to build an amp page for my site.
I am trying to achieve a responsive form with a number of range inputs.
So that when the screen size changes they stack nicely, much as I would when using bootstrap.
The code I have is (as a single example);
<div class="form-field" layout="container">
<div class="form-title" layout="responsive">
<span>How much do you need?</span>
<span [text]="[amount]">
£1500000
</span>
</div>
<div layout="responsive" width="auto" height=100>
<input type="range"
name="amountSlider"
min="10000"
step="10000"
value="1500000"
max="3000000"
on="change:AMP.setState({amount: '£' + event.value})">
</div>
</div>
Now when I add the layout attribute to the div. All elements inside disappear. When I inspect the html it seems to be applying the css;
.i-amphtml-notbuilt, [layout]:not(.i-amphtml-element) {
position: relative;
overflow: hidden!important;
color: transparent!important;
}
Now as far as I can see from reading the docs I am compliant with the amp specification, however I must be doing something wrong here?
Can anyone point me in the right direction as to what I am doing wrong an dhow I Can achieve the layout above?
#Matthew-Flynn
The text was disappearing because of color: transparent!important;. I removed that in the code snippet below. But I'm not sure that answers your positioning question: could you build out this snippet a little more and I'll take a look?
.i-amphtml-notbuilt, [layout]:not(.i-amphtml-element) {
position: relative;
overflow: hidden!important;
}
<div class="form-field" layout="container">
<div class="form-title" layout="responsive">
<span>How much do you need?</span>
<span [text]="[amount]">
£1500000
</span>
</div>
<div layout="responsive" width="auto" height=100>
<input type="range"
name="amountSlider"
min="10000"
step="10000"
value="1500000"
max="3000000"
on="change:AMP.setState({amount: '£' + event.value})">
</div>
</div>
I want to exclude materialize css for some items in my view. Eg: i dont want to display materialize styles to check box under table. It causes problems with my internal jquery library. Please check attached image. I gave below html content in my table > td. I want to display this as browser default checkbox.
In my application i am using http://materializecss.com
<div class="checkbox">
<input type="checkbox" class="filled-in dt-checkboxes">
<label></label>
</div>
To remove the Materialize styles from the checkboxes, you first need to understand how the Materialize checkboxes are created:
The "real" checkbox is removed with opacity: 0; and some positioning
A "fake" checkbox is created with the help of the pseudo elements ::before and ::after on the <span> element
So all you need to do is hide the pseudo elements and make the real checkbox visible again. I created a class .reset-checkbox to demonstrate the effect:
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1;
position: relative;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet" />
<form action="#">
<div>
<label>
<input type="checkbox" class="filled-in" />
<span>Test with Materialize</span>
</label>
</div>
<div>
<label>
<input type="checkbox" class="filled-in reset-checkbox" />
<span>Test with removed styles</span>
</label>
</div>
</form>
Pay attention to a higher specificity of the selectors here, to make sure that the Materialize styles are overwritten.
I've use bootstrap in my project, like this below
<div class="input-group">
<input type="text" class="form-control input-lg" autofocus>
<span class="input-group-btn">
<button class="btn btn-primary btn-lg" type="button">search</button>
</span>
</div>
and in Bootstrap, I saw :
.input-group-btn:last-child > .btn {
margin-left: -1px;
}
So I write some CSS to avoid the useless margin-left:-1px; but I still have a problem:
When I click the area outside the <div class="input-group search-bar">, the button still have a effort like margin-left:-1px;
I'm confused, should I write some JavaScript to avoid this?
From the bootstrap source code on Github, these -1px styles are used when having button groups where the buttons align next to each other from doubling the border. If you place 2 buttons with a 1px border next to each other, you create visually a 2px border. The -1px shifts the button over so that the border is not doubled.
Comment from actual github source:
// Prevent double borders when buttons are next to each other
The -1px margin is there to prevent double borders when buttons are next to each other. It's meant to be this way.
If you really need to get rid of this, you may also have to adjust some of the negative margins and/or z-index for .input-group-btn > .btn:hover, :focus, :active, :first-child, and :last-child.
The Problem
I've got a problem where I'm trying to create rows of form inputs. This works OK, however, once the width of the total inputs gets too large, everything starts to wrap. What I would like is for a horizontal scroll-bar to appear inside the field-set and for all form elements for a single service-item div to remain on a single line.
<div style="display: inline-block;" class="horizontal-fields service-item">
<button class="horizontal-fields remove-service-item" style="float: left; margin-right: 5px;">-</button>
<label for="service_name">Name:</label>
<input name="service_name[]" id="service_name" value="" type="text">
<label for="service_description">Description:</label>
<input id="service_description" name="service_description[]" value="" type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label for="service_dsl_fnn[]">FNN:</label>
<input id="service_dsl_fnn" name="service_dsl_fnn[]" size="10" value="" type="text">
<button class="horizontal-fields new-service-item" style="display: inline-block;">+</button>
</div>
<br>
</div>
Current Results
Here is a JSFiddle showing the form in it's current state, I've included all the bare-bones CSS/HTML that I think are relevant: http://jsfiddle.net/FjxqG/3/
You will see that I've managed to get what I want by specifying width: 300% in the horizontal-fields class. However, this is of course not optimal because the width is essentially fixed and not automatically fitting the width of the service-item div.
Of course, this leaves the width much larger than it needs to be, but also always showing a horizontal-scroll, even when it isn't needed.
What I've tried
I've tried using display: inline-block; and whitespace: no-wrap;. However, the former did not seem to do much for me, and the latter only worked for the first few form items, not those inside the service-additional-fields div.
Unfortunately, I've got those latter items in the service-additional-fields div as they are dynamically inserted using jQuery, so although it's possible to take them out, I'd rather leave them in there, as it keeps the JavaScript simpler.
I've tried adapting the solution found here, with little success: http://www.css-lab.com/demos/image-display/side-scroll-gallery.html
Ended up with a similar situation in which the latter form elements were still wrapping.
I've also considered doing something like the jQuery solution found here: Horizontal scroll in DIV with many small DIV's inside (no text)
I guess this would work for me, because I already know that setting the width on horizontal-fields works OK, so using jQuery to find out what that width should be would probably work. However, it feels like I shouldn't need jQuery and it would be kind of a hack. So I'd like to avoid it if reasonably possible.
Thanks!
For some reason the other answer has been deleted and I can't get it back so having to answer again.
Previous answer was -
How about removing the floats and having inline-blocks with auto widths, And then for the .service-additional-fields as inline-block too?
Edited for a fuller answer.
HTML
<fieldset>
<legend>Fourth: Add Services</legend>
<div id="slide-wrap">
<div id="inner-wrap">
<div class="horizontal-fields service-item">
<button class="addField">+</button>
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
</div>
</div>
<div class="horizontal-fields service-item">
<button class="addField">+</button>
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
</div>
</div>
</div>
</div>
</fieldset>
CSS
#slide-wrap {
margin:0 auto;
overflow: auto;
background:#BCC5E1;
border:1px solid #000;
}
#inner-wrap {
float:left;
margin-right:-30000px;/*Be safe with Opera's limited negative margin of 32695px (-999em could cause problems with large font sizes)*/
padding-left:20px;
width: auto;
}
div.horizontal-fields input,
div.horizontal-fields textarea,
div.horizontal-fields select,
div.horizontal-fields label {
width: auto;
}
/* Horizontal fields is the class which is not re-sizing it's with correctly */
.horizontal-fields {
display: block;
}
.service-additional-fields {
display:inline-block;
}
DEMO
http://jsfiddle.net/aLKHJ/1/
Try this approach:
HTML:
<div id="slide-wrap">
<!-- + First row -->
<div class="row">
<!-- All elements here -->
</div>
<!-- - First row -->
<!-- + Second row -->
<div class="row">
<!-- All elements here -->
</div>
<!-- - Second row -->
</div>
CSS:
#slide-wrap {
margin:0 auto;
overflow: auto;
background:#BCC5E1;
border:1px solid #000;
width: 400px; /* for example */
padding-left:20px;
}
div.row {
float:left;
white-space: nowrap;
}
Take it easy, I was really getting confused of inner styles, so I removed them.
JsBin demo