I am trying to make the syncfusion grid breathe a little by adding more margin or padding to the data that is being shown in the grid but completely unable to do it.
I have tried many things like cssClass and then adding a div inside the e-column but nothing is working for me.
I am really stuck at this for a day now. Can you please help me figure this out.
The code is as follows :
<div style="color:black;" ej-grid e-datasource="FarmersModal" e-gridlines="vertical"
e-allowfiltering="true" e-allowpaging="true" e-allowsorting="true" e-enableColumnResizing="true"
e-allowselection="true" e-filtersettings-filterType="excel">
<div e-columns>
<e-column e-type="string" e-field="FarmerId" e-headertext="vis" e-width="10" margin="30px"></e-column>
<div e-column e-type="string" e-field="FarmerId" e-headertext="Farmer Id" e-width="10" ></div>
<div e-column e-type="string" e-field="FarmerName" e-headertext="Farmer Name" e-width="20"></div>
<div e-column e-type="string" e-field="RegistrationId" e-headertext="Registration ID" e-width="20"></div>
<div e-column e-type="string" e-field="RegistrationDate" e-headertext="Registration Date" e-width="30"></div>
</div>
</div>
I was trying different ways to make it work so I was using different tags and trying to know how can I do the stuff. I just want to add margin to the table cells so that the table data doesn't looks cramped.
Thanks in advance and let me know where I am doing the mistake.
So based on your requirement we have prepared a sample and achieved your requirement by using external CSS. Please refer the below code example and sample for more information.
<style>
.e-grid .e-gridcontent .e-rowcell {
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
</style>
Related
I am building a WordPress website focused on sports and I am using a sports API to get the latest 10-15 highlights videos from different leagues (basketball, soccer, etc). I have been able to get that information, the problem comes that data is displayed vertically, while I would like it to be shown horizontally with a slider/carousel if possible.
I have been looking at Elementor (it's the builder page I am using for WordPress) and several tutorials but I haven't been able to find anything helpful.
I have the following code:
<center>
[jsoncontentimporter url=API I AM USING]
{subloop:results:-1}
{subloop-array:results:-1}
<img src="{results.strThumb}" style="width:275px;height:125px;">
<br>
<strong style="font-size: 10px;">{results.strHomeTeam}</strong>
<strong style="font-size: 10px;">{results.intHomeScore}</strong>
-
<strong style="font-size: 10px;">{results.intAwayScore}</strong>
<strong style="font-size: 10px;">{results.strAwayTeam}</strong>
<strong style="color:#C3414D;font-size: 14px;">{results.dateEventLocal}</strong>
<br>
{/subloop-array:results}
{/subloop:results}
[/jsoncontentimporter]
</center>
I am using the free version of Elementor but I wouldn't mind too pay for the PRO version if necessary, though I believe there is not any block I could use there, and also would like to know if it's possible to do it with HTML since I would like to get deeper knowledge at it.
Does anyone have any idea or any guide I could check to be able to do this with HTML ?
Here's an example of what you could do using mostly CSS
https://codepen.io/panchroma/pen/jOGGPKq
I think what you want to try and do is see if you can add extra HTML around your JSON code. For example, see if you can make some of the text italic with something like
<emphasis>{subloop-array:results:-1}</emphasis>
If you're able to do this, then the next step would be to add additional divs that wrap all of the results, each individual result, and then details within each result. As shown in this screenshot
If you can get to this point then I think you have the problem solved.
You now have some classes that you can target with CSS styling, a basic CSS example would be:
.results-wrap {
display: flex;
overflow-y: scroll;
}
.result {
padding: 5px;
min-width: 200px;
}
.details {
background-color: #fff;
}
https://codepen.io/panchroma/pen/jOGGPKq
Your help would be immensely appreciated and thank you in advance to the audience.
I am having a small problem of CSS and .tpl files. I am currently building a site for a client using weebly cms. Which is great. However they are now using 'less' instead of normal css. This means they have partials and variables included now. Which I am unfamiliar with. I simply want to align some text to 'center' which is always a straight forward process in traditional CSS. In this case. the div class for the text in question lies within the .tpl file in 'partials' There is no class associated with the text in the normal CSS file.
I'd like to know if I could add the class within the normal CSS from the .tpl file. I have tried using the same class name from the .tpl within CSS using id tags and class tags i.e # and .
However with no success. Im sure it is relatively straight forward but I cannot get my little head around it.
Any help would be superb, Happy new year all!
Thank you
This is the .tpl code in question, as you can see the class names are simple.
wsite-com-product-price
wsite-com-price
wsite-come-catergory-product-price
<div class="wsite-com-product-price {{price_class}}">
<div class="wsite-com-price {{!
}}{{^is_featured}}wsite-com-category-product-price{{/is_featured}} {{!
}}{{#is_featured}}wsite-com-category-product-featured-price{{/is_featured}}">
{{{price_html}}}
</div>
The CSS relating is this: the first line is my attempt at making this work:
.wsite-com-price .wsite-com-product-price .wsite-com-category-product-price {
text-align: center;
}
I simply would just like to align the price to center:
The following is the HTML from view source on the page, (how i found the class names, but they are in .tpl file not the css!)
<div class="wsite-com-category-product-name wsite-com-link-text">
Merola Choker 1
</div>
</a>
<div class="wsite-com-product-price ">
<div class="wsite-com-price wsite-com-category-product-price ">
£125.00 - £165.00
</div>
<div class="wsite-com-sale-price wsite-com-category-product-price ">
£125.00 - £165.00
</div>
</div>
</div>
</div>
<div class="wsite-com-category-product wsite-com-column " data-id="5">
<div class="wsite-com-category-product-wrap ">
THANK YOU SO MUCH FOR ANYONE INTERESTED!
CORRECT ANSWERS SCREENSHOTS BELOW>>> THANKS!!!!
Try to use:
.wsite-com-category-product-price {text-align: center;}
As combinations of other classes might not always work.
Or:
.wsite-com-price, .wsite-com-product-price, .wsite-com-category-product-price {text-align: center}
To cover all price related classes.
.wsite-com-price .wsite-com-product-price .wsite-com-category-product-price {
text-align: center;
}
Here .wsite-com-price is expected to be parent class, which is not there in your tpl. (or did i missout).
.wsite-com-product-price, .wsite-com-category-product-price {
text-align: center;
}
Try this if, this works, they you missed the parent class.
Thanks again for anyone who can help me with what should be a seemingly easy problem! I just can't figure it out for the life of me. I am creating a sign up page that includes two areas. I want these input areas to be inline with an icon that comes up while it is checking the database.
I have everything setup and I think my html is proper. I have created a row that contains both the input box and the whirly loader I got from the internet. The only problem is when I run it the whirly loader is way too big and is not totally in line with the input box.
here is my html:
<div class="row">
<div class="col-xs-10">
<input type="text" class="form-control" id="usernameOrEmail" placeholder="Shattr Username or Email">
<label id = "usernameLabel"></label>
</div>
<div class="col-xs-2">
<div class="whirly-loader" id="usernameSpinner" style="display: none;">Loading...</div>
</div>
</div>
I then go in and point to the "whirly-loader" class, but nothing changes no matter what I set my width and height to. This may be too weird a question but if anyone has any suggestions that would be awesome. Here is my css:
.whirly-loader{
height:10%;
width:10%;
}
Your animation icon is set as a background to the whirly-loader selector? If yes, then just add background-size: cover and it should fit defined height and width.
BTW. Always paste your fiddle. It's easier to help.
A little new to html so if further explanation is necessary or this question just doesn't make sense please feel free to say so.
I am using div to layout a webform I am designing and using the   to move text within a div doesnt always produce the result I want as far as the layout of the page.
I started experimenting and by using:
<span style="margin-left:(variable)px"></span>
i am able to move the text exactly where I want it.
My question is this, is this a bad practice? is there a better way to do what I am trying to do, or a more conventional way? Or even something built into html that I just have not discovered yet.
Thank you
* Added Block of code to show what i am trying to accomplish
Complainant's Address
<input type="text" size="50" id="complainantAddress"/>
<span style="margin-left:3px"></span>
City
<input type="text" name="city" maxlength="15" size="15"/>
<span style="margin-left:16px"></span>
State
</div>
Using non breakable spaces for layout/positioning is bad practice.
What you are trying to do with style attributes is better, but inline-style attributes are often considered as bad pratice, too.
Style attributes are hard to maintain and you duplicate lots of information etc. In addition this styling has the highest specificity and cannot be overwritten by other styles (like user CSS files). They should be used with caution.
Use CSS attributes margin, padding and text-align for this.
Sample
http://jsfiddle.net/UYUA7/
HTML
Text<br />
Text <!-- Do NOT use this -->
<div class="center">Center</div>
<div class="right">Right</div>
<div class="indent">Indented</div>
CSS
.center {
text-align: center;
}
.right {
text-align: right;
}
.indent {
margin-left: 20px;
}
What you're doing is actually a better way to do spacing, than relying on  s. This will give you a much greater flexibility in the long-term and allow you to make changes quicker. (Less typing)
The only other thing that I would recommend is to read through this CSS manual:
http://www.w3schools.com/css/css_intro.asp
This will help you continue to learn about position with css.
UPDATE:
This is what your code can look like:
CSS - Use it in the header
<style type="text/css">
#complainantAddress {
margin-right: 3px;
}
#city {
margin-right: 16px;
}
</style>
HTML
Complainant's Address: <input type="text" size="50" id="complainantAddress"/>
City: <input type="text" name="city" maxlength="15" size="15" id="city"/>
Notice that I created two css styles, one for each matching input boxes. Within each style I defined a margin which would add the appropriate spacing to the right of the input box.
So the first input box called "complainantAddress" will have 3px spacing to the right and the second one who's id is "city" will have 16px spacing to the right of it.
Does anyone know how to create a coupon (printable is even better) with HTML & CSS? Forgive the horribly simple question, I don't do much of any web development :)
Thanks in advance.
EDIT: EDIT: Seth posted his answer again, which I accepted, thus I removed the answer from here (it was just a copy of his original deleted post).
I'm guessing you want
.coupon {
width: 250px;
padding: 10px;
text-align: center;
border: 3px dashed #ccc; }
<div class="coupon">15 points for your reputation</div>
around a div? Or something more involved?
I stole it from here.
I'll not cover the HTML part of the question because that's very , very basic, and very specific to yourself.
For print specific styling, in your HTML mark-up you can add a stylesheet explicitly for print media, like so:
<link rel="stylesheet" type="text/css" media="print" href="my-printable-style.css"/>
You can also do this directly in an existing CSS doc, by using CSS directives, like so:
//sample ripped from http://www.w3schools.com/CSS/css_mediatypes.asp
#media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px}
}
#media print
{
p.test {font-family:times,serif;font-size:10px}
}
but this is generally viewed as the weaker tool because it can lead to confusion and maintenance problems to bloat a single document like this, and it achieves the same as the element based method.
For a good run down of some printable CSS issues read this list apart article.
<label for="dwfrm_cart_couponCode">
CODE
</label>
<input type="text" placeholder=" CODE" name="dwfrm_cart_couponCode" id="dwfrm_cart_couponCode">
<button type="submit" value="dwfrm_cart_addCoupon" name="dwfrm_cart_addCoupon" id="add-coupon">
</button>
<div class="error">
Please Enter a Code
</div>