If I write class="col-lg" without any breakpoints for smaller screens, I get automatically-sized columns that fill the grid when the screen is sized lg. But the smaller breakpoints, which have explicit sizes for col (ex: col-md-5) take over the automatic sizing and I find no way to bring it back.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-5 col-lg">
text1
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg">
text2
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg">
text3
</div>
</div>
Expected behavior:
xs : sm: md: lg:
text1 text1 text2 text1 text2 text1 text2 text3
text2 text3 text3
text3
Related
I want to extract the all contents between two tags with different level.
After google, i can't find the effective solutions for my need.
I expect you have solultions with Python.
so please see the html code below:
<span id='info'>
<span>
<span class='cl'>text1</span>
text2 is Chinese string.
text3
</span>
<br 1>
<span class='cl'> text4</span> text5
<br 2>
<span class='cl'>
<span>text7</span>
text8
text9
</span>
<br 3>
<span class='cl'> text10</span> text11
<br 4>
<span class='cl'> text12</span> text13
<br 5>
</span>
And, before first <br 1> tag, the html in some pages is like below:
# one situation below:
<span id='info'>
<span>
<span class='cl'>text1</span>
text2 is Chinese string.
text2 is Chinese string.
text3
</span>
<br 1>
<span class='cl'> text4</span> text5
......other html....
</span>
# two situation below:
<span id='info'>
<span class='cl'>text1</span>
text2 is Chinese string.
text3
<br 1>
<span class='cl'> text4</span> text5
......other html....
</span>
I want to extract contents:
text1 text2 text3 .... text13
I tried Xpath and bs4 for very very more methods, but there were no ok for my need.
Could you tell me the right way to use Xpath or bs4 or other mehods to get the expected output above?
Thank you in advance!
Xpath I tried:
str = response.xpath("//span[#id='info']/descendant::span[contains(text(),'text1')]/following::br[1]/preceding-sibling::node()")
str = str.xpath('string(.)').extract()
print(str)
then i got(like below):
[' \n \n text1 \n \n tex2 \n tex3 \n \n]
Above is the contents before first <br > tag. Because the html tags is not stable in different pages eventhough they are from same website, in the area of <span id='info'>. So i have to extract the contents between two neighbouring <br > tags separately.
And soup didn't work, i did not study it.
For my want, just the <br> tags have the stable postions and status. So i want use <br> tags to position the informations ( one br, one infomation ).
So, how can i do?
Give this a try for a BeautifulSoup solution... It's almost completely stolen from this answer: https://stackoverflow.com/a/1983219/684776
from bs4 import BeautifulSoup
from bs4.element import Comment
import urllib.request
def tag_visible(element):
if element.parent.name in ['style', 'script', 'head', 'title', 'meta', '[document]']:
return False
if isinstance(element, Comment):
return False
return True
def text_from_html(body):
soup = BeautifulSoup(body, 'html.parser')
texts = soup.findAll(text=True)
visible_texts = filter(tag_visible, texts)
return list(filter(lambda x: x != '', [t.strip() for t in visible_texts]))
html = """
<span id='info'>
<span class='cl'>
<span>text1</span>
text2
text3
</span>
<br 1>
<span class='cl'> text4</span> text5
<br 2>
<span class='cl'>
<span>text7</span>
text8
text9
</span>
<br 3>
<span class='cl'> text10</span> text11
<br 4>
<span class='cl'> text12</span> text13
<br 5>
</span>
"""
print(text_from_html(html))
Test in on Repl.it: https://repl.it/#mac9416/SO-57890610
Generally, don't use regex to parse HTML.
But if all the HTML you want to parse looks very similar to your example, then... do what works!
(?<=>)(?:\s*)[^(<|\s).]+(?=\s*<)
That will capture the text and leading whitespace. Then you can .trim() to the content you want.
See it in action on regex101.
I have a layout container that shows items like this:
My code:
<div fxLayout="column" fxFlex="50">
<div fxLayout="row wrap" fxLayout.xs="column wrap" fxLayoutAlign="center center">
<button mat-stroked-button color="primary" fxFlex="1 3 30" *ngFor="let category of categories">{{category.DISPLAY | translate}}</button>
</div>
</div>
I would like the row to wrap the items based off the space available. In this case, I would like the "Email" category to take up the entire space of the newly wrapped row. Any help would be appreciated.
simple example
<div fxLayout="row wrap" fxLayoutAlign="center center" >
<button mat-stroked-button color="primary" fxFlex="3 0 33.3" *ngFor="let i of [1,2,3,4]">aaaaaaaaa</button>
</div>
I'm new to flexbox and it seems really complex compared to bootstrap. I have a splash screen where I am required to vertically and horizontally center a content:
<div layout="row" layout-align="center center">
<div layout="row" layout-wrap>
<div flex="30">
<img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
</div>
<div flex="45">
<h2 class="title">example.com</h2>
</div>
<div flex="25">
<h1 class="bang">Bang!</h1>
</div>
</div>
</div>
however it doesn't center till I add a height to it:
style="height:500px"
Why does it behave this way? Is my code wrong? This doesn't seem like the right way of doing it.
Also with the items in my second row with the layout-wrap the last div with flex=25 overlaps the second div with flex=45.
Basically what I want to do this vertically and horizontally center a div and be able to split that div into as many columns as I like while maintaining a responsive width that adjusts depending on screen size.
Maybe this can point you in the right direction - CodePen
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="row" layout-xs="column" layout-align="center center">
<div flex="30">
<img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
</div>
<div flex="45">
<h2 class="title">example.com</h2>
</div>
<div flex="25">
<h1 class="bang">Bang!</h1>
</div>
</div>
I am trying to have text on both edges (right and left) of the slider. It's very clear why this makes sense from a UX perspective. Obviously that's not working for me:
<div class="row">
<div class="small-10 small-centered columns">
<fieldset class="fieldset ">
<legend style="background:0;">bla bla</legend>
<div style="color:#1583cc">left extreme name</div>
<div class="slider" data-slider data-initial-start="50" data-initial-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<div style="color:#1583cc">right extreme name</div>
<div class="row">
<div class="small-1 small-centered columns">
<input type="number" id="sliderOutput2" style="text-align:center; color: #1583cc;">
</div>
</div>
</fieldset>
</div>
</div>
The texts become their own row while the slider takes up the entire width of the container as a third row in between them.
I'd like them to be one row, where the slider occupies the space left after the texts have been positioned at the (left and right) edges of the container's width. How should that be accomplished in a nice way?
As a newb to the Zurb Foundation, you should look into the grid system which allows you to do just what you are asking. It is also the basis for the responsive design.
Your code:
<div style="color:#1583cc">left extreme name</div>
<div class="slider" data-slider data-initial-start="50" data-initial-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<div style="color:#1583cc">right extreme name</div>
... should utilize the grid. Here is an example but there are many ways you could go about it.
<div class="row">
<div class="small-3 columns" style="color:#1583cc">left extreme name</div>
<div class="small-6 columns">
<div class="slider" data-slider data-initial-start="50" data-initial-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="small-3 columns" style="color:#1583cc">right extreme name</div>
</div>
http://foundation.zurb.com/sites/docs/slider.html#data-binding
Here is the info on grids (and more basics) you should study:
http://foundation.zurb.com/sites/docs/grid.html#basics
.container-fluid('padding-bottom:15px;color:#fff')
.row
.col-md-6
| column 1
.col-md-6
| column 2
what's wrong with my jade above?
There are two errors in your example:
Wrong indents.
You can't set inline styles like that.
Try this
.container-fluid(style='padding-bottom:15px;color:#fff;')
.row
.col-md-6
| column 1
.col-md-6
| column 2
It will compile to
<div style="padding-bottom:15px;color:#fff;" class="container-fluid">
<div class="row">
<div class="col-md-6">column 1</div>
<div class="col-md-6">column 2</div>
</div>
</div>
Otherwise you would get something like this
<div padding-bottom:15px;color:#fff="padding-bottom:15px;color:#fff" class="container-fluid">
<div class="row">
<div class="col-md-6">column 1</div>
<div class="col-md-6">column 2</div>
</div>
</div>