I work with views. A view manages the display of some text. I checked under REWRITE RESULTS the Trim this field to a maximul length-box and alsoo the Trim only a word-box and Add an eclips...-box.
Where the pages used to look like this:
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
now it's like this:
<div class="test"><div class="test"><div class="test"><div class="test"></div></div></div></div>
Is this a (known) Drupalbug or what am I doing wrong here?
Try toggeling "Strip HTML tags". It did work for me!
How many characters are you restricting the field to?
If it is trimming the closing 's from the field and trying to output
<div class="test"><div class="test"><div class="test"><div class="test">
Then it maybe that either Firefox is closing the divs by itself or it may be that the views trim function tries to tidy the HTML up before outputting it - and it has to guess where the divs should be closed and unfortunately for you, it's guessed wrong by closing them all at the end of string.
Your best option is to either get the view to strip the HTML before trimming, or display it untrimmed. Trimming HTML to a fixed length can cause all kinds of strange issues if you chop off the ends.
Related
I've been trying to use stepper in ng-zorro but faced some styling limitations. ng-step is basically a combination of a few divs when I inspect an ng_step, the HTML shows the following:
<div class="ant-steps-item-tail ng-star-inserted">...</div>
<div class="ant-steps-item-icon">...</div>
<div class="ant-steps-item-content>...</div>
what I need is something like:
<div class="ant-steps-item-tail ng-star-inserted">...</div>
<div class="container">
<div class="ant-steps-item-icon">...</div>
<div class="ant-steps-item-content>...</div>
</div>
Is there a way for me to insert this into it.
Sorry for not explaining it properly, This is the best way I could put it.
If you still couldn't understand the question, you could inspect an ng-step, that might help clear out the question I have here.
I have a bit of an unusual question, but I'm stuck and thought someone here may know. I basically want to create a membership overview/comparison as included and was wondering how one would build it most efficiently/best, especialyl the part highlighted in red.
Would you tackle it with CSS and build each single element? Or would you rather do it in photoshop and include such pictures via code e.g. as background image?
Given that it's still code related (i.e. is it possible / efficient to build this with CSS), I hope the question is valid and someone could shed some light onto this! (I dont expect any code solution at all, just would like to understand if CSS/SVG coding is the most efficient way).
Thanks a lot for any help!!
You could create a single SVG element and just reuse it across the three different columns, changing the fill (orange/gray/blue).
The best you can do is to use bootstrap to reach this:
<div class="container">
<div class="col-sm-3">
<!-- Column one, detail list -->
</div>
<div class="col-sm-3">
<!-- Column two, first membership option -->
</div>
<div class="col-sm-3">
<!-- Column third, second membership option -->
</div>
<div class="col-sm-3">
<!-- Column four, third membership option -->
</div>
</div>
you'll get a responsive well designed behaviour:
https://jsfiddle.net/zzhs5w6n/2/
The part that you marked in red are only images.
You can find some for free googling a bit, or you can design yourself using photoshop, illustrator, or even gimp or microsoft paint if you want.
Then, in the example, you must add responsiveness to this images, check the next complete fiddle:
https://jsfiddle.net/zzhs5w6n/10/
Then, you can add more bootstrap css or your main css to adapt it to whatever you want/need.
Hope it helps
Here's the issue, I want to pickup an image from my backend website.image_url(employee,'image_medium' )
It works when I use it with <img t-att-src="website.image_url(employee,'image_medium' )" />
But as soon as I try to use as CSS attibute, it doesn't work. How can I solve the issue?
<div style="background-image: url("website.image_url(employee, 'image_medium')");">
Try this:
<div style="background-image: url('"website.image_url(employee, 'image_medium')"');">
The single quotes withing you call to get the image I think are what is breaking the css as it thinks the first is ending the url.
url also doesn't actually need single quotes, so you can also try:
<div style="background-image: url("website.image_url(employee, 'image_medium')");">
I've a page whose styling gets messed up in Chrome (no problem for Safari and others). It seems that it inserts for a reason some strange whitespace in the HTML that ruins my layout at the top of the page and in other places.
If I choose to see the source of my PHP page, what I see is:
<body><div id="header-outer">
<div id="header" class="container">
<div class="row">
<div id="site-logo" class="span5">
<img src='logo.png' />
</div> ... etc ...
(I've modified the PHP to have no space whatsoever between BODY and DIV). But when I open the developer tools what I see is:
<body>
"" <- why?
<div id="header-outer> etc. etc..
If I manually delete the "", the layout just goes fine. What is happening here? I'm puzzled.
EDIT: you can see the page at http://bit.ly/ZkZxVG
EDIT: I've tried to disable all extensions, but with no effect on my issue.
Hint: I'm using bootstrap and JQuery. Could they mess with the code?
It's really weird, you might have some undesired char within your file, try removing <body><div id="header-outer"> and rewrite it down.
Try encoding your file with utf8 No BOM too and see if it resolves the problem.
More infos about utf8 BOM here.
Edit
Thats not white space, they must be a physical charter in there. This might not be displayed on your screen, but just press delete and backspace until you have the next element in your markup.
white space in HTML is completely ignored by the browser, it does not render it. Looking in Firebug you have "" rendered when editing the item.
for example.
if i want to quickly wrap anything by this in once.
in dreamweaver or in any other free software where i can do this.
I want to select this
<p>anything can be here - content, other html tag etc.</p>
and in one shot want to wrap inside 2 divs with predefined classes
<div class="one">
<div class="two">
<p>anything can be here - content, other html tag etc.</p>
</div>
</div>
I have work with large amount of code and need to wrap random things in Divs with defined attributes.
I found my answer on my own after digging.
We can do this from Dreamweaver Snippet's "Insert before" and "Insert after" optiion
alt text http://shup.com/Shup/300767/11022382120-My-Desktop.png