Hi I am new to selenium via VBA, so I am trying to automate a process by loging into a webpage navigate and get data extracted into the excel file.
From what I have researched, first i have call the dropdown by click and then select the option.
Below is my code
Sub Praise()
Dim bot As New WebDriver
bot.Start "chrome"
bot.Get "https://dashboard.stripe.com/login"
bot.FindElementById("email").SendKeys ActiveCell.Value
bot.FindElementById("password").SendKeys ActiveCell.Offset(0, 1).Value
bot.FindElementByTag("form").submit
Application.Wait (Now + TimeValue("0:00:8"))
Set myelement = bot.FindElementByClass("bs-Link", Raise:=False)
If myelement Is Nothing Then
Else
bot.FindElementByClass("bs-Link").Click
End If
bot.FindElementByClass("db-AccountSwitcher-chevron").Click ' to call dropdown
bot.FindElementByClass("Text-color--white Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline").Click ' Error occurs in this line
End Sub
Here is the code to call dropdown
<div class="db-AccountSwitcher-button Box-root Flex-flex Flex-alignItems--center">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-activeImage">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--dark Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--noWrap Text-display--inline">Masorini.com</span></div>
<div class="Box-root Margin-left--8">
<div class="db-AccountSwitcher-chevron"></div>
</div>
</div>
Here is the code of the dropdown list
<div class="ScrollableMenu SearchableList-items" id="searchable-list-results-47" role="listbox" style="max-height: 200px;">
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Masorini.com</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Ariavoss</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Bikinimas</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Diva Noche</span></div>
</div>
</div>
</div>
<div aria-selected="true" role="option">
<div>
<div class="Box-root Box-background--blue Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(255, 255, 255);"><span class="Text-color--white Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Bootyswim</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Zainno</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Actiwears</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Rockactive</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Cat Lovers</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Chicnuit</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Bootyswim</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Diva Noche</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Bikinimas</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">EpicDevil.co</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">probago.com</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Activepose</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">SiaRose.com</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Sunvoss</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Mosselli</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Aroabikini</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Swimlemon</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">milewatches</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">stripe-northwrist#massiveshops.com</span></div>
</div>
</div>
</div>
<div aria-selected="false" role="option">
<div>
<div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;">
<div class="Box-root Margin-right--8">
<div class="db-AccountSwitcher-accountImage Box-root Box-background--white">
<div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--newAccount"></div>
</div>
</div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">New account</span></div>
</div>
</div>
</div>
</div>
Here is the error code
I am not sure about the click part for this but you need to remove spaces from the class name to get rid of that error
bot.FindElementByCss(".Text-color--white.Text-fontSize--16.Text-fontWeight--medium.Text-lineHeight--24.Text-typeface--base.Text-wrap--wrap.Text-display--inline").Click
That targets Bootyswim
If click works then you should also be able to use:
bot.FindElementByXPath("//*[#role='option'][5]").Click
Then you change the [5] for your other options.
Try the xpath here and play with selecting your other options.
You don't actually click the drop down then select the value. You simply set the drop down field to the value you want it to be.
Here's my little code snippet that does this on a site I need to navigate.
Dim element As Selenium.WebElement
Set element = WaitForElement(byName, "Your element ID here")
element.AsSelect.SelectByText "The exact text that's in the drop down"
The first line calls the function below - I was running into timeout issues waiting for the website to finish loading, so I wrote that to be able to intelligently wait until the page loaded before giving up on not finding the element.
The second line explicitly sets the drop down to the value that I'm looking for - there's no clicking on the element and selecting.
Private Function WaitForElement(ByVal Method As FindElementBy, ByVal elementID As String) As Selenium.WebElement
Dim startTimer As Single
startTimer = Timer
Dim waitTime As Single
waitTime = this.Driver.Timeouts.ImplicitWait / 100
Dim webBit As Selenium.WebElement
On Error Resume Next 'it is possible that we'll go looking for the element before it's been returned to view, that's fine, we're waiting for it
While webBit Is Nothing And Timer < (startTimer + waitTime)
Select Case Method
Case byClass
Set webBit = this.Driver.FindElementByClass(elementID)
Case byCSS
Set webBit = this.Driver.FindElementByCss(elementID)
Case byID
Set webBit = this.Driver.FindElementById(elementID)
Case byLinkText
Set webBit = this.Driver.FindElementByLinkText(elementID)
Case byName
Set webBit = this.Driver.FindElementByName(elementID)
Case byPartialLinkText
Set webBit = this.Driver.FindElementByPartialLinkText(elementID)
Case byTag
Set webBit = this.Driver.FindElementByTag(elementID)
Case byXPath
Set webBit = this.Driver.FindElementByXPath(elementID)
End Select
Wend
On Error GoTo 0 'resume normal error handling
Set WaitForElement = webBit
End Function
Related
I have a problem with the dropdown that developer just upgraded the library AntD 3 to AntD 4. The dropdown list now displays 10 items. If user scrolls down, it will load next 10 items. The current code that I wrote for automation in Java with Selenium does not work. Does anybody help me to fix this case?
Below is the HTML code
<div class="ant-select-dropdown ant-select-dropdown-placement-bottomLeft ant-select-dropdown-hidden" style="min-width: 455px; width: 455px; left: -484px; top: -571px;">
<div>
<div role="listbox" id="credential_type_list" style="height: 0px; width: 0px; overflow: hidden;">
<div aria-label="Financial" role="option" id="credential_type_list_1" aria-selected="false">1</div>
<div aria-label="KPI" role="option" id="credential_type_list_2" aria-selected="false">2</div>
<div aria-label="Royalty" role="option" id="credential_type_list_3" aria-selected="false">3</div>
</div>
<div class="rc-virtual-list" style="position: relative;">
<div class="rc-virtual-list-holder" style="max-height: 256px; overflow-y: hidden; overflow-anchor: none;">
<div style="height: 448px; position: relative; overflow: hidden;">
<div class="rc-virtual-list-holder-inner" style="display: flex; flex-direction: column; transform: translateY(0px); position: absolute; left: 0px; right: 0px; top: 0px;">
<div aria-selected="true" class="ant-select-item ant-select-item-option ant-select-item-option-selected" title="Revenue">
<div class="ant-select-item-option-content">Revenue</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option" title="Financial">
<div class="ant-select-item-option-content">Financial</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option ant-select-item-option-active" title="KPI">
<div class="ant-select-item-option-content">KPI</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option" title="Royalty">
<div class="ant-select-item-option-content">Royalty</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option" title="Marketing Fund">
<div class="ant-select-item-option-content">Marketing Fund</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option" title="COGS Adjustments">
<div class="ant-select-item-option-content">COGS Adjustments</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option" title="Remittance">
<div class="ant-select-item-option-content">Remittance</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option" title="Payroll">
<div class="ant-select-item-option-content">Payroll</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option" title="Sales Tax (County)">
<div class="ant-select-item-option-content">Sales Tax (County)</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option" title="Sales Tax (State)">
<div class="ant-select-item-option-content">Sales Tax (State)</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
</div>
</div>
</div>
<div class="rc-virtual-list-scrollbar rc-virtual-list-scrollbar-show" style="width: 8px; top: 0px; bottom: 0px; right: 0px; position: absolute; display: none;">
<div class="rc-virtual-list-scrollbar-thumb" style="width: 100%; height: 128px; top: 0px; left: 0px; position: absolute; background: rgba(0, 0, 0, 0.5); border-radius: 99px; cursor: pointer; user-select: none;"></div>
</div>
</div>
</div>
</div>
My materialize DatePicker works only for the FirstTime
I am using Materialize for devloping a site which invloves date-picker. The date-picker works only for the first load of a page. When we select the date for second-time it comes and goes.
How to solve this type of problem? Any help is greately Appriciated. Thanks!
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--=============== basic ===============-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<!-- Compiled and minified CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<link type="text/css" rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Compiled and minified JavaScript -->
<script type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script>
<style>
h5{
font-size: 1.875rem;
line-height: 2.5rem;
letter-spacing: .5px;
color: #98AAB8;
margin-right: -.5px; font-weight:700; font-family: Neue Plak,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif;
}
input {
line-height: normal;
padding: 10px 9px 10px 47px;
border-radius: 4px;
border: 1px solid #2F3B59;
background: #f9f9f9;
font-family: quick-sand, sans-serif;
font-size: 13px;
}
.input_field1{
line-height: normal;
padding: 12px 9px 12px 47px;
border-radius: 4px;
border: 1px solid #2F3B59;
background: #f9f9f9;
width:100%;
font-family: quick-sand, sans-serif;
font-size: 13px;
margin-bottom: 20px;
}
.text_area{
padding:69px 280px;
}
.input_date{
line-height: normal;
padding: 13px 9px 10px 47px;
border-radius: 4px;
border: 1px solid #2F3B59;
background: #f9f9f9;
width:100%;
margin-bottom: 20px;
}
.form_header {
font-family: quick-sand, sans-serif;
font-size: 13px;
/* float: left; */
text-align: left;
margin-bottom: 10px;
font-weight: 500;
color:#666;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
position: absolute;
margin-top: 13px;
margin-left: 20px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.posterImg{
text-align: center;
margin: 0px 0;
width: 164px;
height: 159px;
padding: 55px 2px 11px 5px;
border: 1px solid #2F3B59;
border-radius: 7px;
font-size: 12px;
color: #98AAB8;
margin-bottom: 20px;
}
.breadcrumb:before {
content: '\E5CC';
color: rgba(255,255,255,0.7);
vertical-align: top;
display: inline-block;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
color: #566985;
font-size: 25px;
margin: 0 10px 0 8px;
-webkit-font-smoothing: antialiased;
}
.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
/* color: #ffab40; */
color: #566985;}
textarea.materialize-textarea {
overflow-y: hidden;
border: none;
border: 1px solid #2F3B59;
padding: .8rem 0 1.6rem 0;
resize: none;
min-height: 3rem;
border-radius: 7px;
background: #f9f9f9;
}
input[type=text]:not(.browser-default){
background-color: transparent;
border: none;
/* border-bottom: 1px solid #9e9e9e; */
border-radius: 0;
outline: none;
height: 3rem;
width: 100%;
font-size: 1rem;
margin: 0 0 20px 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
</style>
<!-- Fav icon -->
</head>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper" style="background: #2F3B59;">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
</ul>
</div>
</nav>
</div>
<div class="row">
<div style="height:30px; background:white;"></div>
</div>
<div class="row">
<div class="col s12 m1"></div>
<div class="col s12 m10">
<nav style="border: 1px solid #eee;background: #F8FBFE; border-radius:5px;">
<div class="nav-wrapper">
<div class="col s12">
Add Listing
Add conference
Profile
Home
</div>
</div>
</nav>
</div>
<div class="col s12 m1"></div>
</div>
<div class="row">
<div class="col s12 m1"></div>
<div class="col s12 m3">
<div class="card sticky-action" style="border: 1px solid #eee;">
<div class="card-action">
<div class="card" style="background: #F8FBFE; border-radius:5px;border: 1px solid #eee;">
<div class="card-action">
Edit Profile
</div>
<div class="card-action">
Add event
</div>
<div class="card-action">
Added Events
</div>
<div class="card-action">
<a class="waves-effect waves-light btn-small" style="background: #4DB7FE; color: #566985;">Save</a>
</div>
</div>
</div>
<div class="card-reveal"> <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<div class="col s12 m7">
<h5 style="text-align:center;font-family: quick-sand, sans-serif;">Conference Details</h5>
<div class="row">
<div class="col s12">
<div class="form_header">Conference Link</div>
<i class="fa fa-link"></i><input type="" class="input_field1" placeholder="Conference Link" autocomplete="off">
</div>
<div class="col s12 m12">
<div class="form_header">Conference Name</div>
<i class="fa fa-address-book"></i><input type="" class="input_field1" placeholder="Conference Name" autocomplete="off">
</div>
<div class="col s12 m12">
<div class="form_header">Conference URL</div>
<i class="fa fa-link"></i> <input type="" class="input_field1" placeholder="Conference URL">
</div>
<div class="col s12 m12">
<div class="form_header">Conference Registration URL</div>
<i class="fa fa-ticket"></i> <input type="" class="input_field1" placeholder="Conference Registration URL">
</div>
<div class="col s12 m6">
<div class="form_header">Conference Start Date</div>
<i class="fa fa-calendar-check-o"></i><input type="" class="input_date" id="datepicker1" placeholder="yyy-mm-dd" onclick="jithendra()">
</div>
<div class="col s12 m6">
<div class="form_header">Conference End Date</div>
<i class="fa fa-calendar-check-o"></i><input type="" class="input_date" id="datepicker2" placeholder="yyy-mm-dd" onclick="jithendra1()">
</div>
<div class="col s12 m12">
<div class="form_header">Twitter Handle</div>
<i class="fa fa-twitter"></i><input type="" class="input_field1" placeholder="City">
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee; margin-top:30px;"></div>
</div>
<div class="col s12 m4">
</div>
<div class="col s12 m12">
<div class="form_header" style="margin-top:20px;">City</div>
<i class="fa fa-map-marker"></i> <input type="" class="input_field1" type="text" placeholder="City">
</div>
<div class="col s12 m12">
<div class="form_header">Venue</div>
<i class="fa fa-map-marker"></i><input type="" class="input_field1" type="text" placeholder="Venue">
</div>
<div class="col s12 m12">
<div class="form_header" style="width: 338px;">Keywords</div>
<input type="" class="input_field1" type="text" placeholder="Keywords">
</div>
<div class="col s12 m12">
<div class="form_header">Conference City</div>
<input type="file" class="input_field1" type="text" placeholder="Venue" style="opacity:0px;">
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee;margin-bottom:20px;margin-top: 21px;"></div>
</div>
<div class="col s12 m12">
<div style="height:10px;"></div>
</div>
<div class="col s12 m12">
<a class="waves-effect waves-light btn" style="background: #2F3B59;border-radius:5px;">Submmit</a>
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee; margin-top:30px;"></div>
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee; margin-top:30px;"></div>
</div>
<!-- <div class="col s12 m4">
<div class="form_header" >Poster Image</div>
<div class="input" style="border:none;border: 1px solid #2F3B59;;height: 180px;border-radius: 5px;background: #f9f9f9;/* padding-bottom: 16px; */">
<input type="text"></div>
<input type="file" class="input_field1" style="height: 180px;
opacity: -0.7;
position: absolute;
width: 146px;
margin-top: -180px;">
</div>
<div class="col s12 m3"></div>
<div class="col s12 m4">
<div class="form_header" >Card Image</div>
<div class="input" style="border:none;border: 1px solid #2F3B59;height: 180px;border-radius: 5px;background: #f9f9f9;/* padding-bottom: 16px; */">
<input type="text"></div>
<input type="file" class="input_field1" style="height: 180px;
opacity: -0.7;
position: absolute;
width: 146px;
margin-top: -180px;">
</div> -->
<!--
<div class="col s12 m12">
<hr>
</div>
<div class="col s12 m12">
<h5>My Socials</h5>
</div>
</div>
<div class="col s12 m12">
<div class="form_header">Facebook </div>
<i class="fa fa-facebook"></i><input type="" class="input_field1" type="text" placeholder="https://facebook.com/">
</div>
<div class="col s12 m12">
<div class="form_header">LinkedIn </div>
<i class="fa fa-linkedin"></i><input type="" class="input_field1" type="text" placeholder="Linkedin.com">
</div>
<div class="col s12 m12">
<div class="form_header">Twitter </div>
<i class="fa fa-twitter"></i><input type="" class="input_field1" type="text" placeholder="https://twitter.com/">
</div>
</div> -->
</div>
</div>
</div>
<footer class="page-footer" style="background: #2F3B59;">
<div class="container">
<div class="row">
<div class="col s12 m3">
<h5 class="white-text">KonfHub</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col s12 m3">
<h5 class="white-text">Link</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col s12 m3">
<h5 class="white-text">Link</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col s12 m3">
<h5 class="white-text">Link</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<script>
function jithendra(){
$('.modal').modal();
$('#datepicker1').pickadate({
selectMonths: true,// Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year,
});
}
function jithendra1(){
$('#datepicker2').pickadate({
selectMonths: true,// Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year,
});
}
</script>
</body>
</html>
I changed a few things in your code. You were using both the versions of Materialize 1.0.0 and 0.100.2, no idea why you should use only one version and then I updated the jQuery methods as per the new version that is 1.0.0, you can check those on their website Picker - Materialize and Select - Materialize. You were using .input-date class but in order to use datepicker you've to use .datepicker class only, you can modify the CSS of .datepicker class. I added !important to the changes you've made to the .datepicker class, so you can have the modified CSS which you applied to .input-date. At last, you've given ids to individual datepickers, so you can either use the jQuery methods on ids or on class.
Codepen - Working Demo
Hi I am new to selenium via VBA, so I am trying to automate a process by loging into a webpage navigate and get data extracted into the excel file. the problem is after login i am unable to input values in a search box.
Here are the codes i have tried
bot.FindElementById("placeholder-3vgh2").SendKeys "AAA"
bot.FindElementByClass(".public-DraftStyleDefault-block.public-DraftStyleDefault-ltr").SendKeys "AAA"
bot.FindElementByClass("public-DraftStyleDefault-block public-DraftStyleDefault-ltr").SendKeys "AAA"
bot.FindElementByXPath("//*[#data-contents='true']").SendKeys "AAA"
bot.FindElementByXPath("//*[#class='public-DraftStyleDefault-block public-DraftStyleDefault-ltr']").SendKeys "AAA"
bot.FindElementByXPath("//*[#data-offset-key='dtaef-0-0'][2]").SendKeys "AAA"
Here is HTML Code
<div class="db-World-topContent Box-root Box-background--surface Padding-vertical--20">
<div class="Box-root Flex-flex Flex-alignItems--center Flex-justifyContent--spaceBetween">
<div class="db-SearchField db-SearchField--tokenizable">
<div class="db-SearchField-input db-SearchField-input--highlighted">
<div class="DraftEditor-root">
<div class="DraftEditor-editorContainer">
<div aria-describedby="placeholder-3vgh2" class="notranslate public-DraftEditor-content" contenteditable="true" role="textbox" spellcheck="false" style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word;">
<div data-contents="true">
<div class="" data-block="true" data-editor="3vgh2" data-offset-key="dtaef-0-0">
<div data-offset-key="dtaef-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span class="db-SearchField-token" data-offset-key="dtaef-0-0"><span data-offset-key="dtaef-0-0"><span data-text="true">is:</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div><span></span><span></span></div><span></span></div>
<div class="Box-root">
<div class="Box-root Flex-flex Flex-alignItems--center Flex-direction--row Flex-justifyContent--flexStart" style="margin-left: -12px;">
<div class="Box-root Box-hideIfEmpty Margin-left--12"></div>
<div class="Box-root Box-hideIfEmpty Margin-left--12">
<div class="Box-root Padding-right--8">
<div class="db-FeedbackInput-container Card-root Card-shadow--small">
<div class="db-FeedbackInput-box Box-root Box-background--offset Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center">
<div class="Box-root Margin-right--8 Flex-flex"><span class="db-FeedbackInput-defaultIcon"></span></div>
<div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--gray400 Text-fontSize--14 Text-fontWeight--regular Text-lineHeight--20 Text-typeface--base Text-wrap--wrap Text-display--inline"><span>Feedback about this page?</span></span>
</div>
</div>
</div>
</div>
</div>
<div class="Box-root Box-hideIfEmpty Margin-left--12">
<div>
<div class="Box-root Flex-flex">
<div class="Box-root Flex-flex"><button aria-label="Documentation" class="db-DocumentationMenu-root" tabindex="-1"></button></div>
</div>
</div>
</div>
<div class="Box-root Box-hideIfEmpty Margin-left--12">
<div>
<div class="Box-root Flex-flex">
<div class="Box-root Flex-flex">
<div tabindex="-1" style="outline: none;"><button aria-label="Notifications" class="db-Notifications-button"><span class="db-Notifications-icon db-Notifications-icon--empty"></span></button></div>
</div>
</div>
</div>
</div>
<div class="Box-root Box-hideIfEmpty Margin-left--12">
<div>
<div class="Box-root Flex-flex">
<div class="Box-root Flex-flex"><button class="bs-Button bs-DeprecatedButton db-UserMenu" aria-label="User menu" type="button" tabindex="-1"><div class="db-GravatarImage db-UserMenu-image db-GravatarImage--none"></div></button></div>
</div>
</div>
</div>
</div>
</div>
</div><span class="db-World-topContent--left"></span><span class="db-World-topContent--right"></span></div>
Here is the outerHTML of iframe:
<iframe src="https://js.stripe.com/v2/m/outer.html#ping=false" style="width: 1px !important; height: 1px !important; position: absolute !important; left: -10000px !important; top: -1000px !important;"></iframe>
Try, following our debug session:
bot.FindElementByCss(".notranslate.public-DraftEditor-content").SendKeys "AAA"
I made a three column accordion collapse using Bootstrap. I used images as backgrounds for my panels, but I am really stumped as to why the top picture is not lined up with the others. How do I get them all to line up? Also, is there a way to make the transitions not so awkward and shifty? Thanks in advance!
I have been building my website in Dreamweaver, but this is the code for what I have been working on and what is giving me issues.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4 bites-stings">
<div class="panel-heading" role="tab" id="headingSeven">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven">
<div class="panel-body">
<h4>Mosquitoes</h4>
<h4>Ticks</h4>
<h4>Bees and Wasps</h4>
<h4>Animal Bites</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 pet-health">
<div class="panel-heading" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<h4>Pet Allergies</h4>
<h4>Toxic Plants</h4>
<h4>Pet and Wildlife Encounters</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 livestock-health">
<div class="panel-heading" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 zoonotic">
<div class="panel-heading" role="tab" id="headingFour">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<h2>Zoonotic Diseases</h2>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<h4>Bacterial</h4>
<h4>Fungal</h4>
<h4>Parasitic</h4>
<h4>Prionotic</h4>
<h4>Rickettsial</h4>
<h4>Spirochetes</h4>
<h4>Viral</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 allergies">
<div class="panel-heading" role="tab" id="headingFive">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h2>Allergies</h2>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<h4>Animal Allergies</h4>
<h4>Environmental Allergies</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 environment-health">
<div class="panel-heading" role="tab" id="headingSix">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<h2>Environmental Health</h2>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
my css
#accordion {
margin-top: 98px;
align-items: flex-start;
}
#accordion .panel {
border-width: 0;
padding: 0 !important;
border-radius: 0%;
}
#accordion .panel-heading {
height: 300px;
text-align: center;
color: #fff;
padding-top: 14%;
border-radius: 0%;
background-color: transparent !important;
align-items: flex-start;
}
#accordion .panel-heading h2 {
color: #fff;
}
#accordion .bites-stings {
background: url(http://chelmsfordmosquitocontrol.com/wp- content/uploads/2014/08/Mosquito-Bites.jpg) center center no-repeat;
background-size: cover;
}
#accordion .pet-health {
background: url(http://www.elainedecarlo.com/cats_dogs_2.jpg) center center
no-repeat;
background-size: cover;
}
#accordion .livestock-health {
background:
url(http://img11.nnm.me/0/f/c/2/2/849b5f5d84fed8199e0f71944dc.jpg) center
center no-repeat;
background-size: cover;
}
#accordion .allergies {
background:
url(http://www.westnebraska.com/cc-ChadronSP_FallColor_RickNeibel.jpg)
center center no-repeat;
background-size: cover;
}
#accordion .zoonotic {
background:
url(https://markingourterritory.files.wordpress.com/2015/01/20-92.jpg)
center center no-repeat;
background-size: cover;
}
#accordion .environment-health {
background:
url(http://www.keepmyplanetgreen.com/wp-content/uploads/2014/06/06-05-10- wind-turbines-stubble-field-and-storm-clouds-wtrmrk.jpg) bottom no-repeat;
background-size: cover;
}
#accordion .panel-collapse {
background-color: rgba(255,255,255,0.9);
}
#accordion .panel-body {
padding-top: 20px;
padding-bottom: 30px;
text-align: center;
}
http://codepen.io/aahmed2/pen/yOQvVz
Because this specific rule in bootstrap.min.css is being applied to all panels except your first one that is misaligned. Specifically because .panel+.panel means to apply to all .panel elements after another .panel element therefore, it being the first one has no predecessor .panel to target it.
.panel-group .panel+.panel{
margin-top: 5px;
}
As an alternative to #lamelemon's answer, you could try overriding the .panel + .panel rule in bootstrap.min.css by using this one instead.
.panel-group > .panel{
margin-top: 5px;
}
It means apply it to all first-level .panel that children of .panel-group.
You would add this rule at the end of your own CSS (as defined above)
(see updated code below - full page should show the desired effect)
#accordion {
margin-top: 98px;
align-items: flex-start;
}
#accordion .panel {
border-width: 0;
padding: 0 !important;
border-radius: 0%;
}
#accordion .panel-heading {
height: 300px;
text-align: center;
color: #fff;
padding-top: 14%;
border-radius: 0%;
background-color: transparent !important;
align-items: flex-start;
}
#accordion .panel-heading h2 {
color: #fff;
}
#accordion .bites-stings {
background: url(http://chelmsfordmosquitocontrol.com/wp-content/uploads/2014/08/Mosquito-Bites.jpg) center center no-repeat;
background-size: cover;
}
#accordion .pet-health {
background: url(http://www.elainedecarlo.com/cats_dogs_2.jpg) center center no-repeat;
background-size: cover;
}
#accordion .livestock-health {
background:url(http://img11.nnm.me/0/f/c/2/2/849b5f5d84fed8199e0f71944dc.jpg) center center no-repeat;
background-size: cover;
}
#accordion .allergies {
background:url(http://www.westnebraska.com/cc-ChadronSP_FallColor_RickNeibel.jpg) center center no-repeat;
background-size: cover;
}
#accordion .zoonotic {
background:url(https://markingourterritory.files.wordpress.com/2015/01/20-92.jpg) center
center no-repeat;
background-size: cover;
}
#accordion .environment-health {
background:url(http://www.keepmyplanetgreen.com/wp-content/uploads/2014/06/06-05-10-wind-turbines-stubble-field-and-storm-clouds-wtrmrk.jpg) bottom no-repeat;
background-size: cover;
}
#accordion .panel-collapse {
background-color: rgba(255,255,255,0.9);
}
#accordion .panel-body {
padding-top: 20px;
padding-bottom: 30px;
text-align: center;
}
.panel-group > .panel{
margin-top: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4 bites-stings">
<div class="panel-heading" role="tab" id="headingSeven">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven">
<div class="panel-body">
<h4>Mosquitoes</h4>
<h4>Ticks</h4>
<h4>Bees and Wasps</h4>
<h4>Animal Bites</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 pet-health">
<div class="panel-heading" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<h4>Pet Allergies</h4>
<h4>Toxic Plants</h4>
<h4>Pet and Wildlife Encounters</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 livestock-health">
<div class="panel-heading" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 zoonotic">
<div class="panel-heading" role="tab" id="headingFour">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<h2>Zoonotic Diseases</h2>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<h4>Bacterial</h4>
<h4>Fungal</h4>
<h4>Parasitic</h4>
<h4>Prionotic</h4>
<h4>Rickettsial</h4>
<h4>Spirochetes</h4>
<h4>Viral</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 allergies">
<div class="panel-heading" role="tab" id="headingFive">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h2>Allergies</h2>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<h4>Animal Allergies</h4>
<h4>Environmental Allergies</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4 environment-health">
<div class="panel-heading" role="tab" id="headingSix">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<h2>Environmental Health</h2>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
</div>
I have an in img in boostrap and i want it to show in right and to show 4 objects in the left in two rows each one has two objects which is 4 columns from the grid
My HTML
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product first wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro1.jpg" width="600" alt="" class="img-responsive" >
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Energy</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product second wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Phyto</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
<div class="banner">
<img src="http://placehold.it/300x450">
</div>
<div class="clearfix"></div>
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product second wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Phyto</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product second wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Phyto</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
</div> <!-- end of row-->
MY CSS
.product{ overflow: hidden; margin-bottom: 40px; position: relative; cursor: pointer; float: left;}
.product p {position: absolute; top: 10%; left:200%; color: white;
z-index: 2000; font-size: 20px; opacity:0; transition:all 0.5s;}
.product h6 {position: absolute; top: 40%; left:-200%; color: white;
z-index: 3000; font-size: 20px; opacity:0; transition:all 0.5s ; line-height: 20px;
transition-timing-function: cubic-bezier(0.000, 0.000, 0.580, 1.000); }
and this is the result that shows up
http://i.imgur.com/2PhECdx.jpg
I have modified your code to make two columns and the first column is containing two rows with two columns.
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 img-container">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 img-container">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 img-container">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 img-container">
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
</div>
</div>
Check this:
http://jsfiddle.net/h68hzfnc/