I can't crop the photos on my site for size - size

I have a problem, I made opinions except that their profile picture is not fit with the others, how to fit them all the same size?
<h3>๐’๐ฒ๐ง๐€๐ณ๐Ž๐ง๐Ÿ๐Ÿ•๐ฆ๐ฌ#0001</h3>
<h4></h4>
<div class="stars">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
</div>
</div>
<p>
<i class="bi bi-quote quote-icon-left"></i>
Bah moi je dirais pas chรจre bonne qualitรฉ
<i class="bi bi-quote quote-icon-right"></i>
</p>
</div>
</div>
</div><!-- End testimonial item -->
<div class="swiper-slide">
<div class="testimonial-wrap">
<div class="testimonial-item">
<div class="d-flex align-items-center">
<img src="assets/img/telecharge.jpg" class="testimonial-img flex-shrink-0" alt="">
<div>
<h3>M4ROU3NE#1300</h3>
<h4></h4>
<div class="stars">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
</div>
</div>
<p>
<i class="bi bi-quote quote-icon-left"></i>
Les prix sont raisonnable Nitro boost pas cher
<i class="bi bi-quote quote-icon-right"></i>
I want their photo size to match the others

Related

selenium : how to click() elements inside div data-marker=""

I have this element where the code of the content is not inside normal html marks but inside a data-marker attribute of div :
<div class="profil-block d-flex firm" data-lat="45.812122" data-lon="3.112388" data-title="AGC CEGESMA" data-marker="<div class="profil-block firm w-auto m-0 p-0 no-box-shadow">
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" class="d-block text-center">
<img class="avatar" src="/build/images/content/cabinet-anonyme.aa87fff0.svg"/>
</a>
<div class="name w-auto mt-2">
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" class="text-decoration-none">AGC CEGESMA</a>
</div>
<span class="address">
<svg class="primary-red-icon mb-1" width="18" height="18">
<use xlink:href="/build/images/design/icon-lieu-sprite.be93487d.svg#icon-lieu"/>
</svg>
Clermont-Ferrand (63100)
</span>
<div class="info d-flex flex-row mt-2 justify-content-between align-items-center">
<div class="d-flex">
<span role="button" class="icon-block mr-2 firm-phone cursor-pointer" data-id="260000451205">
<svg class="icon icon-tel"><use xlink:href="/build/images/design/contact-icons-sprite.7e44022e.svg#icone-tel"></use></svg>
</span>
<span role="button" class="icon-block firm-contact cursor-pointer" data-id="260000451205">
<svg class="icon icon-mail"><use xlink:href="/build/images/design/contact-icons-sprite.7e44022e.svg#icone-mail"></use></svg>
</span>
</div>
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" class="d-flex flex-column text-decoration-none">
<span class="knowMore">En savoir</span>
<img src="/build/images/design/plus.b2364558.svg" class="icon-more">
</a>
</div>
</div>
">
<div class="d-flex align-items-start">
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" title="En savoir plus sur le cabinet AGC CEGESMA">
<img src="/build/images/content/cabinet-anonyme.aa87fff0.svg" class="avatar" alt="AGC CEGESMA โ€“ Expert-comptable logo">
</a>
<div class="d-desktop-none">
<h3 class="name">
AGC CEGESMA
</h3>
<span class="address">
<svg class="primary-red-icon mb-1" width="18" height="18">
<title>Adresse</title>
<use xlink:title="" xlink:href="/build/images/design/icon-lieu-sprite.be93487d.svg#icon-lieu"></use>
</svg>
Clermont-Ferrand (63100)
</span>
</div>
</div>
<div class="d-flex flex-column justify-content-between -medium">
<div class="d-desktop-block">
<div class="name">
AGC CEGESMA
</div>
<span class="address">
<svg class="primary-red-icon mb-1" width="18" height="18">
<title>Adresse</title>
<use xlink:href="/build/images/design/icon-lieu-sprite.be93487d.svg#icon-lieu"></use>
</svg>
Clermont-Ferrand (63100)
</span>
</div>
<div class="competence-list">
<div class="competence ">RAY Franรงois</div>
</div>
</div>
<div class="info d-flex justify-content-between">
<div class="d-flex">
<div role="button" class="icon-block mr-2 firm-phone cursor-pointer" data-id="260000451205" title="Contacter le cabinet AGC CEGESMA par tรฉlรฉphone">
<svg class="icon icon-tel"><use xlink:href="/build/images/design/contact-icons-sprite.7e44022e.svg#icone-tel"></use></svg>
</div>
<div role="button" class="icon-block firm-contact cursor-pointer" data-id="260000451205" title="Contacter le cabinet AGC CEGESMA par mail">
<svg class="icon icon-mail"><use xlink:href="/build/images/design/contact-icons-sprite.7e44022e.svg#icone-mail"></use></svg>
</div>
</div>
<a href="/expert-comptable/5213-agc-cegesma-clermont-ferrand-63100" class="d-flex flex-column text-decoration-none" title="En savoir plus sur le cabinet AGC CEGESMA">
<span class="knowMore">En savoir</span>
<img src="/build/images/design/plus.b2364558.svg" class="icon-more">
</a>
</div>
</div>
I can retrieve the content with driver.find_elements(by=By.XPATH, value='//div[#class="profil-block d-flex firm"]').get_attribute('data-marker'), but then how to i select some buttons for example inside this attribute?
I need selenium to click a link inside this data-marker code
Thank you
I don't think it is possible to click on an element thats only in the data-marker. In your situation though you can just locate this element:
This code should work for locating that element:
driver.find_elements(by=By.XPATH, value='//div[#class="icon-block firm-contact cursor-pointer"]')

Boostrap 3 - thumbnail images alignment problem

how to align them in a row with equal height.
<div id="about-page-contain">
<div class="">
<div class="row equal">
<div class="wwd">
<div class="col-md-12">
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/plots">
<img src="/public/uploadfiles/images/be71f72e-b2e6-4dab-8dd4-8bc4d48365b8.jpg" alt="PLOTS" style="">
<div class="caption" style="text-align:center;">
<p>PLOTS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/flats">
<img src="/public/uploadfiles/images/ff74dcc3-71b4-4d35-b53b-77c6c36a0947.jpg" alt="FLATS" style="">
<div class="caption" style="text-align:center;">
<p>FLATS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/farm-land">
<img src="/public/uploadfiles/images/06fdde52-b169-45eb-a96a-ec1dd07f15e5.jpg" alt="FARM LAND" style="">
<div class="caption" style="text-align:center;">
<p>FARM LAND</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/development-sites">
<img src="/public/uploadfiles/images/45d18935-9220-41ed-8f58-4aa3a16be8a8.jpg" alt="DEVELOPMENT SITES" style="">
<div class="caption" style="text-align:center;">
<p>DEVELOPMENT SITES</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/development-lands-for-plots">
<img src="/public/uploadfiles/images/d85c0a59-2d35-4f24-830b-8cfe606f8caf.png" alt="DEVELOPMENT LANDS FOR PLOTS" style="">
<div class="caption" style="text-align:center;">
<p>DEVELOPMENT LANDS FOR PLOTS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/independent-houses">
<img src="/public/uploadfiles/images/5d265aad-31ef-4285-94a3-3aaeb0111e7a.jpg" alt="INDEPENDENT HOUSES" style="">
<div class="caption" style="text-align:center;">
<p>INDEPENDENT HOUSES</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/outrate-lands-for-appt-&-plots">
<img src="/public/uploadfiles/images/8d3cfcec-5415-422c-8426-665271216009.jpg" alt="OUTRATE LANDS FOR APPT & PLOTS" style="">
<div class="caption" style="text-align:center;">
<p>OUTRATE LANDS FOR APPT & PLOTS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/commercial-properties">
<img src="/public/uploadfiles/images/707cc088-4383-4423-8172-2fb2d9efa46d.jpg" alt="COMMERCIAL PROPERTIES" style="">
<div class="caption" style="text-align:center;">
<p>COMMERCIAL PROPERTIES</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/independent-villas-in-prime-locations">
<img src="/public/uploadfiles/images/c2a9b09c-94bd-43ee-92ae-db4c587dd8eb.jpg" alt="INDEPENDENT VILLAS IN PRIME LOCATIONS" style="">
<div class="caption" style="text-align:center;">
<p>INDEPENDENT VILLAS IN PRIME LOCATIONS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/construction-contract">
<img src="/public/uploadfiles/images/5f253c56-7f4d-4e61-9359-f5b2f7748443.jpg" alt="CONSTRUCTION CONTRACT" style="">
<div class="caption" style="text-align:center;">
<p>CONSTRUCTION CONTRACT</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
There are a few issues here:
You have a class of wwd that we cannot see. Is that applying some styles of some sort?
Each image has a blank style="" class. Why is that there?
If I remove the link to the bootstrap styles I do not see any difference in applied styles.
the image sizes of your images can affect the layout and there are no actual links to the image so it makes it difficult to reproduce. Include the full links in your example to make it easier to reproduce.
I created a codepen with a fake image but I don't see the issue you are seeing.
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/flats">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt="DEVELOPMENT SITES" style="" width="100px">
<div class="caption" style="text-align:center;">
<p>FLATS</p>
</div>
</a>
</div>
</div>
How about this example?
<div class = "row">
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
</div>

VueJS v-model in v-for not reactive

Consider the following:
<ul class="park-list row row-pd">
<li class="col-12" v-for="(item, index) in list.items" v-bind:key="index">
<div class="park-note px-3 py-2">
<p class="font-italic" >
{{ item.notes }} <a v-bind:href="'#collapseNoteTest'+item.id"
data-toggle="collapse" role="button" aria-expanded="false"
v-bind:aria-controls="'#collapseNoteTest'+item.id">
<i class="svg-12 ic-cyan-path" v-html="icons['ic-edit']"></i></a>
</p>
<div class="collapse" v-bind:id="'collapseNoteTest'+item.id">
<div class="form-group">
<label for="exampleFormControlTextarea1">Note:</label>
<textarea class="form-control" v-model="item.notes" rows="3"></textarea>
</div>
<div class="form-row">
<div class="col-auto ml-auto">
<button type="button" class="btn btn-outline-primary" v-bind:href="'#collapseNoteTest'+item.id" data-toggle="collapse">Cancel</button>
</div>
<div class="col-auto">
<button class="btn btn-success mb-2" v-bind:href="'#collapseNoteTest'+item.id" data-toggle="collapse">Save</button>
</div>
</div>
</div>
</div>
</li>
</ul>
No matter what I do here, item.notes does not update when I enter text into the textarea. What am I doing wrong?

how to put 4 thumbnails on a sidebar

I have a sidebar which is col-md-2. now I need to put 4 thumbnail next to each other on this sidebar that picture of them would be responsive. whith this code image become bigger when I resize the window (make window smaller)
<div class=col-md-2>
<div class=row>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div><!--end of row>
<div>

Selenium - click the second prompt with same ID

I have a complex HTML like the below.There are at least two elements with data-automation-id='promptIcon' attribute. In Selenium IDE //*[#data-automation-id='promptIcon']/ selected the first occurrence (i.e. next to the label Category). Now I would like to click/select the second element with data-automation-id='promptIcon' attribute (next to the label Owner). How best to accomplish this?
<div class="GB-VO1SBAIJ">
<div class="GB-VO1SBNHJ" style="left: 0%;">
<div id="wd-EditPage-1$4296" class="GB-VO1SBOXH GB-VO1SBHXH GB-VO1SBJXH GB-VO1SBJN">
<div class="GB-VO1SBBYH">
<div class="GB-VO1SBJN" id="wd-PageContent-6$8263">
<div class="GB-VO1SBAJH">
<div class="GB-VO1SBIIH">
<div id="wd-Panel-6$8269" data-automation-id="panel" class="GB-VO1SBF1J GB-VO1SBJN">
<div class="gwt-Label GB-VO1SBJ1J GB-VO1SBI1J">
</div>
<div class="GB-VO1SBH1J">
<div class="GB-VO1SBAJH GB-VO1SBG1J">
<ul role="presentation" class="GB-VO1SBNHH GB-VO1SBGIH">
<li role="presentation" class="GB-VO1SBDHH GB-VO1SBJIH">
<div class="GB-VO1SBFHH">
<label data-automation-id="formLabel" id="15$20858--uid318-formLabel">Category<span class="gwt-InlineLabel GB-VO1SBDIH"> Required</span>
</label>
<div aria-hidden="true" class="GB-VO1SBGHH wd-5b94a643-7d98-473f-b3a4-be58aaf8d4f5">Category</div>
</div>
<div class="GB-VO1SBHHH">
<div aria-labelledby="15$20858--uid318-formLabel" aria-invalid="false" tabindex="-2" id="15$20858--uid318" data-automation-id="responsiveMonikerInput" class="GB-VO1SBCFL GB-VO1SBJN GB-VO1SBIEL GB-VO1SBPFL GB-VO1SBNFL">
<div class="GB-VO1SBHFL">
<ul data-automation-id="selectedItemList" role="list" class="GB-VO1SBJUI GB-VO1SBOUI GB-VO1SBGFL" tabindex="-2">
<li class="GB-VO1SBNUI">
<div id="-uid331" role="menuitem" tabindex="-2" class="GB-VO1SBFUI GB-VO1SBMUI">
<div data-automation-id="selectedItem_2200$2" class="GB-VO1SBDVH">
<ul role="presentation" class="GB-VO1SBFUH GB-VO1SBLUH">
<li class="GB-VO1SBCVH">
<i title="Clear Value" class="GB-VO1SBCIF GB-VO1SBJ1I GB-VO1SBB1I GB-VO1SBHUH" data-automation-id="DELETE_charm" role="presentation" data-icon-rtl-id="๎€ˆ" data-icon-id="๎€ˆ">
</i>
</li>
</ul>
<div title="Common" data-automation-label="Common" data-automation-id="promptOption" class="gwt-Label GB-VO1SBEVH">Common</div>
<ul class="GB-VO1SBFUH">
</ul>
</div>
</div>
</li>
<li class="GB-VO1SBNUI">
<div id="-uid332" role="menuitem" tabindex="-2" class="GB-VO1SBFUI GB-VO1SBMUI">
<div data-automation-id="selectedItem_2200$3" class="GB-VO1SBDVH">
<ul role="presentation" class="GB-VO1SBFUH GB-VO1SBLUH">
<li class="GB-VO1SBCVH">
<i title="Clear Value" class="GB-VO1SBCIF GB-VO1SBJ1I GB-VO1SBB1I GB-VO1SBHUH" data-automation-id="DELETE_charm" role="presentation" data-icon-rtl-id="๎€ˆ" data-icon-id="๎€ˆ">
</i>
</li>
</ul>
<div title="Absence" data-automation-label="Absence" data-automation-id="promptOption" class="gwt-Label GB-VO1SBEVH">Absence</div>
<ul class="GB-VO1SBFUH">
</ul>
</div>
</div>
</li>
</ul>
</div>
<span tabindex="0" data-automation-id="promptIcon" title="Prompt" class="GB-VO1SBBGL">
<i class="GB-VO1SBCIF GB-VO1SBCGL" data-automation-id="icon" role="presentation" data-icon-rtl-id="๎€„" data-icon-id="๎€„">
</i>
</span>
<div aria-hidden="true" tabindex="0" style="display: none;" class="GB-VO1SBP3I" role="button" data-automation-morelinkexpanded="false" data-automation-id="wd-MoreLink">
<img alt="" draggable="false" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="gwt-Image GB-VO1SBPII GB-VO1SBB4I">
<span title="More (-3)" class="GB-VO1SBC4I">More (-3)</span>
</div>
</div>
</div>
</li>
<li role="presentation" class="GB-VO1SBDHH">
<div class="GB-VO1SBFHH">
<label data-automation-id="formLabel" id="15$26787--uid319-formLabel">Owner</label>
<div aria-hidden="true" class="GB-VO1SBGHH wd-5b94a643-7d98-473f-b3a4-be58aaf8d4f5">Owner</div>
</div>
<div class="GB-VO1SBHHH">
<div aria-labelledby="15$26787--uid319-formLabel" aria-invalid="false" tabindex="-2" id="15$26787--uid319" data-automation-id="responsiveMonikerInput" class="GB-VO1SBCFL GB-VO1SBJEL GB-VO1SBJN GB-VO1SBIEL">
<div class="GB-VO1SBHFL">
<ul data-automation-id="selectedItemList" role="menu" class="GB-VO1SBJUI GB-VO1SBGFL GB-VO1SBOUI" tabindex="-2">
</ul>
</div>
<span tabindex="0" data-automation-id="promptIcon" title="Prompt" class="GB-VO1SBBGL">
<i class="GB-VO1SBCIF GB-VO1SBCGL" data-automation-id="icon" role="presentation" data-icon-rtl-id="๎€„" data-icon-id="๎€„">
</i>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="GB-VO1SBIYH">
</div>
<footer class="GB-VO1SBCYH">
<div>
<div data-automation-id="toolbarSupportingWidgetsContainer" class="GB-VO1SBOOE GB-VO1SBAOE">
<div class="GB-VO1SBLNE">
<div class="GB-VO1SBMNE">
<div class="GB-VO1SBCOE">
</div>
<div class="GB-VO1SBPOE">
</div>
</div>
</div>
<div>
<div class="gwt-Label GB-VO1SBDNE">
</div>
</div>
</div>
<div class="GB-VO1SBCPE GB-VO1SBEPE">
</div>
</div>
</footer>
</div>
</div>
</div>
If you are using XPath, there is a easy way to do it:
//*[#data-automation-id='promptIcon'][2]
Explaining:
//*[#data-automation-id='promptIcon']
It is your actual xpath, will select any html tag that has a attr named "data-automation-id" with the exactly value "promptIcon".
[2]
The element node that you want to select. if you put [5], XPath will try to select the 5ยฐ result in this html, based in what note you're calling it.