I have a registration form on my website, which forms a basic user employment resume. To save space on the page some of the form elements have the option to add more fields, now all of these work fine except for the Employment History section.
When you click on the add more button the form appears directly underneath as it should except for the first four fields:
Job Title
Company Name
From
To
which shift to the left.
I had this issue with all of the add more sections but fixed them as the person who built the page had made some mistakes. However i can not seem to find the issue, It feels like i have changed everything nut nothing makes a difference.
http://goo.gl/w4WYJm
You are missing to add the row class where you generate new elements in your javascript.
<div id='jobtitle"+intTextBox+"'>
should be
<div class="row" id='jobtitle"+intTextBox+"'>
You also have a problem which you will find after fixing this, that the descriptionbox has the row class. Fix this by removing it from the job-description and just apply it to the wrapper div as shown above.
I just checked your website and found the following things.
1) You are trying to show one div#jobtitle1 on clicking add more. I suggest that please add class="row" to that ( this is the class which you people are using for margin )
2) In the same div block which you are showing one more field called Job Description which is again inside a div which has class="row" ( which will again add margin because it is the child div of div#jobtitle ) . Please remove that class here.
Try these things then it will be fine.
Related
On my website I have 3 types of employees
barista
barista01
security
and I would like to hide the barista01 option but leave the others as they are (please refere to the picture).
When i try to use $("div:contains('barista01')").parent('div').hide(); I get a full black window hiding everything inside.
Is there anyway how to fix this?
Thank you in advanced
enter image description here
If Class name ".hc-mt3" is fixed and will not change then you can target that class.
See Example Code: $("div:contains('barista01')").parent('.hc-mt3').hide();
The Goal
I want to have a v-data-table that is editable and looks "nice".
The problem
Adding a v-text-field to make it editable also increases the row-height to a very eye unpleasing level
Original view:
With v-text-field inputs
The quesion
How can I decrease the row height to resemble the one without v-text-fields.
As a Bonus
Because I am quite new to this whole Front-End-Development-Kind-Of-Thing, how would I go about it identifying what is causing this "height issue"?
PS: I've tried to add a JSFiddle but I cant even seem to be unable to figure out how to display the v-data-table correctly...
The basic draft can be found here
Is it necessary for your table to be editable within the columns? How do you decide when to pass data back via request to your Backend? After the user left a field?
If it is not necessary to have the edit option within the table, I would just use the action buttons you already have in your table to trigger a modal in which you can edit the fields. This also allows you to have proper form control before a user can submit a request. There is also a Vuetify Codepen with an example how to do this Codepen
If it is necessary you should implement the v-data-table as v-data-iterator which is essentially the same functionality-wise, but allows for complete control over the look. https://vuetifyjs.com/en/components/data-iterators/
As to how to identify the problem with the v-text-field height you have to use your browser dev tools. You would then realise that the input has default paddings and margins but also a whole lot under the hood. It e.g. allocates space for error messages to pop up and for a label to go above the field.
And how to fix your JSfiddle you can read in the getting started section of the vuetify documentation under CDN https://vuetifyjs.com/en/getting-started/installation/#usage-with-cdn.
you can use the "dense" property for Lower height of v-data-table inputs
https://vuetifyjs.com/en/components/data-tables/#dense
I'm tinkering around using Chrome DevTools on someone's site to clean up their code and make things look the way they've requested.
So far I've been unable to delete an HTML element without also deleting its child elements (I right click on the <div> I want to delete and click 'delete element' - but this also removes all child element inside it).
However, I only want to remove the outer <div> wrapping because it's redundant and unnecessary (the code is a mess with divs inside of divs inside of divs for no reason). When I double click on the <div> and use the delete key to erase it, I'm unable to remove the outer carrots and when I click back out, the <div> reappears.
I'm almost sure I'm missing a simple step - can someone point me in the right direction?
Right-click on the div you want to remove and choose 'edit as html'. Remove the lines you don't want and then click outside the editable area to close it.
Right-click the element, choose Edit as HTML, delete the start and end tags, and save. That should move the child elements out of it and into its parent automatically. Deleting the element will always also delete its children; double-clicking it only lets you edit its tag name and not its entire markup.
The Problem in Hand:
I want to make a form designer where user can drag and drop fields of different type and design the layout too, some what similar to wufoo form builder but here the layout is limited to single column whereas I want to make something where user can make the layout as they want.
I understand how to do in single column view, but could not understand how to achieve multiple column layout eg: row 1 there could be 3 elements, row 2 one element stretched to full length, row 3 there could be just 2 elements etc.
What I tried:
I have tried with jquery UI sortable to make a single column layout with using div where new elements can be dragged and repositioned.
Any suggestion on how to proceed further will be helpful
I have tried searching StackOverFlow and google but could not find any link on a similar topic. If anyone could point me to the same, it will be also helpful.
When you reorder elements on wufoo form builder, you can only drag'n'drop up or down. Remove that restriction and as soon as one element is dragged across a certain threshold, it "belongs" to the next column. If the "old" column was the first or last one and the line that the element was moved over was to the "outside" of the form, add a new column there, until the maximal number of columns is reached.
If the used drags the last element of a column into another column, remove the now empty column on element-drop.
You could also remove the dynamic adding/removing of columns and juist have a button ("remove column" & "add column") to do it by code.
An example for the dropping in another column can be found here: http://jqueryui.com/sortable/#connect-lists
Hope this helped!
Edit:
http://jqueryui.com/sortable/#portlets and http://jqueryui.com/sortable/#empty-lists also have elements that you could look into. Good luck! Sounds like a nice project. Can we see any progress or beta?
Here's the case: I have a series of thumbnails in a page, and I would like to display several keywords over each image when the user hovers with the cursor. Each of those keywords are anchor tags that point to a search query. And each thumbnail (the image) should also be clickable (through the empty spaces that the keywords leave) and point to a specific page.
I have everything already coded, I'm just missing a way to display the keyword anchors over the image anchors. I already tried with an onclick="window.location.href=..." but when the user clicks the keyword, the onclick is also triggered (for instance: if I ctrl+click on a keyword, i get the keyword search on a different window, but the main window content changes as well).
Any help will be much appreciated. Thanks!
This is quite common and can definitely be done with plain HTML and CSS. You can also do it with JavaScript, but I prefer to avoid doing so if possible.
This example is perfectly valid HTML/CSS and should have no weird browser rendering issues (even as far back as IE 6).
http://jsfiddle.net/2JD76/1/
Basically you have a containing element, in this case a div, which has your linked thumbnail and linked keywords. They're hidden by default and only shown when the containing div is hovered.
The linked thumbnail is absolutely positioned so that it's taken out of the page flow which then allows the linked keywords to appear on top. I then use z-indexes to make sure that the keywords are always on a layer that is higher than that of the linked thumbnail.
You can not. It is illegal html.
Attach a click handler that changes the current location instead of the "greater ".
I was going to answer with a long reply but, well check out my Jsfiddle here. I was trying to solve something before and well...check it out.
http://jsfiddle.net/somdow/KSt6a/
If you look at the code, its doing exactly what you are describing.
On my Jsfiddle, theres a div box with space for an image(this is wher YOUR image would go), The image is on the code but not on the jsfiddle so youll see the alt tag....Anyways so, on mouse-over, it brings up another div with text dynamically created inside of it.
All you have to do is replace the image content with your own image, then Insert the links/keywords links you want into this line
.prepend('<div class="portSecRollOver"><div class="portSecInner"></div></div>');
and stick your words in between the <div class="portSecInner"> **YOUR WORDS HERE** </div> line
And change the CSS to fit your needs.
oh AND ps, DELETE this line (below) which is the one that dynamically appends text inside of "portSecInner", since your going to insert your own words, then you dont need this line.
$(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr("alt") + "</h3>");