I have 2 field, one is image upload and video upload.
I want the part of css to reflect only on video part. Can anyon help me to solve this.
HTML:
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" *ngFor="let media of medias; let i = index">
<div class = "type-img" [hidden]= "selectedImage !='img'">
<img class="cat-img" src="{{media.image_path}}" style="width: 100px;margin: 10px 0px;" type='img' *ngIf="selectedImage=='img'" />
</div>
<div class = "type-video" [hidden]= "selectedImage !='video'" >
<video width="320" height="240" controls> <source src="{{media.image_path}}" type="video/mp4" *ngIf="selectedImage=='video'" ></video>
</div>
<p class="inputimg video">
<input type="file" name="{{media._id}}[i]" id="{{media._id}}[i]" class="inputfile" (change)="editPinImage($event,media)" style='display: none;' />
<label *ngIf="media._id" for="{{media._id}}[i]" class="img_change">Change</label>
<label *ngIf="!media._id" for="{{media._id}}[i]" class="img_change">Add</label>
</p>
<div class = "type-video" [hidden]= "selectedImage !='video'" >
<span style="margin-left: 12%;">or </span>
<input type="text" class="form-control form-textbox input-text" (change)="editPinImage($event,media)" style="width: 28%;margin-right: 24%;">
</div>
</div>
Here, <p class="inputimg video">, i need this part of css to work only for video
.video {
float: right;
margin-right: 56%;
margin-top: -2%;
}
Use NgClass for it. Hope you need video class when selected image is 'video'
<p class="inputimg" [ngClass]="{'video': selectedImage =='video'}">
Related
I am building a project with laravel. The layout is pretty similar to the Pinterest layout (also known as masonry) and it shows different types of rooms:
The layout was implemented in such a way that the images are placed in horizontal order. To do that I followed this tutorial.
This is the code for the layout:
HTML:
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<div class="grid products-by-room" data-masonry='{ "itemSelector": ".grid-item"}' style="margin-top: 8rem">
#foreach ($rooms as $room)
<div class="grid-item" data-category="{{ $room->data_category}}" style="border: 7px solid #fff">
<a href="#zoomImg{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#zoomImg{{ $room->id }}">
<div class="img-wrapper">
<img src="{{ $room->img }}" alt="" class="img-fluid shade">
<div class="overlay">
<i class="fa fa-search-plus icon"></i>
</div>
</div>
</a>
<div class="text-left mt-3 mb-5">
<p class="product-subtitle">{{ $room->name }}</p>
<h4 class="product-title">Shop the Look</h4>
<a class="product-price-link" href="#getPriceByRoom{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#getPriceByRoom{{ $room->id }}">get price</a>
</div>
</div>
#endforeach
</div>
CSS:
.grid-item img {
width: 100%;
font-size: 0;
}
.grid-item {
width: 100%;
}
#media (min-width: 768px) {
.grid-item {
width: 33.333%;
}
}
I created a filter that displays only the rooms that are checked, but it is not working as I intended. It does filter the rooms correctly, but it leaves a lot of empty spaces around them.
This is the filter:
HTML:
<div class="modal-backdrop-filters"></div>
<div id="mySidenav" class="sidenav">
<div class="top-header-filters">
<h3 class="title-filters">FILTERS</h3>
<a id="closebtn" class="closebtn filter-close-btn">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"
style="border: none; background-color: #fff;">
<span aria-hidden="true">×</span>
</button>
</a>
</div>
<div class="header-filters">
<h4 class="title-filters">Categories</h4>
</div>
<div class="round" id="r-group">
<form>
<label class="label-filter" style="margin-top: 3rem;"><input type="checkbox" name="room" value="office"><span class="label-text"> Office</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="bedroom"/><span class="label-text">Bedroom</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="living-room"/><span class="label-text">Living Room</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="dining-room"/><span class="label-text">Dining Room</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="library"/><span class="label-text">Library</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="hallway"/><span class="label-text">Hallway</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="kitchen"/><span class="label-text">Kitchen</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="bar"/><span class="label-text">Bar</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="entryway"/><span class="label-text">Entryway</span></label><br>
</form>
</div>
<button id="applyBtn" class="apply-filters-btn">APPLY</button>
</div>
</div>
SCRIPT:
$(function(){
$('form').find("input").on('change',function(){
let selected = [];
$('form').find("input").each(function(){
if(jQuery(this).is(":checked")){
selected.push(jQuery(this).val());
}
})
if(!selected.length){
$(".products-by-room > div").show();
return;
}
$(".products-by-room > div").hide();
$(".products-by-room > div").each(function(){
const category = jQuery(this).attr('data-category');
const categorySplitted = category.split(' ');
categorySplitted.forEach((cat)=>{
if(selected.indexOf(cat) !== -1){
jQuery(this).show();
}
});
});
});
});
The problem is, when I select a room such as "dining room" this is the result I get, the images are shown in their original spot and lots of white spaces aroun them:
This is the result I intended, all dining rooms in the same row, with no spaces around:
Is there a way I can achieve this? Thanks in advance!
I need put letters in a permanent site in a div like the next photo
as you can see I need to reduce the position of the letters
My code is this
<div class="col-md-4 col-xl-4 col-xs-4 col-sm-4 col-lg-4">
<div class="contenedor">
<center>
<h3>Helado de copoazú </h3>
</center>
<br />
<figure>
<img src="/as_website_sale_onepage/static/img/helado_copoazu.jpeg"
style="width: 100%;border-radius: 8px;" product_id='45' onmousemove="deshabilitar()"/>
<div class="centrado2" name="disponible_helado" id="agotado_45"></div>
</figure>
<center>
<div id="adiciona45_mostrar" style="font-weight:bold; font-size: 22px;">
Bs.
10
</div>
<button id="stepDown-helado" type="button" style="border-radius: 15px;"
class=" btn btn-success"
onclick="cambiar_inputs();" product_id='45'>-</button>
<input type="number" name="numero_helado" id="numero_helado" value="0"
min="0" readonly="1" size="3"
style="text-align: center;width:50px !important; border: 1px solid #97CCF3; color: #099EFB; font-weight: bold;border-radius: 15px;" />
<button id="stepUp-helado" type="button" style="border-radius: 15px;"
class=" btn btn-primary"
onclick="cambiar_inputs();" product_id='45'>+</button>
</center>
</div>
<hr style="border: 5px solid #1db33b; width:100%" />
</div>
How can i do that?
using css this is simple
div::after{
content: 'anyLetter';
}
or
div::before{
content: 'anyLetter';
}
Edit: if you want to add it in the around the location marked in the image,
i would suggest around the <h3> or the <figure> tags.
also adding a class like after-word would make it more usable
I want to pass 3 values (2 dropdown's and 1 input field) from one page to another.User will select 2 dependent dropdowns after clicking on the button user will redirect to another page where he will ask to fill-up a form wherein above 3 details will be auto-filled.
The input field's data is passing to another page but the 2 dropdown's value are not passing.
Controller
public function getRequestDetails(Request $request){
$reqAOP = $request->get('areas');
$reqType = $request->get('request_type');
$reqTitle = $request->get('title');
Session::put('areas', $request->get('areas'));
return redirect('frontend_template.submitquery')->withInput($request->only('title'));
}
Blade page
<div class="col-md-6 float-container">
<div class="form-group" style="margin-bottom: 20px;">
<select style="margin-top: 15px;color: grey;font-size: 16px;" id="aops" class="form-control select2-list">
<option value="{{Session::get('areas')}}" selected>{{Session::get('areas')}}</option>
</select> </div>
</div>
<div class="col-md-6" style="height:33px;color: grey;display: none;width: 49%;line-height: 1;" id="req_options">
<div class="form-group" style="margin-bottom: 20px;">
<select style="margin-top: 15px;color: grey;font-size: 16px;" id="request_type" class="form-control select2-list" >
</select>
</div>
</div>
</div>
<br>
<div class="row form">
<div class="col-md-12 float-container">
<div class="form-group">
<input type="text" placeholder="Title *" style="margin-top: 10px;padding-left: 10px;font-size: 16px;" class="form-control" name="title" id="title" value="{{old('title')}}">
</div>
</div>
</div>
You can create a button like this to pass the value to next request/page
<a href="{{route('route_name',['area'=>'$variable','request_type'=>'$variable','title'=>''])}}"
class="btn btn-primary" style="text-decoration:none">
<i class="fa fa-folder-open"></i>Manage
</a>
In route you just need to declare the path like
Route::get('blade_path/{area}/{request_type}/{title}','Controller#function')->name('route_name');
I am trying to load a list of video on a page after uploaded video :
<div class="form-group">
<label for="video" class="col-sm-2 control-label control-image">video</label>
<div class="col-sm-10">
<ul id="video" ng-repeat="video in vm.item.video" ng-if="vm.item.video.length > 0">
<li>
<video width="400" controls><source ng-src="{{vm.uploadDomain + video}}" type="video/mp4">> </video>
</video>
</li>
</ul>
</div>
</div>
<div class="form-group" ng-class="{'true': '', 'false': 'has-error'}[vm.isValidated('video')]">
<label class="col-sm-2 control-label control-image">upload</label>
<div class="col-sm-10">
<dt-file-uploader mode="basic"
ng-model="vm.item.video"
setting="vm.uploader_video"></dt-file-uploader>
</div>
</div>
but it doesn't work, It fail to load the source of these video , what can I do to fix this problem?
you can create a custom filter like this.
.filter("trustUrl", function($sce) {
return function(Url) {
return $sce.trustAsResourceUrl(Url);
};
});
in the html add filter in src
<video width="400" controls>
<source ng-src="{{vm.uploadDomain + video | trustUrl}}" type="video/mp4">
</video>
I want to increase the height and width of the inner box (Arrow is pointing) of the Overlay in the below image using DOJO.
Below is my code. Please let me know where I suppose to add in order to increase the height and width.
<div class="xx-common-overlay" id="overlay-0">
<div class="xx-head">
<p><a class="xx-common-overlay-close" href="#close">Close [x]</a></p>
</div>
<div class="xx-body">
<div class="xx-main">
<a id="xx-access Accessibility anchor" class="xx-access"></a>
<div class="xx-title">
<h2 style="font-size: 1.6em;">Please select </h2>
</div>
<div class="xx-container">
<h2 style="padding-top: 10px;">Items:</h2>
<div class="xx-container-body">
<p style="padding-top: 5px;">
<select multiple="true" id="ItemsOverlay1" name="Items0" style="min-width: 600px;" dojoType="dojox.form.CheckedMultiSelect" onchange="setValues(this, 'fromItems','');"></select>
</p>
<input class="xx-btn-arrow-pri" value="OK" type="button" onclick="xxweb.overlay.hide('overlay-0',this); setValues('null', 'fromPlatform','ok');return false;"/>
<input style="margin-left: 10px;" class="xx-btn-arrow-pri" value="Cancel" type="button" onclick="xxweb.overlay.hide('overlay-0',this); setValues('null', 'fromItems','cancel');return false;"/>
</div>
</div>
</div>
You provided code can not be parse, but you could try the following:
find dojoType="dojox.form.CheckedMultiSelect"
change to style="min-width: 600px;" dojoType="dojox.form.CheckedMultiSelect"