I added <meta name="buildfire" content="disableTheme"> to the HTML of my Buildfire plugin. It did indeed disable the theme CSS however it also is now preventing normal scrolling of the page. This is a simple HTML/CSS/JS plugin with no external frameworks. This is for the widget. Using BuildFireSDK version 1.15.3
The scrolling works correctly on my local environment in the plugin tester. But it does not work correctly when the plugin is loaded into a user's Control Panel or when a test app is loaded onto a device.
Is there a way to disable the theme styling but allow for normal scrolling?
Edit: I removed all the extra classes, styling and script tags from the HTML. It still does not scroll.
<html>
<head>
<meta name="buildfire" content="disableTheme">
<title>Test</title>
<script src="../../../scripts/buildfire.js"></script>
</head>
<body style="overflow-y:scroll;">
<div style="overflow-y:scroll;">
<div class="container" style="overflow-y:scroll;">
<div>
<div>
<h1>Test</h1>
</div>
</div>
<div>
<div>
<form>
<div>
<div>
<h2>Test</h2>
</div>
</div>
<div>
<div>
<h2>Test</h2>
</div>
</div>
<div>
<div>
<h2>Test</h2>
</div>
</div>
<div>
<div>
<h2>Test</h2>
</div>
</div>
<div>
<div>
<h2>Test</h2>
</div>
</div>
<div>
<div>
<h2>Test</h2>
</div>
</div>
<div>
<div>
<h2>Test</h2>
</div>
</div>
<div>
<div>
<h2>Test</h2>
</div>
</div>
</form>
</div>
<div>
<form>
<div>
<div>
<p>Test output</p>
</div>
</div>
<div>
<div>
<p>test value</p>
</div>
</div>
<div>
<div>
<p>Test output</p>
</div>
</div>
<div>
<div>
<p>test value</p>
</div>
</div>
<div>
<div>
<p>Test output</p>
</div>
</div>
<div>
<div>
<p>test value</p>
</div>
</div>
<div>
<div>
<p>Test output</p>
</div>
</div>
<div>
<div>
<p>test value</p>
</div>
</div>
<div>
<div>
<p>Test output</p>
</div>
</div>
<div>
<div>
<p>test value</p>
</div>
</div>
<div>
<div>
<p>Test output</p>
</div>
</div>
<div>
<div>
<p>test value</p>
</div>
</div>
<div>
<div>
<p>Test output</p>
</div>
</div>
<div>
<div>
<p>test value</p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
If you disable the theme via the meta tag, it will exclude CSS that normally would be injected into your plugin. Depending on your plugin, you may want to add additional CSS to suit your needs.
Given your example, here's some baseline CSS that you can add:
html[buildfire] {
width: 100%;
min-width: 100%;
max-width: 100%;
height: 100%;
background: none;
overflow: hidden !important;
}
html[buildfire] body {
height: 100% !important;
width: 100% !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
margin: 0 auto;
}
Related
The text doesn't change line properly, I thought it should run in the column and auto change to next line, so they are stay in the column. That's what I saw in the video but is not working.
Thanks for helping.
Here are pictures.
https://ppt.cc/fr1JQx , https://ppt.cc/fPDr2x
Here is my code.
<style type="text/css">
.item:first-letter{
font-size: 50px;
float: left;
}
.item{
background-color: rgb(62, 116, 163);
}
</style>
</head>
<body>
<div class="container">
<div class="row g-5">
<div class="col-3 mb-4" >
<div class="item h-100 width-10">
A abcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcd</div>
</div>
<div class="col-3 mb-4">
<div class="item h-100">
B abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcd
</div>
</div>
<div class="col-3 mb-4">
<div class="item h-100">
C abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
</div>
</div>
<div class="col-3 mb-4">
<div class="item h-100">
D abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd</div>
</div>
</div>
</div>
Two options to fix:
I found this answer which explains in a bit more detail, but if this is really your content (I doubt it) you need to add this to your CSS:
word-wrap:break-word;
Otherwise I've slightly tweaked your layout and added some real content:
<div class="container">
<div class="row">
<div class="col-3 mb-4">
<p class="h-100 item">
A This is some normal text. I don't know the difference?
</p>
</div>
<div class="col-3 mb-4">
<p class="h-100 item">
B You need to use a normal paragraph structure, testing testing testing testing
</p>
</div>
<div class="col-3 mb-4">
<p class="h-100 item">
C abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
</p>
</div>
<div class="col-3 mb-4">
<p class="h-100 item">
D abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
</p>
</div>
</div>
</div>
You can see that the columns with garbage content are still broken, but the ones I changed work fine.
I am new to web devolopment, i want to add carousel in my project so i have copied this basic template from bootstrap docs, in desktop view it working but in mobile view it showing a unwanted black space and captions missing, please some one help
I am new to web devolopment, i want to add carousel in my project so i have copied this basic template from bootstrap docs, in desktop view it working but in mobile view it showing a unwanted black space and captions missing, please some one help
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<section class="home">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{% static 'img/slide-1.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="{% static 'img/slide-2.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="{% static 'img/slide-3.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</body>
</html>
custom.css
.carousel-item {
height: 24rem;
background: #000;
}
.carousel-item>img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: 100%;
opacity: 0.5;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
.carousel-caption{
bottom: 25%;
}
.carousel-caption h5{
font-size: 30px;
margin-bottom: 20px;
}
.carousel-caption p{
font-size: 20px;
}
To make testing easier i added some grey color to the background (you can remove it later).
What I think you are missing, is to add the Bootstrap scripts, you can see the code for an example.
Here you have how to do it, from Bootstrap documentation.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
>>>>>>>>>> SCRIPTS HERE <<<<<<<<<<<<<
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
>>>>>>>>>>> UP HERE <<<<<<<<<<<<<<<<<
<title></title>
</head>
<body style="background-color: gray">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="IMAGE 1">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="IMAGE 2">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="IMAGE 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
</html>
Regarding your question about "where" to put the text, after the images will be ok.
Here you have a working example (from one of my portfolio projects):
<!-- Testimonials -->
<section id="testimonials" class="colored-section">
<div id="testimonials-carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active container-fluid">
<h2 class="testimonial-text">I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<a class="carousel-control-prev" href="#testimonials-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#testimonials-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
</html>
Please, mark the answer as accepted ;)
below things worked for me
<div class="carousel-caption d-block">
Instead of
<div class="carousel-caption d-none d-md-block">
read here display properties
I am trying to put an mdl-switch inside an mdl-card which sits inside an mdl-grid.
the mdl-switch works fine if placed outside the card but just appears as a checkbox inside the card.
<script type="text/ng-template" id="nodes.html">
<h4 class="mdl-typography--display-1 pageTitle">asdf</h4>
<div class="mdl-grid">
<div ng-repeat="a in b" class="mdl-cell mdl-cell--4-col">
<div class="status-card mdl-card mdl-shadow--2dp status-green">
<div class="mdl-card__title mdl-card--expand">
<h4 style="width: 100%">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="BSL">
<input type="checkbox" id="BSL" class="mdl-switch__input" ng-model="a.asdfChk" />
<span class="mdl-switch__label">
<small>ASDF</small>
</span>
</label>
</h4>
</div>
<div class="mdl-card__actions mdl-card--border">
<div class="mdl-layout-spacer"></div>
</div>
</div>
</div>
</div>
So in upgrading from DevExpress to DevExtreme, DE seems to have gone out of their way to block any automation engine but their own.
Select boxes are build as a layer of custom DIV tags with a read-only input tag in the middle.
When selected, the dropdown list is generated as a DIV list structure tied to the /body/ level of the page source.
This list unloads when the dropdown list closes.
Waitr can see and interact with the list the first time it appears on the page, but once it unloads I cannot get it to find it again.
I have tried Page Object references, native Watir dynamic references, nothing works.
Interestingly I do not get the common 'no longer attached to the DOM' error, just an empty string.
All of the workarounds from DevExpress have been deactivated or blocked.
Has anyone found a way to automate these controls besides exposed JS calls?
Select Box:
<div class="dx-texteditor dx-dropdowneditor-button-visible dx-widget dx-textbox dx-dropdowneditor-field-clickable dx-dropdowneditor dx-selectbox dx-validator dx-visibility-change-handler" id="Active_Y_or_N" typeof="drpdown" validations="[{"type":"required"}]" value="1" items="[{"Value":1.0,"Text":"Yes","DropDownType":"Active Y or N"},{"Value":2.0,"Text":"No","DropDownType":"Active Y or N"}]" originalvalue="1">
<div onclick="void(0)" class="dx-dropdowneditor-input-wrapper dx-selectbox-container">
<div class="dx-texteditor-container">
<input id="Active_Y_or_N_1" aria-expanded="false" role="combobox" tabindex="0" spellcheck="false" readonly="" aria-autocomplete="list" aria-haspopup="true" autocomplete="off" class="dx-texteditor-input" type="text">
<div class="dx-placeholder dx-state-invisible" data-dx_placeholder="Select..."></div>
<div class="dx-texteditor-buttons-container">
<div role="button" onclick="void(0)" class="dx-widget dx-button-normal dx-dropdowneditor-button">
<div class="dx-dropdowneditor-icon"></div>
</div>
</div>
</div>
</div>
List:
<div style="width: 212px; height: 61px; z-index: 1001; margin: 0px; left: 0px; top: 0px; transform: translate(264px, 365px); transition: none 0s ease 0s ; visibility: visible; opacity: 1;" class="dx-overlay-content dx-popup-normal dx-popup-draggable dx-resizable">
<div style="height: 60px;" id="2ceea1a1-35ca-5e1d-72c1-17ca0c70daa9" class="dx-popup-content">
<div aria-activedescendant="3cc4c726-d65a-4248-b16c-6cd8ed666d08" tabindex="-1" role="listbox" class="dx-scrollable dx-scrollview dx-scrollable-customizable-scrollbars dx-scrollable-vertical dx-scrollable-simulated dx-visibility-change-handler dx-list dx-widget dx-collection" id="2779756d-884a-7d65-dd53-5ab194255698">
<div class="dx-scrollable-container">
<div style="transform: translate(0px, 0px);" class="dx-scrollable-content">
<div class="dx-scrollview-top-pocket">
<div style="display: none;" class="dx-scrollview-pull-down">
<div class="dx-scrollview-pull-down-image"></div>
<div class="dx-scrollview-pull-down-indicator">
<div class="dx-loadindicator dx-widget">
<div class="dx-loadindicator-wrapper">
<div class="dx-loadindicator-content">
<div class="dx-loadindicator-icon">
<div class="dx-loadindicator-segment dx-loadindicator-segment7"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment6"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment5"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment4"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment3"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment2"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment1"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment0"></div>
</div>
</div>
<div class="dx-loadindicator-content"></div>
</div>
</div>
</div>
<div class="dx-scrollview-pull-down-text">
<div style="opacity: 1;">Pull down to refresh...</div>
<div style="opacity: 0;">Release to refresh...</div>
<div style="opacity: 0;">Refreshing...</div>
</div>
</div>
</div>
<div onclick="void(0)" class="dx-scrollview-content">
<div id="3cc4c726-d65a-4248-b16c-6cd8ed666d08" aria-selected="false" role="option" class="dx-item dx-list-item dx-state-focused">
<div class="dx-item-content dx-list-item-content">Yes</div>
</div>
<div aria-selected="false" role="option" class="dx-item dx-list-item">
<div class="dx-item-content dx-list-item-content">No</div>
</div>
</div>
<div class="dx-scrollview-bottom-pocket">
<div style="display: none;" class="dx-scrollview-scrollbottom">
<div class="dx-scrollview-scrollbottom-indicator">
<div class="dx-loadindicator dx-widget">
<div class="dx-loadindicator-wrapper">
<div class="dx-loadindicator-content">
<div class="dx-loadindicator-icon">
<div class="dx-loadindicator-segment dx-loadindicator-segment7"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment6"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment5"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment4"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment3"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment2"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment1"></div>
<div class="dx-loadindicator-segment dx-loadindicator-segment0"></div>
</div>
</div>
<div class="dx-loadindicator-content">
</div>
</div>
</div>
</div>
<div class="dx-scrollview-scrollbottom-text">Loading...</div>
</div>
</div>
</div>
<div style="display: none;" class="dx-scrollable-scrollbar dx-widget dx-scrollbar-vertical dx-scrollbar-hoverable">
<div style="transform: translate(0px, 0px); height: 58px;" class="dx-scrollable-scroll dx-state-invisible">
<div class="dx-scrollable-scroll-content"></div>
</div>
</div>
</div>
<div class="dx-scrollview-loadpanel dx-overlay dx-widget dx-visibility-change-handler dx-state-invisible dx-loadpanel">
<div aria-hidden="true" style="width: 222px; height: 90px;" class="dx-overlay-content"></div>
</div>
code (one version anyway):
self.send("#{field}_element").div(:class => 'dx-dropdowneditor-icon').click
drpdwn = #browser.div(:class => 'dx-scrollview-content')
if drpdwn.text.include? value
drpdwn.div(:text => value).click
else
fail "value (#{value}) not found in list (#{self.drop_list_element.text})"
end
It is very hard to answer because I can't see your code and I have no example. So maybe it's a wrong answer. But if your statement:
On the second load of the list, Watir can see it as existing, but not visible.
is correct. Then you can force watir to work with not visible elements using:
browser.hidden(id: "your_element").click
Try it please.
I have a very weird problem with CMSMS. I have some HTML in my header file, there should be 2 links, but every time I paste a second one and click Apply- it disappears from editor. Although it shows on website.
CMSMS version: 1.11.9
<div class="header">
<div class="container">
<div class="row-fluid">
<div class="logo_wrapper">
<div class="logo"><img src="{root_url}/ui/images/logo.png" alt="" /></div>
</div>
<div class="span6 pull-right">{if $sid == 1 }
<div class="kabinet pull-right"><a class="rounded" href="apps/customer/web/profile/edit"> Профиль</a></div>
{else}
<div class="kabinet pull-right"><a class="rounded dark" href="#"> Статус доставки</a> <a class="rounded" href="apps/customer/web/login"> Личный кабинет</a></div>
{/if}</div>
</div>
<hr />
<div>
<div class="nav">
<div class="nav-inner">{menu loadprops=0}</div>
</div>
</div>
</div>
</div>
It should be after save:
<div class="header">
<div class="container">
<div class="row-fluid">
<div class="logo_wrapper">
<div class="logo"><img src="{root_url}/ui/images/logo.png" alt="" /></div>
</div>
<div class="span6 pull-right">{if $sid == 1 }
<div class="kabinet pull-right"><a class="rounded" href="apps/customer/web/profile/edit"> Профиль</a>
(this link keeps disappearing)
<a class="rounded no-bg-color" href="apps/customer/web/logout"><i class="icon-off icon-white"></i></a>
</div>
{else}
<div class="kabinet pull-right"><a class="rounded dark" href="#"> Статус доставки</a> <a class="rounded" href="apps/customer/web/login"> Личный кабинет</a></div>
{/if}</div>
</div>
<hr />
<div>
<div class="nav">
<div class="nav-inner">{menu loadprops=0}</div>
</div>
</div>
</div>
</div>
It's probably the HTML editor (MicroTiny I expect) believing that link is invalid HTML and throwing it away.
Set the editor to HTML mode so that you can edit the HTML directly (not WYSIWYG). It will then accept your edits and not try to edit them.