JSSOR Slider: change tiled menu slider layout from 2 to 4 rows? - slider

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

Select dynamic dropdown issue

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>

Trying to find dynamic xpath for the "view report" button

<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]

Need to summarize a dynamic xpath

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']

How do I align the top elements in my three column Bootstrap collapsing accordion?

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>

Align item in bootstrap navbar

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!