How can I add 2 more rows to the JSSOR tiled menu slider? Thank you.
Given a slide defined as follows, you will see all content in a slide is fully customizable. To define 4 rows instead of 2 rows, you can edit css.
<div>
<a class=appicon01 style="left: 0px; top: 0px; background-position:0px 0px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 01</div>
</a>
<a class=appicon01 style="left: 160px; top: 0px; background-position:-160px 0px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 02</div>
</a>
<a class=appicon01 style="left: 320px; top: 0px; background-position:-320px 0px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 03</div>
</a>
<a class=appicon01 style="left: 480px; top: 0px; background-position:-480px 0px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 04</div>
</a>
<a class=appicon01 style="left: 640px; top: 0px; background-position:-640px 0px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 05</div>
</a>
<a class=appicon01 style="left: 0px; top: 160px; background-position:0px -160px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 06</div>
</a>
<a class=appicon01 style="left: 160px; top: 160px; background-position:-160px -160px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 07</div>
</a>
<a class=appicon01 style="left: 320px; top: 160px; background-position:-320px -160px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 08</div>
</a>
<a class=appicon01 style="left: 480px; top: 160px; background-position:-480px -160px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 09</div>
</a>
<a class=appicon01 style="left: 640px; top: 160px; background-position:-640px -160px;" href="#">
<div class=appiconcb></div>
<div class=appiconc>Menu Item 10</div>
</a>
</div>
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>
<div data-component-id="flexipage_reportChart8" data-aura-rendered-by="820:0" class="flexipageComponent" data-aura-class="flexipageComponent" xpath="1">
<article class="slds-card slds-card_boundary forceBaseCard flexipageCard flexipageReportChart" aria-describedby="header_923:0" data-aura-rendered-by="926:0" data-aura-class="forceBaseCard flexipageCard flexipageReportChart">
<div class="slds-card__header slds-grid" data-aura-rendered-by="146:1058;a">
<header class="slds-media slds-media--center slds-has-flexi-truncate" data-aura-rendered-by="148:1058;a">
<!--render facet: 150:1058;a-->
<div class="slds-media__body" data-aura-rendered-by="153:1058;a">
<h2 class="header-title-container" id="header_923:0" data-aura-rendered-by="154:1058;a"><span class="slds-card__header-title slds-truncate" title="More" data-aura-rendered-by="155:1058;a">More</span></h2></div>
</header>
<!--render facet: 157:1058;a-->
</div>
<div class="slds-card__body slds-card__body--inner" data-aura-rendered-by="928:0">
<div class="width_auto analyticsEmbeddedReportChart" data-aura-rendered-by="4:1058;a" data-aura-class="analyticsEmbeddedReportChart">
<!--render facet: 5:1058;a-->
<div class="outerbound" data-aura-rendered-by="10:1058;a">
<div class="chartContainer size_auto" data-aura-rendered-by="11:1058;a">
<!--render facet: 17:1058;a-->
<div class="autoWidth analyticsEmbeddedChart" style="height:300px;" data-aura-rendered-by="25:1058;a" data-aura-class="analyticsEmbeddedChart">
<div class="loadingMask hideLoading" data-aura-rendered-by="26:1058;a">
<div class="loadingPanel" data-aura-rendered-by="27:1058;a"></div><span class="loadingMsg" data-aura-rendered-by="28:1058;a">Loading report chart...</span></div>
<!--render facet: 30:1058;a-->
<!--render facet: 75:1058;a-->
<!--render facet: 82:1058;a-->
<!--render facet: 96:1058;a-->
<div class="eclair-component-container reportsEclairChart" data-aura-rendered-by="106:1058;a" data-aura-class="reportsEclairChart">
<div class="eclair-component-chart ng-cursor-default" data-aura-rendered-by="107:1058;a" data-ngname="chart_5" style="width: 380.844px;">
<div style="position: relative;">
<div style="z-index: 2; position: absolute; overflow: hidden; background-color: rgba(255, 255, 255, 0); width: 380.844px; height: 300px; left: 0px; top: 0px;" class="ps-container" data-ps-id="414c4b20-2e6b-f1a2-2116-7ff0144f88a4">
<div style="width: 381px; height: 300px;"></div>
<div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px;">
<div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px;">
<div class="ps-scrollbar-y" style="top: 0px; height: 0px;"></div>
</div>
</div>
<canvas class="chart" style="z-index: 1; position: absolute; -webkit-font-smoothing: antialiased; width: 380.844px; height: 300px; left: 0px; top: 0px;" width="571" height="450"></canvas>
<button aria-live="polite" class="reportsEclairChart ng-button assistiveText">Enable Tab Navigation for This Chart<span class="assistiveText">Enable table equivalent for screen reader users</span></button>
</div>
<div data-ngname="legend_chart_5" style="">
<div style="position: relative;">
<div class="ps-container" data-ps-id="1d1e50a4-a66a-2415-9d77-2a3c62481170" style="z-index: 3; position: absolute; overflow: hidden; background-color: rgba(255, 255, 255, 0); width: 124px; height: 88px; left: 254.844px; top: 2px;">
<div style="width: 124.88px; height: 86px;"></div>
<div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px;">
<div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px;">
<div class="ps-scrollbar-y" style="top: 0px; height: 0px;"></div>
</div>
</div>
<canvas class="legend" style="z-index: 2; position: absolute; -webkit-font-smoothing: antialiased; width: 124px; height: 88px; left: 254.844px; top: 2px;" width="186" height="132"></canvas>
</div>
</div>
<div class="ng-annotations-container" style="margin: 2px; width: 376.844px; height: 296px;"></div>
</div>
<div class="error-div hide" data-aura-rendered-by="108:1058;a"></div><span class="eclair-component-alt-text" data-aura-rendered-by="109:1058;a">Chart: Untitled</span></div>
<!--render facet: 111:1058;a-->
</div>
</div>
</div>
<DIV CLASS="LIGHTNING" DATA-AURA-RENDERED-BY="113:1058;A"><SPAN CLASS="REPORTFOOTER" DATA-AURA-RENDERED-BY="114:1058;A"><BUTTON CLASS="SLDS-BUTTON NAVIGATEBUTTON UIBUTTON" ARIA-LIVE="OFF" TYPE="BUTTON" DATA-AURA-RENDERED-BY="118:1058;A" DATA-AURA-CLASS="UIBUTTON"><!--RENDER FACET: 119:1058;A--><SPAN CLASS=" LABEL BBODY" DIR="LTR" DATA-AURA-RENDERED-BY="121:1058;A">VIEW REPORT</SPAN>
<!--render facet: 123:1058;a-->
</button>
<div class="refreshContainer" data-aura-rendered-by="125:1058;a"><span class="asOfDate" data-aura-rendered-by="128:1058;a">As of Yesterday at 10:15 AM</span>
<button class="slds-button refreshButton uiButton" aria-live="off" type="button" data-aura-rendered-by="137:1058;a" data-aura-class="uiButton">
<!--render facet: 138:1058;a--><span class="assistiveText" data-aura-rendered-by="141:1058;a">Refresh</span>
<lightning-icon class="slds-icon-utility-refresh slds-icon_container" data-data-rendering-service-uid="602" data-aura-rendered-by="135:1058;a">
<lightning-primitive-icon lightning-primitiveicon_primitiveicon-host="">
<svg lightning-primitiveIcon_primitiveIcon="" focusable="false" data-key="refresh" aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon_xx-small">
<use lightning-primitiveIcon_primitiveIcon="" xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg?cache=9.28.0#refresh"></use>
</svg>
</lightning-primitive-icon><span class="slds-assistive-text">Refresh</span></lightning-icon>
</button>
</div>
</span>
</div>
</div>
</div>
<div class="slds-card__footer" data-aura-rendered-by="930:0">
<!--render facet: 931:0-->
</div>
</article>
</div>
I am trying to find a dynamic xpath for a large section of code. When I pull the dynamic xpath from chropath, I receive a very large response, which is too large to include in the test
I've tried trimming the dynamic xpath pulled from chropath but cannot seem to do so. I have capitalized the section of the code that is relevant.
More
Loading report chart...
Enable Tab Navigation for This ChartEnable table equivalent for screen reader users
Chart: Untitled
<!--render facet: 111:1058;a-->
</div>
</div>
</div>
<DIV CLASS="LIGHTNING" DATA-AURA-RENDERED-BY="113:1058;A"><SPAN CLASS="REPORTFOOTER" DATA-AURA-RENDERED-BY="114:1058;A"><BUTTON CLASS="SLDS-BUTTON NAVIGATEBUTTON UIBUTTON" ARIA-LIVE="OFF" TYPE="BUTTON" DATA-AURA-RENDERED-BY="118:1058;A" DATA-AURA-CLASS="UIBUTTON"><!--RENDER FACET: 119:1058;A--><SPAN CLASS=" LABEL BBODY" DIR="LTR" DATA-AURA-RENDERED-BY="121:1058;A">VIEW REPORT</SPAN>
<!--render facet: 123:1058;a-->
</button>
<div class="refreshContainer" data-aura-rendered-by="125:1058;a"><span class="asOfDate" data-aura-rendered-by="128:1058;a">As of Yesterday at 10:15 AM</span>
<button class="slds-button refreshButton uiButton" aria-live="off" type="button" data-aura-rendered-by="137:1058;a" data-aura-class="uiButton">
<!--render facet: 138:1058;a--><span class="assistiveText" data-aura-rendered-by="141:1058;a">Refresh</span>
<lightning-icon class="slds-icon-utility-refresh slds-icon_container" data-data-rendering-service-uid="602" data-aura-rendered-by="135:1058;a">
<lightning-primitive-icon lightning-primitiveicon_primitiveicon-host="">
<svg lightning-primitiveIcon_primitiveIcon="" focusable="false" data-key="refresh" aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon_xx-small">
<use lightning-primitiveIcon_primitiveIcon="" xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg?cache=9.28.0#refresh"></use>
</svg>
</lightning-primitive-icon><span class="slds-assistive-text">Refresh</span></lightning-icon>
</button>
</div>
</span>
</div>
</div>
</div>
<div class="slds-card__footer" data-aura-rendered-by="930:0">
<!--render facet: 931:0-->
</div>
</article>
I need a shorter dynamic xpath
Does this work?
//button[text() = 'VIEW REPORT' or text() = 'view report' or text() = 'View Report']
If there are multiple View Report links showing up in the page, you can choose an item like
(//button[text() = 'view report'])[1]
I have a far too large dynamic xpath and would like to know if there is a shortened version that can be used. This is for a legend to a chart object, "Campaign Response" (which cannot be found by contains(text(), as it is embedded within the chart and isn't recognized as a string.) There are 4 locations of "Campaign Response" at different locations on different charts on the same screen.
I've tried using dynamic (//) body//section//div etc, and tend to wind up with something that grabs multiple objects.
//body[contains(#class,'desktop')]
/div[contains(#class,'desktop container forceStyle oneOne
lafStandardLayoutContainer lafAppLayoutHost forceAccess forceStyle
oneOne')]
/div[contains(#class,'viewport')]
/section[contains(#class,'stage panelSlide hasFixedFooter')]
/div[#id='brandBand_1']
/div[contains(#class,'slds-template__container')]
/div[contains(#class,'center oneCenterStage lafSinglePaneWindowManager')]
/div[contains(#class,'windowViewMode-normal oneContent active lafPageHost')]
/div[contains(#class,'container homeLanding')]
/div[contains(#class,'flexipagePage')]
/div[contains(#class,'responsiveContents homeDesktopTemplate')]
/div[contains(#class,'colMain')]
/div[contains(#class,'bottomWrapper')]
/div[contains(#class,'bottomLeft')]
/div[4]
/article[1]
/div[2]
/div[1]
/div[1]
/div[1]
/div[1]
/div[2]
/div[1]
/div[2]
/div[1]
/div[1]
html snippet - DIV CLASS="PS-CONTAINER" DATA-PS-ID="70C963EF-4CA2-07A3-6B48-394D11135709" is what is highlighted when looking at the code.
<div class="loadingPanel" data-aura-rendered-by="27:812;a"></div><span class="loadingMsg" data-aura-rendered-by="28:812;a">Loading report chart...</span></div>
<!--render facet: 75:812;a-->
<!--render facet: 82:812;a-->
<!--render facet: 96:812;a-->
<div class="eclair-component-container reportsEclairChart" data-aura-rendered-by="106:812;a" data-aura-class="reportsEclairChart" style="">
<div class="eclair-component-chart" data-aura-rendered-by="107:812;a" data-ngname="chart_0" style="width: 464.609px;">
<div style="position: relative;">
<div style="z-index: 2; position: absolute; overflow: hidden; background-color: rgba(255, 255, 255, 0); width: 464.609px; height: 300px; left: 0px; top: 0px;" class="ps-container" data-ps-id="aee85f92-8bd4-9aeb-b095-68aac4a00821">
<div style="width: 465px; height: 300px;"></div>
<div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px;">
<div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px;">
<div class="ps-scrollbar-y" style="top: 0px; height: 0px;"></div>
</div>
</div>
<canvas class="chart" style="z-index: 1; position: absolute; -webkit-font-smoothing: antialiased; width: 464.609px; height: 300px; left: 0px; top: 0px;" width="464" height="300"></canvas>
<button aria-live="polite" class="reportsEclairChart ng-button assistiveText">Enable Tab Navigation for This Chart<span class="assistiveText">Enable table equivalent for screen reader users</span></button>
</div>
<div data-ngname="legend_chart_0" style="">
<div style="position: relative;">
<DIV CLASS="PS-CONTAINER" DATA-PS-ID="70C963EF-4CA2-07A3-6B48-394D11135709" STYLE="">
<div style=""></div>
<div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px;">
<div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px;">
<div class="ps-scrollbar-y" style="top: 0px; height: 0px;"></div>
</div>
</div>
<canvas class="legend" style="z-index: 2; position: absolute; -webkit-font-smoothing: antialiased; width: 124px; height: 88px; left: 338.609px; top: 2px;" width="124" height="88"></canvas>
</div>
</div>
<div class="ng-annotations-container" style="margin: 2px; width: 460.609px; height: 296px;"></div>
</div>
<div class="error-div hide" data-aura-rendered-by="108:812;a"></div><span class="eclair-component-alt-text" data-aura-rendered-by="109:812;a">Chart: Priority Campaigns by Response</span></div>
<!--render facet: 111:812;a-->
</div>
</div>
</div>
<div class="lightning" data-aura-rendered-by="113:812;a"><span class="reportFooter" data-aura-rendered-by="114:812;a"><button class="slds-button navigateButton uiButton" aria-live="off" type="button" data-aura-rendered-by="118:812;a" data-aura-class="uiButton"><!--render facet: 119:812;a--><span class=" label bBody" dir="ltr" data-aura-rendered-by="121:812;a">View Report</span>
<!--render facet: 123:812;a-->
</button>
<div class="refreshContainer" data-aura-rendered-by="125:812;a"><span class="asOfDate" data-aura-rendered-by="128:812;a">As of Today at 10:33 AM</span>
<button class="slds-button refreshButton uiButton" aria-live="off" type="button" data-aura-rendered-by="137:812;a" data-aura-class="uiButton">
<!--render facet: 138:812;a--><span class="assistiveText" data-aura-rendered-by="141:812;a">Refresh</span>
<lightning-icon class="slds-icon-utility-refresh slds-icon_container" data-data-rendering-service-uid="393" data-aura-rendered-by="135:812;a">
<lightning-primitive-icon lightning-primitiveicon_primitiveicon-host="">
<svg lightning-primitiveIcon_primitiveIcon="" focusable="false" data-key="refresh" aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon_xx-small">
<use lightning-primitiveIcon_primitiveIcon="" xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg?cache=9.28.0#refresh"></use>
</svg>
</lightning-primitive-icon><span class="slds-assistive-text">Refresh</span></lightning-icon>
</button>
</div>
</span>
</div>
I presume you want to access the span tag contains Priority Campaigns by Response
Try following xpath:
//span[#class='eclair-component-alt-text'][contains(.,'Campaigns by Response')]
OR
//div[#data-aura-class='reportsEclairChart']//span[#class='eclair-component-alt-text'][contains(.,'Campaigns by Response')]
Edited
To access the canvas element try below xpath.
//div[#class='PS-CONTAINER']/following::canvas[#class='legend']
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'm absolutly stacked while trying to align item in bootstrap navbar vertically on both desctop and mobile view.
Does anybody can explain how to di it?
I need to align avatar and name to right side on desctop and mobile and centerd vertially in navbar.
Here the HTML code:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href="#"><b>Super</b> logo</a>
</div>
<div class="nav navbar-nav navbar-right">
<ul class="unstyled">
<li>
<a href="/profile">
<img class="img-rounded" src="http://lorempixel.com/output/people-q-c-150-150-9.jpg" alt="">
<span class="hidden-xs">User name</span>
</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse" id="main-nav">
<ul class="nav navbar-nav visible-xs">
<li><i class="fa fa-tachometer"></i> menu 1</li>
<li><i class="fa fa-wrench"></i> menu 2</li>
<li><i class="fa fa-sign-out"></i> menu 3</li>
</ul>
</div>
</div></nav>
and CSS
.navbar-toggle {
position: absolute;
left: 10px;
}
.logo {
width: 100%;
padding: 15px 0;
text-align: center;
height: 20px;
}
.img-rounded {
height: 35px;
width: 35px;
border-radius: 50%;
}
.unstyled li {
list-style: none;
}
.unstyled a {
text-decoration: none;
}
#media only screen and (min-width: 768px) {
.logo {
width: 150px;
}
}
Here is a wrong eximple.
http://www.bootply.com/zh0J2u4KUU
updated use this
#media (max-width: 767px)
{
ol, ul{margin-top:6px; margin-right:302px;
}
<ul class="unstyled pull-right">
<li>
*******
</li>
</ul>
change the logo class to pull-right!