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.
Related
I am currently working on a project of making a web.But after using bootstrap I got some error in spaces in between the pictures its not also responsive in web as well as in app.
The content is divided into two category Y and C the Y is fine in its space the problem is coming from C section.The category label is also not responsive .If you can fix the error please provide me with a layout which is perfect in web and app using bootstrap.
Thanks in advance!
<div class=" secondbtn" style="align-items: center;">
<h4>The Y category</h4>
</div>
<div class="filtr-container galleryContainer d">
<!-- item -->
<div class="col-4 col-md-3 col-lg-3 filtr-item thumbnail" data-category="Malavian,Y" data-sort="">
<img src="images/animals/animals (1).jpg" alt="">
<span class="col-md-3 col-lg-3 item-desc" style="position: initial;">Malavian Cichlids</span>
</div>
<div class="col-4 col-md-3 col-lg-3 filtr-item thumbnail" data-category="Malavian,Tanganyikan,C" data-sort="cat">
<img src="images/animals/animals (4).jpg" alt="">
<span class="item-desc" style="position: initial;">plecos</span>
</div>
</div>
<div class="second" >
<h4><span>The C category</span></h4>
</div>
<section class="container-fluid ">
<div class="layout_M filtr-container galleryContainer d">
<div class="col-4 col-md-3 col-lg-4 filtr-item thumbnail" data-category="Malavian,C" data-sort="cat">
<img src="images/animals/animals (4).jpg" alt="">
<span class="item-desc" style="position: initial;" >Barbs</span>
</div>
<div class="col-4 col-md-3 col-lg-4 filtr-item thumbnail" data-category="Malavian,C" data-sort="dog">
<img src="images/animals/animals (5).jpg" alt="">
<span class="item-desc">Cory Cats</span>
</div>
<div class="col-4 col-md-3 col-lg-4 filtr-item thumbnail" data-category="Malavian,C" data-sort="dog">
<img src="images/animals/animals (5).jpg" alt="">
<span class="item-desc">Freshwater Plants</span>
</div>
</div>
</section>
</div>
</div>
To make t responsive try to wrap your columns in a div with class name row.
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 tried to make something new in materializecss and I created one div with class row in which I have put 2 cards.one cards is in div with class col s4 and other one is in div with class col s8.
Those cards are in 2 separate rows. Cannot figure out why. Why are they not in same row?
here is example of code, first div with class row does not work fine, second one works fine, what is the difference?
<div class="row"><!-- start top vijesti -->
<div class="col s1">1</div>
<div class="col s7">ff</div>
<div class="col s4">ff</div>
</div><!-- end top vijesti -->
<div class="row">
<div class="col s1">1</div>
<div class="col s1">2</div>
<div class="col s1">3</div>
<div class="col s1">4</div>
<div class="col s1">5</div>
<div class="col s1">6</div>
<div class="col s1">7</div>
<div class="col s1">8</div>
<div class="col s1">9</div>
<div class="col s1">10</div>
<div class="col s1">11</div>
<div class="col s1">12</div>
</div>
I tried replicating your problem but did not see anything wrong with it. Perhaps you might want to have a look at this (if that is what you are trying to achieve) to see if you are doing it right, or probably fork it or post your code for us to actually determine what is wrong.
HTML:
<div class="row"><!-- start top vijesti -->
<div class="col s1">1</div>
<div class="col s7">ff</div>
<div class="col s4">ff</div>
</div><!-- end top vijesti -->
<div class="row">
<div class="col s1">1</div>
<div class="col s1">2</div>
<div class="col s1">3</div>
<div class="col s1">4</div>
<div class="col s1">5</div>
<div class="col s1">6</div>
<div class="col s1">7</div>
<div class="col s1">8</div>
<div class="col s1">9</div>
<div class="col s1">10</div>
<div class="col s1">11</div>
<div class="col s1">12</div>
</div>
<div class="row">
<div class="col s4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
<div class="col s8">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
</div>
CSS:
.col {
border: 1px solid;
}
.row {
border: 1px dotted;
}
Trying to figure out how to a do a responsive layout using Foundation. I am new to this and familiar with the ability to use push and pull but I am struggling trying to figure out how to stack items in a single row.
Visual: http://i.imgur.com/q1LAvIa.png
<div class="row">
<div class="small-12 large-? columns"> A </div>
<div class="small-12 large-? columns"> B </div>
<div class="small-12 large-? columns"> C </div>
</div>
Thanks in advance!
i think your code (according to your image) would be like:
<div class="row">
<div class="small-12 large-6 large-push-6 columns">A</div>
<div class="row">
<div class="small-12 large-6 large-pull-6 columns">B</div>
<div class="small-12 large-6 columns">C</div>
</div>
</div>
</div>
You could check "Advanced" & "Source Ordering" sections in http://foundation.zurb.com/docs/components/grid.html
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.