Is it possible to create a "Full Screen(Browser Window) Website" with MudBlazor (in Blazor Server)?
What I want is, that the #Body part fills the complete rest of the browser window. So it's not really a full screen/browser div, but a div that fills the complete body and does not resize when it hosts a larger child element. When you look at the layout below, you'll see that there is an AppBar and a MudDrawer(Sidebar). So these need to be deducted from a full screen size div. And since the Sidebar can show/hide, the 'filling' div needs to adapt to the remaining space.
Any idea, how to solve this problem?
<MudLayout>
<MudAppBar Elevation="1">
<MudIconButton Icon="#Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="#((e) => DrawerToggle())" />
</MudAppBar>
<MudDrawer #bind-Open="#_drawerOpen" ClipMode="DrawerClipMode.Always">
<MudNavMenu>
<MudNavLink Href="/">Home</MudNavLink>
</MudNavMenu>
</MudDrawer>
<MudMainContent>
#Body
</MudMainContent>
</MudLayout>
Related
scrolldown=driver.execute_script("window.scrollTo(0, document.body.scrollHeight);var scrolldown=document.body.scrollHeight;return scrolldown;")
match=False
while(match==False):
last_count = scrolldown
time.sleep(3)
scrolldown = driver.execute_script("window.scrollTo(0, document.body.scrollHeight);var scrolldown=document.body.scrollHeight;return scrolldown;")
if last_count==scrolldown:
match=True
I want to scrape data from an Instagram profile with Selenium, but I don't know how to set the limit for scrolling the page. Because of the code above, the page keeps scrolling until I don't know when it stops. I just want to scroll through that account's posts until I find the one I'm looking for.
As you mentioned "to scroll through that account's posts until I find the one I'm looking for" presumably the specific element should be having an unique attribute either among:
id
classname
aria-label
innerText
or can be identified uniquely within the HTML DOM with combination of it's attributes. Once you are able to construct the locator strategy which identifies the element uniquely, you can easily use scrollIntoView() method as follows:
element = driver.find_element(By.XPATH, "//unique_xpath_locator")
driver.execute_script("return arguments[0].scrollIntoView();", element)
Probably the best and safest way to scroll is to use
element = driver.find_element(...)
driver.execute_script('arguments[0].scrollIntoView({block: "center", behavior: "smooth"});', element)
this command scrolls smoothly in such a way that element is vertically at the center of the page. So in your case I suggest to scroll to the oldest loaded post (it should be located at the bottom of the screen) so that new ones are loaded, and repeat the process until you find the post you are looking for. You can do this with the following code
while 1:
loaded_posts = driver.find_elements(By.CSS_SELECTOR, 'article > div > div > div > div')
# scroll to last loaded post
driver.execute_script('arguments[0].scrollIntoView({block: "center", behavior: "smooth"});', loaded_posts[-1])
post_found = ...
if post_found:
break
I build a textinput like facebook's mentions. After typing # you get a list with different hashtags. I have two of them on one site, one for the title and one for the text.
The problem is, that the hashtag-list from the title is displayed below the text of the content. See Screenshot for that:
The list of hashtags is behind the lorem ipsum content
I tried using the zIndex but it does not have any effect here.
The hierachie is as follows:
View:
-- MentionsText Title
--- #List for Title
-- MentionsText Content
--- #List for Content
As you can see, the content is below the title in the hierachy. That positions it correctly on the screen, but displayes itself above the list of the title. Is there any way of accomplishing it with a smooth solution?
Try wrapping your blocs into views independently, don't use absolute position.
Btw if your list can grow without limit you may need a ScrollView or FlatList.
I found a solution that contains wrapping both textinput in one view, changing the order (content first, then title) and then setting flexDirection of the view to 'column-reverse'. That way the title is again on top and the z-index is now correctly set too. Just doesnt seem very nice, maybe someone got a tip to improve it. The code is the following (note that the MentionsTextInput contains the List as a child):
<View style={{flexDirection:'column-reverse'}}> //The newly added view
<MentionsTextInput //The content of the page
style={styles.inputContent}
placeholder={I18n.t("descriptionInput")}
value={this.state.description}/>
<MentionsTextInput //The title
style={styles.inputTitle}
placeholder={I18n.t("noteTitle")}
value={this.state.title}/>
</View>
When editing an image content element in TYPO3, usually there is a tab "appearance" with options for image size, alignment, position etc. In my installation that tab is not showing, but instead a "nameless" tab. I'm using the t3sbootstrap extension and this behaviour might be caused by bootstrap.
Does anyone know how I can make the appearance tab visible and usable again? I've searched the internet but didn't find anything helpful so far. Thanks for your help!
Here is a screenshot from my backend:
Apparently this problem is caused by a corrupted TCA. I made the following changes in default TCA using System -> Configuration:
To restore the options for Layout, Top and bottom margins and frames, I set the following:
$TCA['tt_content']['palettes']['frames']['showitem'] = 'layout;LLL:EXT:cms/locallang_ttc.xlf:layout_formlabel, spaceBefore;LLL:EXT:cms/locallang_ttc.xlf:spaceBefore_formlabel, spaceAfter;LLL:EXT:cms/locallang_ttc.xlf:spaceAfter_formlabel, section_frame;LLL:EXT:cms/locallang_ttc.xlf:section_frame_formlabel';
To restore the appearance tab title:
In $TCA['tt_content']['types']['image']['showitem'] I changed LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance to LLL:EXT:cms/locallang_ttc.xlf:tabs.appearance
To restore the image adjustments:
In $TCA['tt_content']['types']['image']['showitem'] I changed --div-- to --palette-- right after the frames part and I added LLL:EXT:cms/locallang_ttc.xlf:palette.image_settings;image_settings, --palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.imageblock;imageblock, --div--; after the frames part.
This is the result:
$TCA['tt_content']['types']['image']['showitem'] = '--palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.general;general, --palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.header;header, --div--;LLL:EXT:cms/locallang_ttc.xlf:tabs.images, image, --palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.imagelinks;imagelinks, --div--;LLL:EXT:cms/locallang_ttc.xlf:tabs.appearance, --palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.frames;frames, --palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.image_settings;image_settings, --palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.imageblock;imageblock, --div--;LLL:EXT:cms/locallang_ttc.xlf:tabs.access, --palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.visibility;visibility, --palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.access;access, --div--;LLL:EXT:cms/locallang_ttc.xlf:tabs.extended, , --div--;LLL:EXT:flux/Resources/Private/Language/locallang.xlf:tt_content.tabs.relation, tx_flux_parent, tx_flux_column, tx_flux_children;LLL:EXT:flux/Resources/Private/Language/locallang.xlf:tt_content.tx_flux_children';
Result
After making these changes, the result is the following:
I have a <blockTable> that change size depending an user input.
I want to continue drawing on next page if there is no sufficient space to draw the blocktable on the same page.
<condPageBreak height='1in'/>
<blocklTable ...>
...
How can I change blockTable height to jump to the next page if there is not enough space on the current page?
I'm not sure about dynamically change or break page. But I use below method. May be it will useful to you.
Try with this RML reports.
The <condPageBreak/> tag is a "CONDitional Page Break". To use it, you give it a height in any units that RML can handle.
It then compares this height with the remaining available space on a page. If the space is sufficient, then the next elements are placed on the current page, but if there is less space than the height you have given it anything following the <condPageBreak/> is continued on the next page
<condPageBreak/> has only one attribute - the mandatory one of
height
For Example:
<condPageBreak height="1in"/>
<condPageBreak height="72"/>
For more details: RML User Guide
NOTE:
Use above examples before the start of <blockTable> tag
For Example:
<condPageBreak height="1in"/>
<blockTable style="Table4">
.
.
.
</blockTable>
I have .jsff page that contain command button and inline frame. What I want to do is, I want to make command button remain static at the same place and only inline frame can move when scroll the page.
Currently what I do is I set some panel stretch layout(StyleClass:AFStetchWidth). I put the command button at the top. Inline frame in scroll panel group at the center.
Here is my structure:
af:panelStetchLayout(StyleClass:AFStretchWidth)
>
Panel Stretch Layout facets
bottom
center
af:panelGroupLayout-scroll
af:inlineFrame (StyleClass:AFStretchWidth)
end
start
top
af:panelGroupLayout-horizontal
af:commandButton-back
When I run this page: command button remain static at the top. This is correct, but the size of the inline frame is small. Is there a way to make an inline frame to be stretch?
set the (StyleClass:AFStretchWidth) on the af:panelGroupLayout-scroll.
Did you try putting this attribute :
sizing="preferred"
I have used it and it works pretty well inside panel stretch layout.
just i solve it as following:
<af:panelGroupLayout id="pgl1" halign="center">
<af:inlineFrame id="if1" source="/index.html" styleClass="AFStretchWidth" inlineStyle="height:100%;"/>
</af:panelGroupLayout>
inlineStyle="height:100%;"
on default af:panelGroupLayout
thats all.
I was getting the same issue. Here I have solved it as below:
I have used panel splitter for inline frame.
<af:panelSplitter styleClass="AFStretchWidth" inlineStyle="height:500px;" id="ps3" dimensionsFrom="parent"
positionedFromEnd="false">
<f:facet name="first">
<af:panelGroupLayout id="pgl11" >
<af:inlineFrame styleClass="AFStretchWidth" partialTriggers="cb3" source="#{pdfHandler.servletString}"
id="if1" visible="true" binding="#{pdfHandler.inLineFrame}" shortDesc=" "
inlineStyle="height:500px;"/>
</af:panelGroupLayout>
</f:facet>
Here as shown above,
I have added inlineStyle for height in both panelSplitter and in inlineFrame.
Added dimensionFrom for panelSplitter as 'parent'
Surround inlineFrame with panelGroupLayout.
With this, It worked for me.