I am using a package for my Laravel application called Ticketit.
This utilises Summernote for text editing, however when I want to add links, pictures etc, the modal window that opens up for this provides no padding around the inputs.
I'm not great with CSS and I'm not sure why this is happening or what I can do to fix this.
You can view an example of what I am facing via the Ticketit demo site; http://ticketit.kordy.info/tickets/create. You can log in with admin#example.com and demo and it will take you to the ticket create page. On clicking to add a link you will see the below:
The modal body code looks like this:
<div class="modal-body">
<div class="form-group note-group-select-from-files">
<label>Select from files</label>
<input class="note-image-input form-control" type="file" name="files" accept="image/*" multiple="multiple">
</div>
<div class="form-group" style="overflow:auto;">
<label>Image URL</label>
<input class="note-image-url form-control col-md-12" type="text">
</div>
</div>
How can I provide some padding around the form labels and inputs so that they aren't touching the sides of the modal window?
Note, that the CSS for the Summernote inputs are provided via a CDN currently and so I can't edit the source for this directly - I am hoping there is a setting for Summernote I can change.
Otherwise I can just add some custom CSS in a seperate stylesheet.
You would need to change the padding on .modal-body:
.modal-body {
padding: 30px;
}
Applying that rule will give you this:
Related
I am updating a project which has been made in Angular 4. The website consists of multiple forms which include input field. When the user presses 'enter' the form is being submitted. I want to prevent this from happening. How can I do that?
Is there something that I can place within the quotationmarks which disables the submit action from happening: (keydown.enter)=""
form.component.html
<div class="d-flex justify-content-center hm-row">
<form class="hm-form" [formGroup]="crossingForm">
<div class="form-group">
<label for="dynamicThresholdTime">{{ 'CROSSING.DYNAMIC_THRESHOLD_TIME' | translate}}</label>
<input type="text" class="form-control" id="dynamicThresholdTime" placeholder="" formControlName="dynamicThresholdTime">
</div>
<...more code...>
</form>
</div>
Use this :
<form (keydown.enter)="$event.preventDefault()"></form>
You also can remove the form tag and replace it with a div. Browsers make this behavior because of the form tag.
Buttons with type="submit" have default behavior. Choose type="button" for no default.
Also had this happen with a form and input field. event.preventDefault() in my client side script solved this.
I am trying to abstract the login form from an html page. Is it possible to have the contents of the form in one file and include the contents into an html page. I am doing this in asp.net, and I would prefer to put the content of the form in a .aspx or .ascx file.
Currently the only way I can think of doing this would be to use some javascript hack which I would prefer to stay away from.
<form id="login">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-default btn-block">Sign In</button>
<small>Forgot your password?</small>
</form>
So I want to take labels and inputs and put them in another file. Is it possible to include them into this formusing my .aspx file?
I presume you're using web forms? Because ASP.Net MVC lets you do whatever you want to the html.
In that case, remember that Web Forms has one special form, that normally looks like this:
<html>
<body>
<form id="theForm" runat="server">
<!-- everything goes in here -->
</form>
</body>
</html>
The trick is that Web Forms has two rules about this form: it should be the only form with the runat="server" attribute, and it doesn't like it if you nest another form element inside the special form. However, you are perfectly free to include another form element on the page that's outside of this form element and does not use the runat="server" attribute:
<html>
<body>
<form id="login" action="...">
<!-- login stuff goes here -->
</form>
<form id="theForm" runat="server">
<!-- everything else goes in here -->
</form>
</body>
</html>
And of course you can use css styles to position that new form however you want on the page, within the limits of css.
That out of the way, you're also talking about moving this code to another file. Specifically, it sounds like you're wanting to use an older include directive. Those aren't really considered good practice anymore, but you do have a number of options available. In Web Forms, this could be part of your Master page. In MVC, it might be something like Partial View (scroll down at the link). Additionally, with Web Forms, you could implement this as a user control, where you don't need the form element any more. Instead, you rely on the form from the ASP.Net page, and just supply the server controls and code for the login button.
I use Bootstrap 3 and i have a multiple datepicker (from - to). It work well on a compute however i have problem for mobile phone compatibility. My input group overflows the screen and do not resize all the group.
In case of small device, i would like to have the the group on 2 rows:
- the first with the addon From + its datepicker
- the second with the addon To + its datepicker
how could i do ?
my html:
<form class="form-horizontal">
<div class="form-group">
<div class="input-daterange" style="padding-left: 15px; padding-right: 15px" id="datepicker" >
<div class="input-group">
<div class="input-group-addon">From</div>
<input type="date" class="form-control" name="beginDate" id="beginDate"/>
<div class="input-group-addon" for="endDate">To</div>
<input type="date" class="form-control" name="endDate" id="endDate"/>
</div>
</div>
</div>
</form>
EDIT : I know it have to be done in css with #media, but how to get to the line only after the first datetimepicker ?
Bootstrap doesn't support multiple input fields within a single input group, regardless of browser:
Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple add-ons on a single side.
We do not support multiple form-controls in a single input group.
This would have to be done in the css.
So if you look at your bootstrap.css and scroll down to any #media 746px(I think its that many pixels it is for mobile) you should see examples of how they handle when the screen gets re sized. Mobile is just a screen size that is really small on a computer browser.
An image can best show the problem:
Of course I dont want my textarea to have a bunch of html tags as a default value, thats why I set the defaultvalue to 'Hi', which it aparently isnt showing right now, but which it should.
I already tried a few things to find/solve the problem. What I found out is that if I remove the other form on the page (a login form not visible on the image) this form works and properly shows 'Hi' as a value. So the problem seems to be that there are multiple forms on this page. Problem has only shown with the use of text-area's, input fields, on this page or any other, work fine. I also tried moving the textarea outside of the form tags, that does remove the html tags, but the 'hi' still isnt visible (plus I want the textarea inside my form, as it should be part of it).
Edit, after a few struggles finally managed to post the code as code instead of a document. Code for the first, properly working, form:
<div id="userbox">
<form id="form1" action="auth/login" method="post">
<div id="username-container">
<input class="transparent-input" name="username" type="text" value="Gebruikersnaam">
</div>
<div id="password-container">
<input class="transparent-input" name="password" type="password" value="Wachtwoord">
</div>
<div id="lostpass-container">
wachtwoord<br />vergeten?
</div>
<div id="login-container">
<input class="transparent-input" type="submit" value="Aanmelden">
</div>
</form>
</div>
Code for the second, faulty, form:
<div id="content">
<h3>Contact</h3>
<form id="form2">
<input type="text" value="Pietje Puk" /><br />
<input type="email" value="mijn#email.nl" /><br />
<textarea rows="10" cols="50">Hi</textarea>
</form>
</div>
edit: I did do a markup validation, nothing there that solved the problem
It turned out to be a markup problem after all. After trying some more I did find that moving a div closing tag to a different location in the document did solve the problem. Before I had opened a div before both forms and closed it in between them, closing it after both of them instead solved the problem.
Tnx Lars Beck for pointing me in the right direction :)
Im designing a website using Visual Studio 2012 ASP.NET MVC4
And it’s supposed to be like this
but it turned out to be like this
![default2][2]
I need to align the logo with the Username & Password fields and those fields should have space in between. Btw, I'm using the latest version of Twitter Bootstrap as my CSS. Thanks for helping out!
Also, these are my codes.
<header class="navbar navbar-inverse" role="banner">
<div class="container">
<img src="#Url.Content("~/Content/img/Logo-Sample.png")" alt="Image" id="logo" class="img-responsive"/>
<div class="pull-right">
<form class="navbar-form pull-right" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
</div>
</div>
</header>
Update:
I've applied Ryan's suggestion the "float stuff" and the logo is now inlined with the input fields.
But the input field went upward instead of downward. Any suggestions for this? Thanks!
Check out Bootstrap's docs for Inline forms. I believe this is exactly what you are looking for.
As a side note, check out TwitterBootstrapMVC. Your code might look cleaner with it.
So it looks like your logo and login sections are both block-level elements. They need to be inline-block OR one of them needs to be floated left or right as appropriate.
Insofar as the space between elements for your login block... I'd do a css selector to match the header login input elements and add some margin-right to them.
HTML formatting is very finicky sometimes. However, open up the markup for the asp file and put a space between those input areas' tags or put one trailing after the word in the placeholder. For the being slightly too high, I forgot the word I am looking for, but its something a bit like a table, make them both in slots for that row. Look around for what Im attempting to say as I just completely forgot the term.
(if I remember Ill come back and edit this)