I need a blade component to emit an AlpineJS click event to use it on several places. I made some tests but I can't get it working.
This works fine:
<div x-data="{open:false}">
<button x-on:click.window="open = true">Open</button>
<div x-show="open">
<div style="width: 100px; height: 100px; background-color: #0a6ebd; border-radius: 15px;">
</div>
</div>
But if I wrap the button in a blade component, I doesn's work:
<div x-data="{open:false}">
<x-my-button x-on:click.window="open = true"></x-my-button>
<div x-show="open">
<div style="width: 100px; height: 100px; background-color: #0a6ebd; border-radius: 15px;">
</div>
</div>
The blade component is the button:
<button>Open</button>
How can I emit the click event to the parent?
Just need to pass $attributes to blade component:
<button {{$attributes}}>Open</button>
Related
I know little about Laravel and Masonry grid layout, but I know how Bootstrap framework works.
I need to change the number of columns in a Boostrap grid for small size devices like a mobile phone. Currently, the number of columns is 3 because the class used is col-xs-4. However, I need to change it to col-xs-6, so that it shows 2 columns.
I don't think it's that hard, but I don't know how Laravel works.
I tried searching for those divs in the whole project so that I could directly change those classes, but I couldn't find anything.
This is an example of one column in a row:
<div class="container-fluid">
<div class="row">
<div class="fw-divider-space hidden-below-xl pt-70"></div>
<div class="col-lg-12">
<div data-animation="fadeInDown" class="row isotope-wrapper masonry-layout c-gutter-5 c-mb-5 animate animated fadeInDown" style="position: relative; height: 798px;">
<div class="col-sm-3 col-lg-3 col-lgx-3 col-xl-3 col-xs-4 col-4" style="position: absolute; left: 0%; top: 0px;">
<div class="vertical-item item-gallery content-absolute text-center ds">
<a href="https://www.tusencuentros.cl/modelo/9/ver" class="item-media h-100 w-100 d-block"><img src="https://www.tusencuentros.cl/storage/fotos_perfil/9-1.jpg" alt="Modelo">
<div class="media-links"></div>
</a>
<img src="https://clubvip.cl/storage/watsapp_logo.png" style="width: 40px; height: 40px; margin-top: 5px;"> <i aria-hidden="true" class="fa fa-phone-square" style="font-size: 36px; color: rgb(255, 255, 255); float: right;"></i>
<div class="item-content" style="background-color: rgb(233, 11, 165);">
<div class="item-title" style="top: -80px; width: 100%;">
<div style="display: inline-flex;">
<p style="font-size: 14px;">CARLITA </p>
</div>
<div>
<p style="font-size: 12px;">CHILENA, 20</p>
</div>
<div>
<p style="font-size: 10px;">Medidas: 94-62-98</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I expect the classes col-xs-4 to be col-xs-6.
I assume you use laravel blade
You can use dynamic css class in here like
class="col-sm-3 col-lg-3 col-lgx-3 col-xl-3 {{ $isMobile ? 'col-xs-6' : 'col-xs-4' }} col-4"
In the curly blackets : is this mobile device? if yes, I will use col-xs-6 if not I will use col-xs-4
But you need to send the checking of $isMobile from your controller and there is a very simple component for that here jenssegers/agent
After installation you can perform check for mobile device by using $agent->isMobile() method
Finally I could fix it by finding out that the folder with the file that contains those divs was inside a non-public location called "resources". Since I know little about Laravel Blade, I didn't know the directory structure.
I need to select an image which is inside of a button. The problem is that there are six similar images and they do not have any unique identifier, except their alt message and source. Here is the code I am working with.
<div class="dropup-content" style="height: auto; max-height: 1000px;">
<button type="button">
<img src="images/en_US.png" alt="English" style="width: 45px; height: 30px;">
</button>
<button type="button">
<img src="images/nb_NO.png" alt="Norwegian" style="width: 45px; height: 30px;">
</button>
<button type="button">
<img src="images/fi_FI.png" alt="Finnish" style="width: 45px; height: 30px;">
</button>
<button type="button">
<img src="images/fr_FR.png" alt="French" style="width: 45px; height: 30px;">
</button>
<button type="button">
<img src="images/nl_BE.png" alt="Dutch" style="width: 45px; height: 30px;">
</button>
<button type="button">
<img src="images/de_DE.png" alt="German" style="width: 45px; height: 30px;">
</button>
</div>
Now, if I need to select the button with the alt value Swedish, how would I do it? For example, I can get the first one using this code:
cy.get('.dropup-content').first().click()
However, the problem is that the sequence comes randomly every time. So I can not rely on the first() or next() methods. Is there any way in Cypress to click on the button with image attribute Swedish?
You can do this like:
cy.get('[alt="Swedish"]').click()
Try
cy.get('button[alt="Swedish"]').click()
But if you have a control on how those buttons are created, I'd suggest you should add data-cy tag to them and then access them by
cy.get('button[data-cy="Swedish"]').click()
Read why in best practices docu
<link href="https://www1.chester.ac.uk/sites/all/themes/global/css/app_chester.css" rel="stylesheet"/>
<div style="background: #eaeaea">
<div class="column row">
<div class="m-modal-video__column m-modal-video__column--primary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter"><h3 style="color: black; text-align: center;">Be Part of It</h3>
<p style="color: black; text-align: center;">Choose an innovative degree that has been designed with your employability at its core.</p>
</div>
</div>
</div>
<div class="m-modal-video__column m-modal-video__column--secondary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter">
<div class="m-modal-video__container m-modal-video__container--cinemascope" data-open="youtubemodal">
<a><img src="http://img.youtube.com/vi/Ily454tCpWE/maxresdefault.jpg">
<div class="m-modal-video__overlay m-modal-video__overlay--triangle">
<div class="m-modal-video m-modal-video__triangle"></div>
</div></a>
</div>
<div class="reveal large" id="youtubemodal" data-reveal data-reset-on-close="true">
<div class="m-video m-video--modal m-video--cinemascope"><iframe src="https://www.youtube.com/embed/Ily454tCpWE" frameborder="0" allowfullscreen=""></iframe></div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
I've got a modal on my site, and use the following to display a thumbnail image:
http://img.youtube.com/vi/DxwrdB7A6-I/maxresdefault.jpg
The problem is the video has an aspect ratio of 21:9. I've used the following styles, but still get the black letterbox on both the top and bottom of the image. Is there a way to just display the YouTube thumbnail without the black letterbox?
&__container {
position: relative;
height: 0;
padding-bottom: 42.85714%;
overflow: hidden;
margin-bottom: 1rem;
a img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
I've modified your sample code to add two new CSS rules to correspond to a class your HTML already had with no styles:
.m-modal-video__container--cinemascope defines the container around your cinemascope-ratio image, using the padding-bottom trick you'd previously tried implementing.
.m-modal-video__container--cinemascope img defines the sizing and positioning of the image inside the above container. Knowing you want this image to maintain its aspect ratio and not stretch, I've removed the height: 100% rule (so the height is automatically calculated) and vertically centered the image with the top: 50% and transform: translateY(-50%) trick.
This is all needed because YouTube still produced a 16:9 JPG thumbnail for your video despite its 21:9 ratio, so we're essentially using this trick to hide the black bars in the image. I still see a tiny sliver poking through, but you slightly adjust your padding-bottom ratio if you were worried about that, or increase your img's width past 100%.
.m-modal-video__container--cinemascope {
position: relative;
height: 0;
padding-bottom: 42.85714%;
overflow: hidden;
}
.m-modal-video__container--cinemascope img {
position: absolute;
left: 0;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
<link href="https://www1.chester.ac.uk/sites/all/themes/global/css/app_chester.css" rel="stylesheet" />
<div style="background: #eaeaea">
<div class="column row">
<div class="m-modal-video__column m-modal-video__column--secondary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter">
<div class="m-modal-video__container m-modal-video__container--cinemascope" data-open="youtubemodal">
<a><img src="http://img.youtube.com/vi/Ily454tCpWE/maxresdefault.jpg">
<div class="m-modal-video__overlay m-modal-video__overlay--triangle">
<div class="m-modal-video m-modal-video__triangle"></div>
</div>
</a>
</div>
<div class="reveal large" id="youtubemodal" data-reveal data-reset-on-close="true">
<div class="m-video m-video--modal m-video--cinemascope"><iframe src="https://www.youtube.com/embed/Ily454tCpWE" frameborder="0" allowfullscreen=""></iframe></div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
I'm using the Kendo-UI Tabstrip, and would like to add a class to one specific tabpanel. Is this possible? Using .SpriteCssClasses within the items.Add() section only seems to add the class to the tab itself, and not the actual panel.
Any help is greatly appreciated.
You can try to get the specific panel using the ID because kendo will add a div with specific ID depending on the name of the tab strip and the tab number (order), for example:
#(Html.Kendo().TabStrip()
.Name("Main")
.Items(Main =>
{
Main.Add()
.Text("test1 title").Content(#<text>
test1
</text>);
Main.Add()
.Text("test2 title")
.Content(#<text>
test2
</text>);
})
)
This will generate the following HTML:
<div class="k-tabstrip-wrapper" style="">
<div id="Main" class="k-widget k-tabstrip k-header" data-role="tabstrip" tabindex="0" role="tablist" aria-activedescendant="Main_ts_active">
<ul class="k-reset k-tabstrip-items">
<li class="k-item k-state-default k-first k-tab-on-top k-state-active" role="tab" aria-controls="Main-1" style="" aria-selected="true">
<span class="k-loading k-complete"></span>
test1 title
</li>
<li class="k-item k-state-default k-last" role="tab" aria-controls="Main-2" style="">
<span class="k-loading k-complete"></span>
test2 title
</li>
</ul>
<div id="Main-1" class="k-content k-state-active" role="tabpanel" aria-expanded="true" style="height: auto; overflow: hidden; opacity: 1; display: block;">
<div style="display: none; position: absolute; opacity: 0.8; background-color: rgb(255, 255, 255); z-index: 1001; width: 33.4px; height: 20px;" class="tata-ajax-loader">
<div style="background-position: center;background-repeat: no-repeat;height:100%;width:100%;background-color: transparent;" class="tata-ajax-loader-img"></div>
</div>
test1
</div>
<div id="Main-2" class="k-content" role="tabpanel" aria-expanded="false" style="height: auto; overflow: hidden; opacity: 0; display: none;" aria-hidden="true">
<div style="display: none; position: absolute; opacity: 0.8; background-color: rgb(255, 255, 255); z-index: 1001; width: 33.4px; height: 20px;" class="tata-ajax-loader">
<div style="background-position: center;background-repeat: no-repeat;height:100%;width:100%;background-color: transparent;" class="tata-ajax-loader-img"></div>
</div>
test2
</div>
</div>
</div>
Note the divs with IDs "Main-1" and "Main-2" are the IDs of the actual panels which is what you want from what I understand so you can add CSS on the IDs:
#Main-1 {
background-color: #E3F7A8;
}
I have a sub grid that has a status column defined. I would like to disable the Add button on its navGrid until subgrid's status column's value is 'Completed'.
Here is a snippet of the HTML that is being generated that I'm (unsuccessfuly) trying to manipulate: (I think I need to use the first and last elements)...???
<div id="USAttorneyFoldersGrid_43" class="tablediv">
<div id="gbox_USAttorneyFoldersGrid_43_t" class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" dir="ltr" style="width: 826px;">
<div id="lui_USAttorneyFoldersGrid_43_t" class="ui-widget-overlay jqgrid-overlay"></div>
<div id="load_USAttorneyFoldersGrid_43_t" class="loading ui-state-default ui-state-active" style="display: none;">Loading...</div>
<div id="editmodUSAttorneyFoldersGrid_43_t" class="ui-widget ui-widget-content ui-corner-all ui-jqdialog jqmID1" dir="ltr" style="width: 300px; height: auto; z-index: 950; overflow: hidden; top: 294px; left: 136px; display: none;" tabindex="-1" role="dialog" aria-labelledby="edithdUSAttorneyFoldersGrid_43_t" aria-hidden="true">
<div id="gview_USAttorneyFoldersGrid_43_t" class="ui-jqgrid-view" style="width: 826px;">
<div id="rs_mUSAttorneyFoldersGrid_43_t" class="ui-jqgrid-resize-mark"> </div>
<div id="p_USAttorneyFoldersGrid_43_t" class="scroll ui-state-default ui-jqgrid-pager ui-corner-bottom" style="width: 826px;" dir="ltr">
<div id="pg_p_USAttorneyFoldersGrid_43_t" class="ui-pager-control" role="group">
This is my selector that doesn't appear to work:
$('#USAttorneyFoldersGrid_43').navGrid('pg_p_USAttorneyFoldersGrid_43_t', { add: false });
What am I missing here?
You posted almost no code, but I hope that my old answer with the demo gives you information which you need.