I have something like the following:
<div class="outer" ondragover="event.preventDefault();">
#foreach (CustomObject o in ObjectList)
{
<div draggable="true" #key="o.Rank" #ondrag="#(()=> StartDrag(o))" #ondrop="#(()=> Drop(o))" class="inner">
<textarea></textarea>
<input type="text">
<button></button>
<textarea></textarea>
</div>
}
</div>
I want to be able to drag and drop the whole section but the problem is that it stops allowing the highlighting of text within a text area or text box.
Is there a good way of allowing for highlighting of text and being able to drag/drop everything?
Try using these settings on inner elements
<div draggable="true" #key="o.Rank" #ondrag="#(()=> StartDrag(o))" #ondrop="#(()=> Drop(o))" class="inner">
<textarea draggable="true"
ondragstart="event.preventDefault();
event.stopPropagation();"></textarea>
<input type="text" draggable="true"
ondragstart="event.preventDefault();
event.stopPropagation();">
<button draggable="true"
ondragstart="event.preventDefault();
event.stopPropagation();"></button>
<textarea draggable="true"
ondragstart="event.preventDefault();
event.stopPropagation();"></textarea>
</div>
Related
I'm using JsColor for Background Color and Font Color in a .NET Form. This is a general MVC scaffolding template. The "Create" page works perfectly, and I'm able to choose colors using JsColor. The problem is with the "Edit" page, I'm able to edit all of the data except for the background color and font color - since they are using JsColor. What's happening is that when I choose a color using the plugin, it immediately switches back to the original color selected on the "Create" form.
I believe this is because I'm using C# to display database information.
The Javascript for this plugin is 1,000+ pages long but I will copy and paste sections if necessary.
Edit Page
<div class="form-group">
<label asp-for="BackgroundColor" class="control-label">Background Color</label>
<input asp-for="BackgroundColor" class="form-control jscolor {width:243, height:150, position:'right',
borderColor:'#FFF', insetColor:'#FFF', backgroundColor:'#666'}" />
<span asp-validation-for="BackgroundColor" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="FontColor" class="control-label">Font Color</label>
<input asp-for="FontColor" class="form-control jscolor {width:243, height:150, position:'right',
borderColor:'#FFF', insetColor:'#FFF', backgroundColor:'#666'}" />
<span asp-validation-for="FontColor" class="text-danger"></span>
</div>
Index Table
<td bgcolor="#Html.DisplayFor(modelItem => item.BackgroundColor)">
</td>
<td bgcolor="#Html.DisplayFor(modelItem => item.FontColor)">
Using ASP .Net Core (Version 2.2, NON-MVC)
I have a database field (Car) which contains text, in HTML format.
I am using an ASP .Net "Input" Helper Tag to display the data (read only) on a webpage.
<input asp-for="Car.Description" asp-format="" disabled class="form-control" />
I would like to display the data as Html.Raw, but am unsure how to do so.
I originally thought I could do something like this (use Html.Raw), but this throws an exception:
<input asp-for=#Html.Raw(Car.Description) asp-format="" disabled class="form-control" />
I then thought the "asp-format" field might have some usable options, but I don't see any.
<div class="form-group row">
<div class="col-2">
<label asp-for="Car.Description"></label>
</div>
<div class="col-10">
<input asp-for="Car.Description" asp-format="" disabled class="form-control" />
</div>
</div>
End result is that I would like to have the display "raw" HTML on the screen.
Thanks
If you want to display the field as read only, you may not even need the "input" helper tag. Just displaying the data in the div should work.
Remove the input helper and just display the text in the div as follows:
<div class="form-group row">
<div class="col-2">
<label asp-for="Car.Description"></label>
</div>
<div class="col-10">
#Html.Raw(Car.Description)
</div>
</div>
I have added bootstrap to my application and when i wrote
<div class="container-fluid">
<div class="row" ng-repeat="user in users " style="border: 1px solid black"
ng-click="goToUserDetails(user.Id)">
<div class="col-md-4 text-center">{{user.Email}}</div>
<div class="col-md-4 text-center">{{user.Name}}</div>
<div class="col-md-4 text-center">{{user.Password}}</div>
<div class="col-md-4 text-center">
<span class="glyphicon glyphicon-trash" ng-click="delete(user.Id);$event.stopPropagation();">
</span>
</div>
</div>
<button class="btn btn-danger" ng-click="gotoAddUser()">Add</button>
</div>
It works , but when I want to add a card
<div class="card">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Button
</div>
</div>
It doesn't recognize the bootstrap "card" classes (the btn works )
Can someone help me pls?
There is no default Card design in Bootstrap 3.3.6 or lower version.
So now we have only two option for design card.
The standard way is Upgrade your Bootstrap version like move 3.3.6 or lower to Bootstrap 4. Bootstrap 4 Card
--- OR ---
Write your own stylesheet for card design if you want your card design same as well as Bootstrap common design then you can pick that CSS from Bootstrap 4 Card. In this case you can just pick those design which was you actually need for your Card no any other extra CSS so it will not effect your other sections or modules.
Here I made a simple webpage to post pictures, text, etc. I also made a simple ajax file to send the text, picture, etc to the database, and retrieve that information to be displayed in the same webpage. Here is the main webpage:
<div class="here" id="here">
#foreach (var photo in db.Query(photos, galleryInfo)){
<div class="com_1 com_3">
<div class="com_4">
<div class="com_44">
<img alt="miniatura" style="margin-top: 0" src="#Href("~/Photo/Thumbnail2", photo.UserId, new { size="small" })" class="thumbnail-border thumb22" />
<div class="n-s">
<b>#photo.Nombre #photo.Apellido</b>
</div>
</div>
<div class="com_5">
#photo.Comment
</div>
</div>
<div class="comcom">
<div class="comcom1">
<form onsubmit="return fofon(this)" id="gog">
<input type="text" style="display: none" name="GroupId" value="#galleryInfo" />
<textarea class="texta"name="comment" placeholder="Write a comment..."></textarea>
<input type="submit" class="g_sub"/>
</form>
</div>
</div>
</div>
}
In case it gets confuse, this shows every post with a "comment section" below each one (we can call them "Commne2"). The ajax will get the text, picture etc, send it to the database, and post it to another file, which will be displayed here... in the #foreach{}.
Obviously, the posts do not "excist", so any javascript that affects that post, will not work, because that element does not exciste in this case.
So my problem is, how can I create an ajax file (javascript file) that affects the Comment2 so that I can comment a post?
I am using Jasny Bootstrap file upload control in my asp.net project.
It looks really good, but im unable to send the attached file to the server (a .ASHX webservice)
My layout code look like this
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div><span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span>Remove
</div>
</div>
The HTML contains an <input type="file" />. You need to set the name attribute of the input element. Also make sure that you're using enctype="multipart/form-data" in the form.
<form action="myscript.ashx" method="post" enctype="multipart/form-data">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div>
<span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" name="myupload"/></span>
Remove
</div>
</div>
</form>