I have a layout like this. What I want is to let the image box next to the Render 3D button move below the button:
My Code is here
<div id="modeling">
<div className="container">
<div className="row">
<div className="col-xs-12 col-md-8">
<div className="modeling-text">
<h2>3D MODELING</h2>
<h3>Upload a 2D image to get a 3D model</h3>
<input className="btn btn-secondary" id="fileInput" name="file" type="file" onChange={fileChangedHandler} />
<button className="btn btn-primary" style={{float:"left", marginLeft: "10px"}} ng-click="showConfirm() "
ng-if="fileName.length > 0" id="renderButton">
Render 3D Model
</button>
<img src={file} alt={""} width="300" height="300" text-align="left" />
</div>
</div>
</div>
</div>
</div>
Can someone help me to move this? Thanks a lot
just display it as block
<img src={file} alt={""} width="300" height="300" text-align="left" style={{display:'block'}} />
Related
So, I'm doing a chat component and we've the option to send files, but prior to send it the user must review it and for it i had the idea to show a modal containing all the files selected, but i just can't show the modal right after the file selection, i tried getElementById but it did not work.
Here's my template:
<input type="file" multiple name="file" id="fileInput" class="hidden-input" #change="onChange"
ref="file" accept=".pdf,.jpg,.jpeg,.png" hidden />
<button type="button" #click="chooseFiles()" class="btn btn-link text-decoration-none emoji-btn"
id="emoji-btn">
<i class="las la-arrow-up align-middle" />
</button>
And here's my script:
chooseFiles() {
document.getElementById("fileInput").click()
// document.getElementById("showModal").click()
},
onChange(e) {
this.$refs.file.files = e.target.files
this.files.push(...this.$refs.file.files)
this.fileSize(e)
// document.getElementById("showModal").click()
},
And here is the modal:
<div id="showModal" class="modal fade" ref="modal" tabindex="-1" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div v-for="file in files" :key="file.name" class="preview-card border rounded">
<div class="d-flex align-items-center p-2">
<b-img v-if="file.type != 'application/pdf'" class="img-thumbnail me-2" alt="200x200" width="200"
:src="generateURL(file)" data-holder-rendered="true" />
<iframe v-else class="img-thumbnail me-2" data-holder-rendered="true" frameBorder="0" scrolling="no"
alt="200x200" width="200" :src="generateURL(file)" />
<div class="flex-grow-1">
<div class="pt-1">
<h5 class="fs-11 mb-1" data-dz-name="">
{{ file.name }}
</h5>
<p class="fs-9 text-muted mb-0" data-dz-size="">
<strong>{{ (file.size / 1024) / 1000 }}</strong> MB
</p>
<strong class="error text-danger" data-dz-errormessage="" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<b-button type="button" class="btn btn-danger" data-bs-dismiss="modal">
Sair
</b-button>
</div>
</div>
</div>
</div>
When I was commenting I missed the fact this was tagged bootstrap-modal, so I understand now you're wanting to open a bootstrap modal which has a specific method for activation. For bootstrap 5 you can get the Modal instance with bootstrap.Modal.getOrCreateInstance(). Assign this to a data property and then you can call all the typical modal methods on it like .show(), .toggle(), .hide(), etc. Below is a working example using a more simplified modal than your own just for simplicity sake.
<div id="app">
<input type="file" multiple name="file" id="fileInput" class="hidden-input" #change="onChange"
ref="file" accept=".pdf,.jpg,.jpeg,.png" hidden />
<button type="button" #click="chooseFiles" class="btn btn-link text-decoration-none emoji-btn"
id="emoji-btn">
choose files
</button>
<!-- Modal -->
<div class="modal fade" ref="modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Files</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div v-for="(file, i) in files" :key="i">
{{ file.name }}
</div>
</div>
</div>
</div>
</div>
</div>
data() {
return {
files: [],
modal: null
}
},
mounted() {
const myModalEl = this.$refs.modal
this.modal = bootstrap.Modal.getOrCreateInstance(myModalEl)
},
methods: {
chooseFiles() {
this.$refs.file.click()
},
onChange(e) {
this.$refs.file.files = e.target.files
this.files.push(...this.$refs.file.files)
this.modal.show()
},
}
and here is the sandbox with the above code
If bootstrap 5 is installed as a package you can do this instead:
import { Modal } from "bootstrap";
.
.
.
mounted() {
this.modal = new Modal(this.$refs.modal);
}
This is my demo.
When we hover #image-bg, I want #bg-box-hidden will be display: block.
But I'm losing my way to figure out how to solve the problem
<div class="grid pb1rem">
<div *ngIf="avatar !== null" class="image-content">
<img
class="image-bg"
[src]="avatar"
(click)="selectImage.click()"
hover-class="test"
(mouseover)="onImgMouseover($event)"
(mouseout)="onImgMouseout($event)"
/>
<div #show class="bg-box-hidden" hover-class="show">
<button class="btn only-icon">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
</div>
</div>
</div>
The main problem of your code are
Wrong event name.
The element doesn't rendered so you can't targeted the element.
Here is simple solution for you, It might be other way to implement as well.
Try this one, put on your .ts file of the component.
onImgMouseover($event): void {
const box = document.getElementsByClassName('bg-box-hidden')[0];
box.style.display = 'block';
}
onImgMouseout($event): void {
const box = document.getElementsByClassName('bg-box-hidden')[0];
box.style.display = 'none';
}
and need modify some on HTML something like
<div
class="grid pb1rem"
(mouseenter)="onImgMouseover($event)"
(mouseleave)="onImgMouseout($event)"
>
<div *ngIf="avatar === null" class="image_wrapper">
<input
type="file"
accept=".png,.jpg"
(change)="updateImage($event)"
class="file-input"
#selectImage
/>
</div>
<div *ngIf="avatar !== null" class="image-content">
<img
class="image-bg"
[src]="avatar"
(click)="selectImage.click()"
hover-class="test"
/>
</div>
<div #show class="bg-box-hidden" hover-class="show">
<button class="btn only-icon">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
<div class="box-button-up">
<input
type="file"
accept=".png,.jpg"
(change)="updateImage($event)"
class="file-input"
#selectImage
/>
</div>
</div>
</div>
I can't figure out how to vertically align text next to the buttons in the following snippet. Any ideas?
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div id="actionButtons">
<button class="btn btn-default">
Cancel
</button>
<button class="btn btn-default">
Certify and Submit (1)
</button>
<div style="display:inline-block;text-align:center;width:460px">
Certification <br/> By Clicking Submit I hereby certify the appropriate procedures and approvals were obtained and the information entered is accurate and true
</div>
</div>
</div>
</div>
</div>
This will be viewed on devices with at least 1000px screen width, so when you run the snippets, please choose "full screen" to see the example.
Here's a codepen with the same code as above:
https://codepen.io/upgradingdave/pen/dgzdKL
The snippet below is closer to what I was aiming for, but I was hoping to accomplish this without changing the html markup above:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row" style="height:100px;border:1px solid black;">
<div class="col-xs-1">
<button class="btn btn-default" style="margin-top: 30px;">
Cancel
</button>
</div>
<div class="col-xs-2">
<button class="btn btn-default" style="margin-top: 30px;">
Certify and Submit (1)
</button>
</div>
<div class="col-xs-3">
<div style="text-align:center">
Certification <br/> By Clicking Submit I hereby certify the appropriate procedures and approvals were obtained and the information entered is accurate and true
</div>
</div>
</div>
try this
#actionButtons{
display:flex;
align-items:center;
-webkit-align-items:center;
-moz-align-items:center;
}
For your instance, you're not really using the bootstrap grid, you could take what's in my example and put it in a 12 column row if ya want to get the spacing, but the cause of your issue is just the button defaults needing a display of inline-block and then that <br/> you have in there is kicking down a new line after "Certification" as would be expected.
Cheers
.btn {
display: inline-block;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-default">
Cancel
</button>
<button class="btn btn-default">
Certify and Submit (1)
</button>
Certification <br/> By Clicking Submit I hereby certify the appropriate procedures and approvals were obtained and the information entered is accurate and true
I want to make full with the button on right side.
I added btn-block on button element but it's dont working i don't know why.
Jsfiddle Here
<div class="fieldset">
<div class="field qty">
<label class="label" for="qty"><span>Qlty</span></label>
<div class="control control-qty-cart">
<span class="quantity-controls quantity-minus"></span>
<input type="number" name="qty" id="qty" maxlength="12" value="1" title="Aantal" class="qty-default input-text qty" data-validate="{"required-number":true,"validate-item-quantity":{"minAllowed":1}}">
</div>
</div>
<div class="actions">
<button type="submit" title="In Winkelwagen" class="action primary tocart btn-block" id="product-addtocart-button">
<span>In Winkelwagen</span>
</button>
</div>
</div>
Not sure where you took that bootstrap code from. I tried with this links and it worked. Also better to add it as an external library rather than to put the code there directly.
For bootstrap 3 (css): https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
For bootstrap 3 (js): https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
For bootstrap 4 get the cdn from this link: https://getbootstrap.com
I'm trying to create a view where I show the bootstrap thumbnails on the same line, I've tried different methods and I'm showing thumbnails type list.
Here is my method in the controller:
public function show($id)
{
$properties = Property::find($id);
$files = File::where('property_id', $properties->id)->get();
return view('properties.show', compact('properties', 'files'));
}
This is my method in the view:
#foreach($properties->files as $index=>$file)
<div class="row">
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img src="{{ URL::asset('uploads/products/' . $file->name) }}" alt="{{ $file->property_id }}" width="300" height="200">
<div class="caption">
<div class="caption" align="center">
<button onclick="return confirm('Está seguro eliminar esta imagen?')" class="button btn btn-danger btn-xs" data-toggle="tooltip" data-placement="top" title="Eliminar"><i class="material-icons delete-white">delete</i></button>
</div>
</div>
</div>
</div>
</div>
#endforeach
This way they are showing the images as thumbnails:
This should be the right way:
Can someone guide me to correct this small inconvenience?
You should loop inside your .row. The foreach method just repeats every code inside of it. So it was repeating <div class="row">...</div> every single time.
<div class="row">
#foreach($property->files as $index => $file)
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img src="{{ URL::asset('uploads/products/' . $file->name) }}" alt="{{ $file->property_id }}" width="300" height="200">
<div class="caption">
<div class="caption" align="center">
<button onclick="return confirm('Está seguro eliminar esta imagen?')" class="button btn btn-danger btn-xs" data-toggle="tooltip" data-placement="top" title="Eliminar"><i class="material-icons delete-white">delete</i></button>
</div>
</div>
</div>
</div>
#endforeach
</div>